import { useState, useEffect, useCallback, useContext, useRef } from "react";
import { AuthContext } from "./AuthContext";
import { Search } from "lucide-react";

// Import pages/views
import Login from "./pages/Login";
import Register from "./pages/Register";
import ProfilePage from "./pages/ProfilePage";

// Import refactored components
import CreateModal from "./components/CreateModal";
import BeanForm from "./components/BeanForm";
import BrewForm from "./components/BrewForm";
import BeanDetail from "./components/BeanDetail";
import BrewCard from "./components/BrewCard";
import BottomNav from "./components/BottomNav";
import IosPromptModal from "./components/IosPromptModal";
import UpdatePrompt from "./components/UpdatePrompt";
import SyncIndicator from "./components/SyncIndicator";


// Import constants
import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, getRoastAgingInfo } from "./constants";

// ─── Storage helpers ───
const STORAGE_KEY = "coffee-logbook-data";
const defaultData = { beans: [], brewLogs: [], lastSyncedAt: null };

const storage = {
  get: async (key) => {
    try {
      const val = localStorage.getItem(key);
      return val ? { value: val } : null;
    } catch { return null; }
  },
  set: async (key, val) => {
    try { localStorage.setItem(key, val); } catch (e) { console.error("Storage set failed:", e); }
  }
};

async function loadData() {
  try {
    const result = await storage.get(STORAGE_KEY);
    if (result) {
      const parsed = JSON.parse(result.value);
      return { beans: parsed.beans || [], brewLogs: parsed.brewLogs || [], lastSyncedAt: parsed.lastSyncedAt || null };
    }
    return defaultData;
  } catch { return defaultData; }
}

async function saveData(data) {
  try { await storage.set(STORAGE_KEY, JSON.stringify(data)); }
  catch (e) { console.error("Save failed:", e); }
}

const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);

const LoadingScreen = () => (
  <div className="w-full max-w-[480px] mx-auto min-h-screen border-x border-[#E8DFD3] dark:border-[#3B2217] bg-[#FAF6F1] dark:bg-[#150B07] max-sm:border-x-0 flex items-center justify-center transition-colors duration-200">
    <div className="text-center text-[#9C8B7A] dark:text-[#C8B9A6]"><div className="text-4xl">☕</div><div className="mt-2 text-sm">Loading…</div></div>
  </div>
);

function MethodIcon({ method, className }) {
  const props = {
    className: className || "w-8 h-8",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "1.5",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  };

  switch (method) {
    case "pourover":
      return (
        <svg {...props}>
          <path d="M5 5h14l-4 7H9l-4-7z" />
          <path d="M7 12h10" />
          <path d="M9.5 12L7.5 19.5h9l-2-7.5" />
          <path d="M10 2.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5" />
        </svg>
      );
    case "espresso":
      return (
        <svg {...props}>
          <path d="M5 8h10v5c0 2.5-2 4.5-5 4.5S5 15.5 5 13V8z" />
          <path d="M15 10.5h6v1.5h-6z" />
          <path d="M3 18.5c4.5 2 13.5 2 18 0" />
          <path d="M10 17.5v2" />
        </svg>
      );
    case "coldbrew":
      return (
        <svg {...props}>
          <path d="M7 4h10l-1.5 16.5c0 1-1.5 1.5-3.5 1.5s-3.5-.5-3.5-1.5L7 4z" />
          <path d="M9.5 12h3v3h-3z" />
          <path d="M11.5 8h3v3h-3z" />
          <path d="M12 2l-2 4" />
        </svg>
      );
    case "aeropress":
      return (
        <svg {...props}>
          <path d="M8 8h8v12H8z" />
          <path d="M6 20h12" />
          <path d="M10 8V3h4v5" />
          <path d="M9 3h6" />
          <path d="M9 7.5h6" />
        </svg>
      );
    case "frenchpress":
      return (
        <svg {...props}>
          <path d="M8 6h8v14c0 1-1 2-3 2h-2c-2 0-3-1-3-2V6z" />
          <path d="M7 6h10" />
          <circle cx="12" cy="2.5" r="1.5" />
          <path d="M12 4v8" />
          <path d="M9 12h6" />
          <path d="M8 8H5v10h3" />
        </svg>
      );
    case "chemex":
      return (
        <svg {...props}>
          <path d="M8 4h8c-1 3.5-1.5 5-1.5 8s.5 4.5 1.5 8H8c1-3.5 1.5-5 1.5-8s-.5-4.5-1.5-8z" />
          <path d="M9.5 10.5h5" />
          <path d="M9.5 12.5h5" />
          <circle cx="12" cy="11.5" r="1.2" fill="currentColor" />
        </svg>
      );
    case "mokapot":
      return (
        <svg {...props}>
          <path d="M9 5h6l-1 7H10z" />
          <path d="M10 12.5h4l1.2 7H8.8z" />
          <path d="M9 5l3-2 3 2" />
          <circle cx="12" cy="3" r="1" />
          <path d="M9 6.2l-2 1.5 2 1" />
          <path d="M14 7.5h3.5v7H14" />
        </svg>
      );
    case "v60":
      return (
        <svg {...props}>
          <path d="M6 5h12l-4.5 7h-3z" />
          <path d="M8 12h8" />
          <path d="M9.5 12L8.5 19h7l-1-7" />
          <path d="M16.5 5a2 2 0 010 4" />
        </svg>
      );
    case "syphon":
      return (
        <svg {...props}>
          <path d="M9.5 4h5v5h-5z" />
          <path d="M12 9v4" />
          <circle cx="12" cy="16" r="3.2" />
          <path d="M7 21h10" />
          <path d="M8.5 16H6v5h3v-2" />
        </svg>
      );
    case "dripbrew":
      return (
        <svg {...props}>
          <path d="M6 21h12" />
          <path d="M7 21V5c0-1 6-1 6 0v2" />
          <path d="M8.5 5h8v3h-8z" />
          <path d="M9.5 12h5v7h-5z" />
          <path d="M14.5 14h2v3h-2" />
          <path d="M11.5 8v2.5" />
        </svg>
      );
    default:
      return <span>☕</span>;
  }
}

// ─── Main App ───
export default function CoffeeLogbook() {
  const { token, user, loading, logout } = useContext(AuthContext);
  const [authView, setAuthView] = useState("login");
  const [data, setData] = useState(null);
  const [view, setView] = useState("dashboard");
  const [modal, setModal] = useState(null);
  const [createOpen, setCreateOpen] = useState(false);
  const [selectedBean, setSelectedBean] = useState(null);
  const [brewFilter, setBrewFilter] = useState("all");
  const [editingBean, setEditingBean] = useState(null);
  const [brewSearchQuery, setBrewSearchQuery] = useState("");

  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const [syncing, setSyncing] = useState(false);
  const [showSyncedStatus, setShowSyncedStatus] = useState(false);

  const [prepActivePage, setPrepActivePage] = useState(0);

  useEffect(() => { loadData().then(setData); }, []);
  useEffect(() => {
    setBrewSearchQuery("");
    setPrepActivePage(0);
  }, [view]);

  const dataRef = useRef(data);
  dataRef.current = data;

  const syncData = useCallback(async (currentData = dataRef.current) => {
    if (!token || !currentData) return;
    if (!navigator.onLine) { setIsOnline(false); setShowSyncedStatus(true); return; }
    setIsOnline(true); setSyncing(true); setShowSyncedStatus(true);
    try {
      const { beans = [], brewLogs = [], lastSyncedAt = null } = currentData;
      const res = await fetch('/api/sync', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
        body: JSON.stringify({ lastSyncedAt, beans, brewLogs })
      });
      if (!res.ok) throw new Error('Sync failed');
      const { serverTime, beans: serverBeans, brewLogs: serverLogs } = await res.json();
      const mergedBeans = [...beans];
      serverBeans.forEach(sb => { const i = mergedBeans.findIndex(b => b.id === sb.id); i >= 0 ? (new Date(sb.updatedAt) > new Date(mergedBeans[i].updatedAt || 0) && (mergedBeans[i] = sb)) : mergedBeans.push(sb); });
      const mergedLogs = [...brewLogs];
      serverLogs.forEach(sl => { const i = mergedLogs.findIndex(l => l.id === sl.id); i >= 0 ? (new Date(sl.updatedAt) > new Date(mergedLogs[i].updatedAt || 0) && (mergedLogs[i] = sl)) : mergedLogs.push(sl); });
      const nextData = {
        beans: mergedBeans.filter(b => !(b.isDeleted && new Date(b.updatedAt) <= new Date(serverTime))),
        brewLogs: mergedLogs.filter(l => !(l.isDeleted && new Date(l.updatedAt) <= new Date(serverTime))),
        lastSyncedAt: serverTime
      };
      setData(nextData); await saveData(nextData);
    } catch (err) { console.error('Failed to sync data:', err); }
    finally {
      setSyncing(false);
      if (navigator.onLine) setTimeout(() => setShowSyncedStatus(false), 2500);
      else setShowSyncedStatus(true);
    }
  }, [token]);

  useEffect(() => {
    const handleOnline = () => { setIsOnline(true); syncData(); };
    const handleOffline = () => { setIsOnline(false); setShowSyncedStatus(true); };
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    if (token && data) syncData();
    const interval = setInterval(() => { if (token && data) syncData(); }, 30000);
    return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); clearInterval(interval); };
  }, [token, data === null, syncData]);

  const persist = useCallback(async (newData) => {
    setData(newData); await saveData(newData); syncData(newData);
  }, [syncData]);


  if (loading) return <LoadingScreen />;

  if (!token || !user) {
    return (
      <div className="w-full max-w-[480px] mx-auto min-h-screen border-x border-[#E8DFD3] dark:border-[#3B2217] bg-[#FAF6F1] dark:bg-[#150B07] max-sm:border-x-0 transition-colors duration-200">
        {authView === "login" ? (
          <>
            <Login onLoginSuccess={() => {}} />
            <div className="text-center mt-5 px-5">
              <p className="text-[#9C8B7A] dark:text-[#C8B9A6] text-sm">Don't have an account?{' '}
                <button onClick={() => setAuthView("register")} className="border-none bg-transparent text-[#8B6914] dark:text-[#D4A325] cursor-pointer underline text-sm">Register</button>
              </p>
            </div>
          </>
        ) : (
          <>
            <Register onRegisterSuccess={() => setAuthView("login")} />
            <div className="text-center mt-5 px-5">
              <p className="text-[#9C8B7A] dark:text-[#C8B9A6] text-sm">Already have an account?{' '}
                <button onClick={() => setAuthView("login")} className="border-none bg-transparent text-[#8B6914] dark:text-[#D4A325] cursor-pointer underline text-sm">Login</button>
              </p>
            </div>
          </>
        )}
      </div>
    );
  }

  if (!data) return <LoadingScreen />;

  const allBeans = data.beans || [];
  const allLogs = data.brewLogs || [];
  const beans = allBeans.filter(b => !b.isDeleted);
  const brewLogs = allLogs.filter(l => !l.isDeleted);

  const addBean = (form) => { persist({ ...data, beans: [...allBeans, { id: uid(), ...form, updatedAt: new Date().toISOString(), isDeleted: false }] }); setModal(null); };
  const updateBean = (form) => {
    const now = new Date().toISOString();
    persist({ ...data, beans: allBeans.map(b => b.id === editingBean.id ? { ...b, ...form, updatedAt: now } : b) });
    setModal(null); setEditingBean(null);
    if (selectedBean?.id === editingBean.id) setSelectedBean({ ...selectedBean, ...form, updatedAt: now });
  };
  const deleteBean = (id) => {
    const now = new Date().toISOString();
    persist({ ...data, beans: allBeans.map(b => b.id === id ? { ...b, isDeleted: true, updatedAt: now } : b), brewLogs: allLogs.map(l => l.beanId === id ? { ...l, isDeleted: true, updatedAt: now } : l) });
    setSelectedBean(null);
  };
  const addBrew = (form) => { persist({ ...data, brewLogs: [...allLogs, { id: uid(), createdAt: Date.now(), ...form, updatedAt: new Date().toISOString(), isDeleted: false }] }); setModal(null); };

  const getBeanName = (id) => allBeans.find(b => b.id === id)?.name || "Unknown Bean";
  const filteredLogs = (brewFilter === "all" ? brewLogs : brewLogs.filter(l => l.method === brewFilter))
    .filter(log => {
      if (!brewSearchQuery) return true;
      const dateObj = new Date(log.createdAt);
      const weekday = dateObj.toLocaleDateString("en-US", { weekday: "long" }).toLowerCase();
      const month = dateObj.toLocaleDateString("en-US", { month: "long" }).toLowerCase();
      const monthShort = dateObj.toLocaleDateString("en-US", { month: "short" }).toLowerCase();
      const dateNum = dateObj.getDate().toString();
      const year = dateObj.getFullYear().toString();

      const searchableText = [
        getBeanName(log.beanId).toLowerCase(),
        METHOD_LABELS[log.method]?.toLowerCase() || "",
        log.recipeDetails?.toLowerCase() || "",
        log.tasteNotes?.toLowerCase() || "",
        log.notes?.toLowerCase() || "",
        log.grindSize?.toLowerCase() || log.grind?.toLowerCase() || "",
        log.waterTemp?.toLowerCase() || "",
        log.brewRatio?.toLowerCase() || log.ratio?.toLowerCase() || "",
        log.brewTime?.toLowerCase() || log.time?.toLowerCase() || "",
        weekday,
        month,
        monthShort,
        dateNum,
        year
      ].join(" ");

      const queryWords = brewSearchQuery.trim().toLowerCase().split(/\s+/);
      return queryWords.every(word => searchableText.includes(word));
    })
    .sort((a, b) => b.createdAt - a.createdAt);
  const methodCounts = {};
  METHODS.forEach(m => methodCounts[m] = 0);
  brewLogs.forEach(l => { if (methodCounts[l.method] !== undefined) methodCounts[l.method]++; });

  const filterPillCls = (active) => `px-3.5 py-1.5 rounded-full border text-xs font-medium whitespace-nowrap cursor-pointer transition-all ${active ? "bg-[#2C1810] text-[#FAF6F1] border-[#2C1810] dark:bg-[#FAF6F1] dark:text-[#2C1810] dark:border-[#FAF6F1]" : "bg-white border-[#E8DFD3] text-[#6B5744] dark:bg-[#22120B] dark:border-[#3B2217] dark:text-[#C8B9A6]"}`;

  // Page title per view
  const pageTitles = { dashboard: "Brew Journal", beans: "Bean Recipes", brews: "Brew Logs", profile: "Profile" };
  const pageSubtitles = { dashboard: "Coffee Logbook", beans: "Your Collection", brews: "All Sessions", profile: "Account" };

  return (
    <div className="w-full max-w-[480px] mx-auto min-h-screen bg-[#FAF6F1] dark:bg-[#150B07] border-x border-[#E8DFD3] dark:border-[#3B2217] shadow-[0_0_30px_rgba(44,24,16,0.05)] dark:shadow-none max-sm:border-x-0 max-sm:shadow-none font-sans relative text-[#2C1810] dark:text-[#FAF6F1] transition-colors duration-200">

      {/* Header */}
      <div className="px-5 pt-6 pb-4 flex items-center justify-between sticky top-0 bg-[#FAF6F1]/95 dark:bg-[#150B07]/95 backdrop-blur-sm z-50 border-b border-[#E8DFD3] dark:border-[#3B2217] transition-colors duration-200">
        <div>
          <div className="text-[10px] text-[#9C8B7A] dark:text-[#C8B9A6] font-semibold tracking-[1.5px] uppercase">{pageSubtitles[view] || "Coffee Logbook"}</div>
          <h1 className="font-serif text-[21px] font-semibold tracking-tight text-[#2C1810] dark:text-[#FAF6F1] mt-0.5">{pageTitles[view] || "Brew Journal"}</h1>
        </div>
        <SyncIndicator isOnline={isOnline} syncing={syncing} showSyncedStatus={showSyncedStatus} />
      </div>

      {/* Content */}
      <div className="px-5 pt-4 pb-36">

        {/* ── Dashboard ── */}
        {/* ── Dashboard ── */}
        {view === "dashboard" && (
          <div className="animate-page-enter">
            {/* Preparation Methods */}
            <div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">Preparation Methods</div>
            <div 
              className="flex overflow-x-auto pb-4 scrollbar-none snap-x snap-mandatory -mx-5"
              onScroll={(e) => {
                const scrollLeft = e.target.scrollLeft;
                const width = e.target.clientWidth;
                const page = Math.round(scrollLeft / width);
                setPrepActivePage(page);
              }}
            >
              {(() => {
                const chunks = [];
                for (let i = 0; i < METHODS.length; i += 8) {
                  chunks.push(METHODS.slice(i, i + 8));
                }
                return chunks.map((pageMethods, pageIdx) => (
                  <div key={pageIdx} className="w-full flex-shrink-0 snap-start grid grid-cols-4 gap-x-4 gap-y-5 px-5">
                    {pageMethods.map(m => (
                      <div key={m}
                        className="flex flex-col items-center cursor-pointer group"
                        onClick={() => { setBrewFilter(m); setView("brews"); }}>
                        <div className="w-full aspect-square flex items-center justify-center rounded-2xl bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] transition-all group-hover:scale-[1.03] group-active:scale-[0.98] shadow-[0_1px_3px_rgba(44,24,16,0.04)] dark:shadow-none"
                          style={{ borderTop: `3px solid ${METHOD_COLORS[m]}` }}>
                          <MethodIcon method={m} className="w-9 h-9 text-[#6B5744] dark:text-[#C8B9A6] group-hover:text-[#2C1810] dark:group-hover:text-[#FAF6F1] transition-colors" />
                        </div>
                        <div className="text-[10px] text-[#9C8B7A] dark:text-[#C8B9A6] uppercase tracking-wider mt-2 text-center font-medium group-hover:text-[#2C1810] dark:group-hover:text-[#FAF6F1] transition-colors">
                          {METHOD_LABELS[m]}
                        </div>
                      </div>
                    ))}
                  </div>
                ));
              })()}
            </div>
            {(() => {
              const pagesCount = Math.ceil(METHODS.length / 8);
              return pagesCount > 1 ? (
                <div className="flex justify-center gap-1.5 mt-1 mb-6">
                  {Array.from({ length: pagesCount }).map((_, idx) => (
                    <div key={idx} className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${prepActivePage === idx ? "bg-[#2C1810] dark:bg-[#FAF6F1] w-3" : "bg-[#E8DFD3] dark:bg-[#3B2217]"}`} />
                  ))}
                </div>
              ) : <div className="mb-6" />;
            })()}

            {/* Statistics */}
            <div className="flex gap-2 mb-5">
              {[{ num: beans.length, label: "Beans" }, { num: brewLogs.length, label: "Brews" }, { num: new Set(brewLogs.map(l => l.beanId)).size, label: "Tried" }].map(s => (
                <div key={s.label} className="flex-1 bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] rounded-2xl p-3.5 text-center transition-colors duration-200">
                  <div className="font-serif text-2xl font-bold text-[#2C1810] dark:text-[#FAF6F1]">{s.num}</div>
                  <div className="text-[10px] text-[#9C8B7A] dark:text-[#C8B9A6] uppercase tracking-widest mt-0.5">{s.label}</div>
                </div>
              ))}
            </div>

            {/* Recent Brews */}
            <div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">Recent Brews</div>
            {brewLogs.length === 0 ? (
              <div className="text-center py-12 text-[#9C8B7A] dark:text-[#C8B9A6]">
                <div className="text-4xl mb-3 opacity-50 dark:opacity-80">📝</div>
                <h3 className="text-base mb-1.5 font-serif text-[#6B5744] dark:text-[#FAF6F1]">No brews yet</h3>
                <p className="text-[13px] leading-relaxed">Tap the + button to log your first brew.</p>
              </div>
            ) : brewLogs.sort((a, b) => b.createdAt - a.createdAt).slice(0, 5).map(log => (
              <BrewCard key={log.id} log={log} beanName={getBeanName(log.beanId)} />
            ))}
          </div>
        )}

        {/* ── Bean Library ── */}
        {view === "beans" && !selectedBean && (
          <div className="animate-page-enter">
            <div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">Your Beans ({beans.length})</div>
            {beans.length === 0 ? (
              <div className="text-center py-12 text-[#9C8B7A] dark:text-[#C8B9A6]">
                <div className="text-4xl mb-3 opacity-50 dark:opacity-80">🫘</div>
                <h3 className="text-base mb-1.5 font-serif text-[#6B5744] dark:text-[#FAF6F1]">Library is empty</h3>
                <p className="text-[13px] leading-relaxed">Tap + to add your first coffee bean.</p>
              </div>
            ) : beans.map(bean => {
              const count = brewLogs.filter(l => l.beanId === bean.id).length;
              const roastTagCls = bean.roastType?.toLowerCase().includes("dark") 
                ? "bg-[#E0D0BD] text-[#4A3520] dark:bg-[#2F1E12] dark:text-[#BCA38A]" 
                : bean.roastType?.toLowerCase().includes("medium") 
                  ? "bg-[#F0E0C8] text-[#6B4E2A] dark:bg-[#402A14] dark:text-[#D9AC7B]" 
                  : "bg-[#FFF3D6] text-[#8B6914] dark:bg-[#4A3912] dark:text-[#E6B640]";
              return (
                <div key={bean.id}
                  className="bg-white dark:bg-[#22120B] rounded-2xl shadow-[0_1px_3px_rgba(44,24,16,0.06),0_4px_12px_rgba(44,24,16,0.04)] dark:shadow-[0_4px_12px_rgba(0,0,0,0.2)] p-[18px] mb-3 border border-[#E8DFD3] dark:border-[#3B2217] cursor-pointer transition-all hover:shadow-[0_4px_16px_rgba(44,24,16,0.08)] dark:hover:shadow-[0_4px_16px_rgba(0,0,0,0.35)] active:scale-[0.99]"
                  onClick={() => setSelectedBean(bean)}>
                  <div className="flex justify-between items-start gap-3 mb-2">
                    {bean.image && <img src={bean.image} alt="" className="w-14 h-14 rounded-xl object-cover flex-shrink-0" />}
                    <div className="flex-1 min-w-0">
                      <div className="font-serif text-[17px] font-semibold text-[#2C1810] dark:text-[#FAF6F1]">{bean.name}</div>
                      {bean.roastery && <div className="text-[13px] text-[#6B5744] dark:text-[#C8B9A6] mt-0.5">{bean.roastery}</div>}
                    </div>
                    <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium flex-shrink-0">{count} brew{count !== 1 ? "s" : ""}</span>
                  </div>
                  {bean.tastingNotes && <div className="text-[13px] text-[#6B5744] dark:text-[#C8B9A6] italic mt-1.5 leading-snug">👅 {bean.tastingNotes}</div>}
                  <div className="flex gap-2 mt-2.5 flex-wrap">
                    {bean.roastType && <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${roastTagCls}`}>{bean.roastType}</span>}
                    {bean.roastDate && <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">Roasted {bean.roastDate}</span>}
                    {(() => {
                      const ageInfo = getRoastAgingInfo(bean.roastDate);
                      return ageInfo ? (
                        <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${ageInfo.style}`}>
                          {ageInfo.label}
                        </span>
                      ) : null;
                    })()}
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* ── Bean Detail ── */}
        {view === "beans" && selectedBean && (
          <div className="animate-page-enter">
            <BeanDetail bean={selectedBean} logs={brewLogs}
              onBack={() => setSelectedBean(null)}
              onEdit={() => { setEditingBean(selectedBean); setModal("editBean"); }}
              onDelete={() => { if (confirm("Delete this bean and all its brew logs?")) deleteBean(selectedBean.id); }}
            />
          </div>
        )}

        {/* ── Brew Logs ── */}
        {view === "brews" && (
          <div className="animate-page-enter">
            {/* Search Bar */}
            <div className="mb-4 relative">
              <input
                type="text"
                value={brewSearchQuery}
                onChange={(e) => setBrewSearchQuery(e.target.value)}
                placeholder="Search brews (e.g. June, espresso, floral...)"
                className="w-full pl-10 pr-10 py-3.5 bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] rounded-2xl text-xs placeholder-[#9C8B7A] dark:placeholder-[#C8B9A6] text-[#2C1810] dark:text-[#FAF6F1] shadow-[0_1px_3px_rgba(44,24,16,0.04)] dark:shadow-none focus:outline-none focus:border-[#8B6914] dark:focus:border-[#D4A325] transition-all"
              />
              {/* Search Icon */}
              <div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#9C8B7A] dark:text-[#C8B9A6] flex items-center pointer-events-none">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="opacity-70">
                  <circle cx="11" cy="11" r="8" />
                  <line x1="21" y1="21" x2="16.65" y2="16.65" />
                </svg>
              </div>
              {/* Clear button */}
              {brewSearchQuery && (
                <button
                  onClick={() => setBrewSearchQuery("")}
                  className="absolute right-3.5 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center rounded-full text-[#9C8B7A] dark:text-[#C8B9A6] hover:text-[#2C1810] dark:hover:text-[#FAF6F1] border-none bg-transparent cursor-pointer text-base font-bold transition-colors"
                >
                  &times;
                </button>
              )}
            </div>

            <div className="flex gap-1.5 mb-4 overflow-x-auto pb-1">
              <button className={filterPillCls(brewFilter === "all")} onClick={() => setBrewFilter("all")}>All</button>
              {METHODS.map(m => (
                <button key={m} className={filterPillCls(brewFilter === m)} onClick={() => setBrewFilter(m)}>
                  {METHOD_ICONS[m]} {METHOD_LABELS[m]}
                </button>
              ))}
            </div>
            {filteredLogs.length === 0 ? (
              <div className="text-center py-12 text-[#9C8B7A] dark:text-[#C8B9A6]">
                <div className="flex justify-center mb-3 text-[#9C8B7A] dark:text-[#C8B9A6] opacity-60">
                  {brewSearchQuery ? <Search size={36} strokeWidth={2} /> : <span className="text-4xl">📋</span>}
                </div>
                <h3 className="text-base mb-1.5 font-serif text-[#6B5744] dark:text-[#FAF6F1]">
                  {brewSearchQuery ? "No search results" : `No logs ${brewFilter !== "all" ? `for ${METHOD_LABELS[brewFilter]}` : "yet"}`}
                </h3>
                <p className="text-[13px] leading-relaxed">
                  {brewSearchQuery ? "Try refining your search terms or filters." : "Start brewing and log your recipes here."}
                </p>
              </div>
            ) : filteredLogs.map(log => (
              <BrewCard key={log.id} log={log} beanName={getBeanName(log.beanId)} />
            ))}
          </div>
        )}

        {/* ── Profile ── */}
        {view === "profile" && (
          <div className="animate-page-enter">
            <ProfilePage user={user} isOnline={isOnline} syncing={syncing} showSyncedStatus={showSyncedStatus} />
          </div>
        )}
      </div>

      {/* Floating Bottom Navigation */}
      <BottomNav
        view={view}
        setView={setView}
        setSelectedBean={setSelectedBean}
        onCreatePress={() => setCreateOpen(true)}
      />

      {/* Create Modal */}
      {createOpen && (
        <CreateModal
          onClose={() => setCreateOpen(false)}
          onAddBean={() => setModal("addBean")}
          onAddBrew={() => setModal("addBrew")}
        />
      )}

      {/* Modals */}
      {modal === "addBean" && <BeanForm onSave={addBean} onClose={() => setModal(null)} />}
      {modal === "editBean" && editingBean && <BeanForm initial={editingBean} onSave={updateBean} onClose={() => { setModal(null); setEditingBean(null); }} />}
      {modal === "addBrew" && <BrewForm beans={beans} onSave={addBrew} onClose={() => setModal(null)} />}
      
      {/* iOS/iPadOS PWA Install Prompt */}
      <IosPromptModal />

      {/* PWA Update Prompt */}
      <UpdatePrompt />
    </div>
  );
}