import { useState, useEffect, useRef } from "react";

const CURRENCIES = ["HKD","JPY","USD","EUR","GBP","CNY","TWD","KRW","SGD","AUD","CAD","THB","MYR","PHP"];
const CATEGORIES = ["Food & Drink","Shopping","Transport","Entertainment","Sightseeing","Other"];
const CAT_COLOR  = {"Food & Drink":"#FF6B6B","Shopping":"#4ECDC4","Transport":"#45B7D1","Entertainment":"#FF9F43","Sightseeing":"#A29BFE","Other":"#8E8E93"};
const FALLBACK   = {HKD:1,JPY:0.052,USD:7.78,EUR:8.45,GBP:9.85,CNY:1.07,TWD:0.24,KRW:0.0057,SGD:5.78,AUD:4.90,CAD:5.68,THB:0.22,MYR:1.74,PHP:0.135};

const fmt     = n => `HK$${Number(n||0).toFixed(2)}`;
const fmtDate = d => d ? new Date(d+"T00:00:00").toLocaleDateString("en-HK",{day:"numeric",month:"short",year:"numeric"}) : "";
const uid     = () => `${Date.now()}_${Math.random().toString(36).slice(2,7)}`;
const toB64   = f => new Promise((res,rej)=>{ const r=new FileReader(); r.onload=()=>res(r.result.split(",")[1]); r.onerror=rej; r.readAsDataURL(f); });

const S = {
  input: { width:"100%", padding:"10px 12px", border:"1.5px solid #E5E5EA", borderRadius:10, fontSize:15, fontFamily:"inherit", boxSizing:"border-box", outline:"none", background:"#FAFAFA", color:"#1D1D1F" },
  inputErr: { width:"100%", padding:"10px 12px", border:"1.5px solid #FF3B30", borderRadius:10, fontSize:15, fontFamily:"inherit", boxSizing:"border-box", outline:"none", background:"#FFF5F5", color:"#1D1D1F" },
  menuBtn: { background:"none", border:"none", fontSize:22, cursor:"pointer", padding:"2px 8px", color:"#8E8E93", lineHeight:1, borderRadius:8 },
  dropdown: { position:"absolute", right:0, top:"110%", background:"#fff", borderRadius:14, boxShadow:"0 6px 24px rgba(0,0,0,0.14)", zIndex:200, minWidth:170, overflow:"hidden" },
  dropItem: { display:"block", width:"100%", padding:"13px 16px", border:"none", background:"none", textAlign:"left", fontSize:14, cursor:"pointer", fontFamily:"inherit", color:"#1D1D1F" },
};
const btn = (t="primary") => ({
  background: t==="primary"?"#007AFF": t==="danger"?"#FF3B30": "transparent",
  color: t==="outline"?"#007AFF":"#fff",
  border: t==="outline"?"1.5px solid #007AFF":"none",
  borderRadius:10, padding:"10px 18px", fontSize:14, fontWeight:600,
  cursor:"pointer", fontFamily:"inherit", transition:"opacity .15s"
});

// Returns null if valid, or an error string if outside range
function validateEntryDate(date, trip) {
  if (!trip || !date) return null;
  if (trip.startDate && date < trip.startDate) return `Date is before trip start (${fmtDate(trip.startDate)})`;
  if (trip.endDate   && date > trip.endDate)   return `Date is after trip end (${fmtDate(trip.endDate)})`;
  return null;
}

export default function App() {
  const [trips,    setTrips]    = useState([]);
  const [entries,  setEntries]  = useState([]);
  const [rates,    setRates]    = useState(FALLBACK);
  const [view,     setView]     = useState("main");
  const [selTrip,  setSelTrip]  = useState(null);
  const [sortBy,   setSortBy]   = useState("date");
  const [sortDir,  setSortDir]  = useState("desc");
  const [openMenu, setOpenMenu] = useState(null);
  const [tripModal,   setTripModal]   = useState(null);
  const [entryModal,  setEntryModal]  = useState(null);
  const [delConfirm,  setDelConfirm]  = useState(null);

  useEffect(() => {
    (async () => {
      try { const r = await window.storage.get("trips");   if(r) setTrips(JSON.parse(r.value));   } catch {}
      try { const r = await window.storage.get("entries"); if(r) setEntries(JSON.parse(r.value)); } catch {}
    })();
    fetchRates();
  }, []);

  const fetchRates = async () => {
    try {
      const res  = await fetch("https://open.er-api.com/v6/latest/HKD");
      const data = await res.json();
      if (data.rates) {
        const r = { HKD: 1 };
        Object.entries(data.rates).forEach(([k,v]) => r[k] = 1/v);
        setRates(r);
      }
    } catch {}
  };

  const saveTrips   = async t => { setTrips(t);   try { await window.storage.set("trips",   JSON.stringify(t)); } catch {} };
  const saveEntries = async e => { setEntries(e); try { await window.storage.set("entries", JSON.stringify(e)); } catch {} };
  const toHKD = (amt, cur) => parseFloat(amt||0) * (rates[cur]||1);
  const tripSpend = id => entries.filter(e=>e.tripId===id).reduce((s,e)=>s+e.amountHKD,0);

  const handleSaveTrip = data => {
    if (data.id) {
      const updated = trips.map(t => t.id===data.id ? data : t);
      saveTrips(updated);
      if (selTrip?.id === data.id) setSelTrip(data);
    } else {
      saveTrips([...trips, { ...data, id: uid() }]);
    }
    setTripModal(null);
  };
  const handleDeleteTrip = id => {
    saveTrips(trips.filter(t => t.id!==id));
    saveEntries(entries.filter(e => e.tripId!==id));
    if (selTrip?.id===id) { setView("main"); setSelTrip(null); }
    setDelConfirm(null);
  };

  const handleSaveEntry = data => {
    const amountHKD = toHKD(data.amount, data.currency);
    const entry = { ...data, amountHKD };
    if (entry.id) saveEntries(entries.map(e => e.id===entry.id ? entry : e));
    else          saveEntries([...entries, { ...entry, id: uid() }]);
    setEntryModal(null);
  };
  const handleDeleteEntry = id => { saveEntries(entries.filter(e => e.id!==id)); setDelConfirm(null); };

  const openTrip = trip => { setSelTrip(trip); setView("trip"); setSortBy("date"); setSortDir("desc"); };

  const sortedEntries = selTrip
    ? [...entries.filter(e => e.tripId===selTrip.id)].sort((a,b) => {
        const m = sortDir==="asc" ? 1 : -1;
        return sortBy==="date"
          ? m*(new Date(a.date)-new Date(b.date))
          : m*(a.amountHKD-b.amountHKD);
      })
    : [];

  useEffect(() => {
    const h = () => setOpenMenu(null);
    window.addEventListener("click", h);
    return () => window.removeEventListener("click", h);
  }, []);

  return (
    <div onClick={()=>setOpenMenu(null)}
      style={{fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
              maxWidth:480,margin:"0 auto",minHeight:"100vh",background:"#F2F2F7",color:"#1D1D1F"}}>

      {/* ── MAIN PAGE ── */}
      {view==="main" && (
        <>
          <header style={{background:"#fff",padding:"16px 20px 12px",borderBottom:"1px solid #E5E5EA",position:"sticky",top:0,zIndex:50}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
              <span style={{fontSize:21,fontWeight:800,letterSpacing:-.3}}>✈️ Travel Budget</span>
              <div style={{display:"flex",gap:8}}>
                <button
                  onClick={() => setEntryModal({ tripId: trips[0]?.id || null })}
                  disabled={trips.length===0}
                  style={{...btn("outline"), opacity: trips.length===0?.4:1}}>
                  + Entry
                </button>
                <button onClick={() => setTripModal({})} style={btn("primary")}>+ Trip</button>
              </div>
            </div>
          </header>

          <div style={{padding:"14px 14px"}}>
            {trips.length===0 ? (
              <div style={{textAlign:"center",padding:"72px 24px",color:"#8E8E93"}}>
                <div style={{fontSize:52,marginBottom:14}}>🗺️</div>
                <p style={{margin:0,fontSize:17,fontWeight:600,color:"#3A3A3C"}}>No trips yet</p>
                <p style={{margin:"8px 0 0",fontSize:14}}>Tap "+ Trip" to create your first trip</p>
              </div>
            ) : trips.map(trip => {
              const spend  = tripSpend(trip.id);
              const flight = parseFloat(trip.flightCost)||0;
              const accom  = parseFloat(trip.accomCost)||0;
              const budget = parseFloat(trip.budget)||0;
              const grand  = spend + flight + accom;
              const remain = budget - grand;
              const over   = budget>0 && remain<0;
              const cnt    = entries.filter(e=>e.tripId===trip.id).length;
              const hasDates = trip.startDate || trip.endDate;
              return (
                <div key={trip.id} style={{background:"#fff",borderRadius:18,marginBottom:12,boxShadow:"0 1px 6px rgba(0,0,0,0.07)",overflow:"hidden"}}>
                  <div onClick={() => openTrip(trip)} style={{padding:"16px 16px 12px",cursor:"pointer"}}>
                    <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:12}}>
                      <div>
                        <div style={{fontSize:18,fontWeight:700}}>{trip.name}</div>
                        {hasDates && (
                          <div style={{fontSize:12,color:"#8E8E93",marginTop:3}}>
                            📅 {trip.startDate ? fmtDate(trip.startDate) : "—"} → {trip.endDate ? fmtDate(trip.endDate) : "—"}
                          </div>
                        )}
                        {budget>0 && <div style={{fontSize:12,color:"#8E8E93",marginTop:2}}>Budget: {fmt(budget)}</div>}
                      </div>
                      <div style={{position:"relative"}} onClick={e=>e.stopPropagation()}>
                        <button style={S.menuBtn} onClick={()=>setOpenMenu(openMenu===trip.id?null:trip.id)}>⋯</button>
                        {openMenu===trip.id && (
                          <div style={S.dropdown}>
                            <button style={S.dropItem} onClick={()=>{setTripModal({trip});setOpenMenu(null);}}>✏️  Edit Trip</button>
                            <button style={{...S.dropItem,color:"#FF3B30"}} onClick={()=>{setDelConfirm({type:"trip",id:trip.id});setOpenMenu(null);}}>🗑️  Delete Trip</button>
                          </div>
                        )}
                      </div>
                    </div>
                    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
                      <Stat label="✈️ Flight"        value={fmt(flight)} />
                      <Stat label="🏨 Accommodation" value={fmt(accom)} />
                      <Stat label="🛍️ Purchases"    value={fmt(spend)} />
                      <Stat
                        label={budget>0 ? (over?"🔴 Over Budget":"🟢 Remaining") : "💰 Total Spent"}
                        value={budget>0 ? fmt(Math.abs(remain)) : fmt(grand)}
                        color={budget>0 ? (over?"#FF3B30":"#34C759") : "#007AFF"}
                      />
                    </div>
                  </div>
                  <div onClick={()=>openTrip(trip)} style={{padding:"10px 16px",borderTop:"1px solid #F2F2F7",cursor:"pointer",display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                    <span style={{fontSize:13,color:"#8E8E93"}}>{cnt} {cnt===1?"entry":"entries"}</span>
                    <span style={{fontSize:13,color:"#007AFF",fontWeight:500}}>View →</span>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      )}

      {/* ── TRIP DETAIL ── */}
      {view==="trip" && selTrip && (
        <>
          <header style={{background:"#fff",padding:"14px 16px 10px",borderBottom:"1px solid #E5E5EA",position:"sticky",top:0,zIndex:50}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4}}>
              <button onClick={()=>setView("main")} style={{background:"none",border:"none",color:"#007AFF",fontSize:16,cursor:"pointer",fontFamily:"inherit",padding:0,fontWeight:500}}>
                ← Trips
              </button>
              <button onClick={()=>setEntryModal({tripId:selTrip.id})} style={btn("primary")}>+ Entry</button>
            </div>
            <div style={{fontSize:19,fontWeight:700}}>{selTrip.name}</div>
            {(selTrip.startDate || selTrip.endDate) && (
              <div style={{fontSize:12,color:"#8E8E93",marginTop:3}}>
                📅 {selTrip.startDate ? fmtDate(selTrip.startDate) : "—"} → {selTrip.endDate ? fmtDate(selTrip.endDate) : "—"}
              </div>
            )}
            <div style={{marginTop:10,display:"flex",gap:8,alignItems:"center"}}>
              <span style={{fontSize:12,color:"#8E8E93"}}>Sort:</span>
              <SortPill label="Date"   active={sortBy==="date"}   dir={sortDir} onClick={()=>{ sortBy==="date" ? setSortDir(d=>d==="asc"?"desc":"asc") : (setSortBy("date"),setSortDir("desc")); }} />
              <SortPill label="Amount" active={sortBy==="amount"} dir={sortDir} onClick={()=>{ sortBy==="amount" ? setSortDir(d=>d==="asc"?"desc":"asc") : (setSortBy("amount"),setSortDir("desc")); }} />
            </div>
          </header>

          <div style={{padding:"12px 14px"}}>
            {sortedEntries.length===0 ? (
              <div style={{textAlign:"center",padding:"72px 24px",color:"#8E8E93"}}>
                <div style={{fontSize:44,marginBottom:12}}>🧾</div>
                <p style={{margin:0,fontSize:16,fontWeight:600,color:"#3A3A3C"}}>No entries yet</p>
                <p style={{margin:"8px 0 0",fontSize:13}}>Tap "+ Entry" to log your first purchase</p>
              </div>
            ) : sortedEntries.map(entry => (
              <div key={entry.id} style={{background:"#fff",borderRadius:14,marginBottom:8,padding:"12px 14px",boxShadow:"0 1px 4px rgba(0,0,0,0.06)",display:"flex",alignItems:"center",gap:10}}>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:"flex",alignItems:"center",gap:7,marginBottom:5,flexWrap:"wrap"}}>
                    <span style={{fontSize:15,fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:170}}>{entry.shopName}</span>
                    <span style={{fontSize:11,background:CAT_COLOR[entry.category]||"#8E8E93",color:"#fff",borderRadius:6,padding:"2px 8px",fontWeight:600,flexShrink:0}}>
                      {entry.category}
                    </span>
                  </div>
                  <div style={{fontSize:12,color:"#8E8E93"}}>{fmtDate(entry.date)} · {entry.origAmt} {entry.currency}</div>
                </div>
                <div style={{textAlign:"right",flexShrink:0,fontWeight:700,fontSize:16}}>{fmt(entry.amountHKD)}</div>
                <div style={{position:"relative",flexShrink:0}} onClick={e=>e.stopPropagation()}>
                  <button style={S.menuBtn} onClick={()=>setOpenMenu(openMenu===entry.id?null:entry.id)}>⋯</button>
                  {openMenu===entry.id && (
                    <div style={{...S.dropdown,right:0}}>
                      <button style={S.dropItem} onClick={()=>{setEntryModal({entry,tripId:entry.tripId});setOpenMenu(null);}}>✏️  Edit</button>
                      <button style={{...S.dropItem,color:"#FF3B30"}} onClick={()=>{setDelConfirm({type:"entry",id:entry.id});setOpenMenu(null);}}>🗑️  Delete</button>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      {tripModal  && <TripModal  modal={tripModal}  onSave={handleSaveTrip}  onClose={()=>setTripModal(null)} />}
      {entryModal && <EntryModal modal={entryModal} trips={trips} rates={rates} onSave={handleSaveEntry} onClose={()=>setEntryModal(null)} />}
      {delConfirm && (
        <Overlay onClose={()=>setDelConfirm(null)}>
          <h3 style={{margin:"0 0 10px",fontSize:17}}>Are you sure?</h3>
          <p style={{margin:"0 0 22px",fontSize:14,color:"#3A3A3C"}}>
            {delConfirm.type==="trip" ? "This will permanently delete the trip and all its entries." : "This entry will be permanently deleted."}
          </p>
          <div style={{display:"flex",gap:10}}>
            <button onClick={()=>setDelConfirm(null)} style={{...btn("outline"),flex:1,padding:"13px"}}>Cancel</button>
            <button onClick={()=>delConfirm.type==="trip" ? handleDeleteTrip(delConfirm.id) : handleDeleteEntry(delConfirm.id)}
                    style={{...btn("danger"),flex:1,padding:"13px"}}>Delete</button>
          </div>
        </Overlay>
      )}
    </div>
  );
}

// ── Trip Modal ─────────────────────────────────────────────
function TripModal({ modal, onSave, onClose }) {
  const t = modal.trip;
  const [name,      setName]      = useState(t?.name||"");
  const [startDate, setStartDate] = useState(t?.startDate||"");
  const [endDate,   setEndDate]   = useState(t?.endDate||"");
  const [budget,    setBudget]    = useState(t?.budget||"");
  const [flight,    setFlight]    = useState(t?.flightCost||"");
  const [accom,     setAccom]     = useState(t?.accomCost||"");
  const [dateErr,   setDateErr]   = useState("");

  const handleStartDate = v => {
    setStartDate(v);
    if (endDate && v && v > endDate) setDateErr("Start date cannot be after end date");
    else setDateErr("");
  };
  const handleEndDate = v => {
    setEndDate(v);
    if (startDate && v && v < startDate) setDateErr("End date cannot be before start date");
    else setDateErr("");
  };

  const canSave = name.trim() && !dateErr;

  const save = () => {
    if (!canSave) return;
    onSave({ id:t?.id, name:name.trim(), startDate, endDate, budget, flightCost:flight, accomCost:accom });
  };

  return (
    <Overlay onClose={onClose}>
      <h3 style={{margin:"0 0 18px",fontSize:18,fontWeight:700}}>{t ? "Edit Trip" : "New Trip"}</h3>
      <Field label="Trip Name *">
        <input value={name} onChange={e=>setName(e.target.value)} placeholder="e.g. Osaka Spring 2026" style={S.input} />
      </Field>
      <Field label="Trip Dates">
        <div style={{display:"flex",gap:8,alignItems:"center"}}>
          <input type="date" value={startDate} onChange={e=>handleStartDate(e.target.value)}
            style={{...( dateErr ? S.inputErr : S.input ), flex:1}} />
          <span style={{color:"#8E8E93",fontSize:13,flexShrink:0}}>to</span>
          <input type="date" value={endDate} onChange={e=>handleEndDate(e.target.value)}
            min={startDate||undefined}
            style={{...( dateErr ? S.inputErr : S.input ), flex:1}} />
        </div>
        {dateErr && <p style={{margin:"6px 0 0",fontSize:12,color:"#FF3B30"}}>⚠️ {dateErr}</p>}
      </Field>
      <Field label="Budget Limit (HKD)">
        <input type="number" value={budget} onChange={e=>setBudget(e.target.value)} placeholder="0.00" style={S.input} min="0" />
      </Field>
      <Field label="✈️ Flight Tickets (HKD)">
        <input type="number" value={flight} onChange={e=>setFlight(e.target.value)} placeholder="0.00" style={S.input} min="0" />
      </Field>
      <Field label="🏨 Accommodation (HKD)">
        <input type="number" value={accom} onChange={e=>setAccom(e.target.value)} placeholder="0.00" style={S.input} min="0" />
      </Field>
      <button onClick={save} disabled={!canSave}
        style={{...btn("primary"),width:"100%",padding:"14px",marginTop:6,opacity:canSave?1:.5}}>
        {t ? "Save Changes" : "Create Trip"}
      </button>
    </Overlay>
  );
}

// ── Entry Modal ────────────────────────────────────────────
function EntryModal({ modal, trips, rates, onSave, onClose }) {
  const e = modal.entry;
  const [tripId,   setTripId]   = useState(e?.tripId || modal.tripId || trips[0]?.id || "");
  const [shop,     setShop]     = useState(e?.shopName||"");
  const [date,     setDate]     = useState(e?.date || new Date().toISOString().split("T")[0]);
  const [amount,   setAmount]   = useState(e?.origAmt!=null ? String(e.origAmt) : "");
  const [currency, setCurrency] = useState(e?.currency||"JPY");
  const [category, setCategory] = useState(e?.category||"Shopping");
  const [scanning, setScanning] = useState(false);
  const [scanErr,  setScanErr]  = useState("");
  const fileRef = useRef();

  const selectedTrip = trips.find(t => t.id===tripId);
  const dateError    = validateEntryDate(date, selectedTrip);
  const preview      = amount ? (parseFloat(amount)*(rates[currency]||1)).toFixed(2) : null;
  const canSave      = shop.trim() && amount && date && tripId && !dateError;

  const scanReceipt = async file => {
    setScanning(true); setScanErr("");
    try {
      const b64 = await toB64(file);
      const res = await fetch("https://api.anthropic.com/v1/messages", {
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify({
          model:"claude-sonnet-4-20250514",
          max_tokens:500,
          messages:[{ role:"user", content:[
            { type:"image", source:{ type:"base64", media_type: file.type||"image/jpeg", data:b64 }},
            { type:"text",  text:'Extract from this receipt: store/merchant name, date (YYYY-MM-DD), total amount paid (digits only, no symbols), currency code (e.g. JPY USD HKD EUR GBP TWD KRW). Respond ONLY with valid JSON: {"shopName":string|null,"date":string|null,"amount":number|null,"currency":string|null}' }
          ]}]
        })
      });
      const data = await res.json();
      const text = (data.content||[]).map(c=>c.text||"").join("");
      const m = text.match(/\{[\s\S]*?\}/);
      if (m) {
        const p = JSON.parse(m[0]);
        if (p.shopName) setShop(p.shopName);
        if (p.date)     setDate(p.date);
        if (p.amount)   setAmount(String(p.amount));
        if (p.currency && CURRENCIES.includes(p.currency)) setCurrency(p.currency);
      }
    } catch { setScanErr("Couldn't read the receipt — please fill in manually."); }
    setScanning(false);
  };

  const save = () => {
    if (!canSave) return;
    onSave({ id:e?.id, tripId, shopName:shop.trim(), date, amount:parseFloat(amount), origAmt:parseFloat(amount), currency, category });
  };

  return (
    <Overlay onClose={onClose}>
      <h3 style={{margin:"0 0 16px",fontSize:18,fontWeight:700}}>{e ? "Edit Entry" : "Add Entry"}</h3>

      {!e && (
        <div style={{marginBottom:16}}>
          <input type="file" accept="image/*" capture="environment" ref={fileRef} style={{display:"none"}}
            onChange={ev => ev.target.files[0] && scanReceipt(ev.target.files[0])} />
          <button onClick={()=>fileRef.current.click()} disabled={scanning}
            style={{...btn("outline"),width:"100%",padding:"13px",fontSize:15}}>
            {scanning ? "🔍 Scanning…" : "📷 Scan Receipt"}
          </button>
          {scanning && <div style={{height:3,background:"#E5E5EA",borderRadius:2,marginTop:8,overflow:"hidden"}}>
            <div style={{height:"100%",width:"60%",background:"#007AFF",borderRadius:2}} />
          </div>}
          {scanErr && <p style={{color:"#FF3B30",fontSize:12,margin:"8px 0 0",textAlign:"center"}}>{scanErr}</p>}
          <div style={{display:"flex",alignItems:"center",gap:8,margin:"14px 0 0"}}>
            <div style={{flex:1,height:1,background:"#E5E5EA"}} />
            <span style={{fontSize:12,color:"#8E8E93"}}>or fill in manually</span>
            <div style={{flex:1,height:1,background:"#E5E5EA"}} />
          </div>
        </div>
      )}

      {trips.length > 1 && (
        <Field label="Trip">
          <select value={tripId} onChange={ev=>setTripId(ev.target.value)} style={S.input}>
            {trips.map(t=><option key={t.id} value={t.id}>{t.name}</option>)}
          </select>
        </Field>
      )}

      {/* Date range hint */}
      {selectedTrip && (selectedTrip.startDate || selectedTrip.endDate) && (
        <div style={{background:"#F5F5F7",borderRadius:10,padding:"8px 12px",marginBottom:14,fontSize:12,color:"#3A3A3C"}}>
          📅 Trip dates: <strong>{selectedTrip.startDate ? fmtDate(selectedTrip.startDate) : "—"}</strong> → <strong>{selectedTrip.endDate ? fmtDate(selectedTrip.endDate) : "—"}</strong>
        </div>
      )}

      <Field label="Shop / Merchant *">
        <input value={shop} onChange={ev=>setShop(ev.target.value)} placeholder="e.g. Donki Shinjuku" style={S.input} />
      </Field>

      <Field label="Date *">
        <input type="date" value={date} onChange={ev=>setDate(ev.target.value)}
          style={dateError ? S.inputErr : S.input}
          min={selectedTrip?.startDate||undefined}
          max={selectedTrip?.endDate||undefined} />
        {dateError && (
          <div style={{display:"flex",alignItems:"flex-start",gap:6,marginTop:7,background:"#FFF0F0",border:"1px solid #FFD0D0",borderRadius:8,padding:"8px 10px"}}>
            <span style={{fontSize:16,flexShrink:0}}>⚠️</span>
            <span style={{fontSize:13,color:"#CC0000",lineHeight:1.4}}>{dateError}. Please correct the date to save this entry.</span>
          </div>
        )}
      </Field>

      <Field label="Amount *">
        <div style={{display:"flex",gap:8}}>
          <input type="number" value={amount} onChange={ev=>setAmount(ev.target.value)} placeholder="0" style={{...S.input,flex:1}} min="0" />
          <select value={currency} onChange={ev=>setCurrency(ev.target.value)} style={{...S.input,width:88,padding:"10px 8px"}}>
            {CURRENCIES.map(c=><option key={c} value={c}>{c}</option>)}
          </select>
        </div>
        {preview && <div style={{fontSize:12,color:"#007AFF",marginTop:5,fontWeight:500}}>≈ HK${preview}</div>}
      </Field>

      <Field label="Category">
        <div style={{display:"flex",flexWrap:"wrap",gap:8}}>
          {CATEGORIES.map(cat=>(
            <button key={cat} onClick={()=>setCategory(cat)}
              style={{background:category===cat?(CAT_COLOR[cat]||"#8E8E93"):"#F2F2F7",
                      color:category===cat?"#fff":"#3A3A3C",
                      border:"none",borderRadius:9,padding:"7px 13px",fontSize:13,
                      fontWeight:category===cat?700:400,cursor:"pointer",fontFamily:"inherit"}}>
              {cat}
            </button>
          ))}
        </div>
      </Field>

      <button onClick={save} disabled={!canSave}
        style={{...btn("primary"),width:"100%",padding:"14px",marginTop:8,opacity:canSave?1:.5}}>
        {e ? "Save Changes" : "Add Entry"}
      </button>
    </Overlay>
  );
}

// ── Shared UI ──────────────────────────────────────────────
function Overlay({ onClose, children }) {
  return (
    <div style={{position:"fixed",inset:0,background:"rgba(0,0,0,0.38)",zIndex:100,display:"flex",alignItems:"flex-end",justifyContent:"center"}}
         onClick={onClose}>
      <div style={{background:"#fff",borderRadius:"22px 22px 0 0",width:"100%",maxWidth:480,
                   padding:"22px 20px 34px",maxHeight:"90vh",overflowY:"auto"}}
           onClick={e=>e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}
function Field({ label, children }) {
  return (
    <div style={{marginBottom:14}}>
      <label style={{display:"block",fontSize:13,fontWeight:600,color:"#3A3A3C",marginBottom:6}}>{label}</label>
      {children}
    </div>
  );
}
function Stat({ label, value, color="#1D1D1F" }) {
  return (
    <div style={{background:"#F5F5F7",borderRadius:11,padding:"9px 11px"}}>
      <div style={{fontSize:11,color:"#8E8E93",marginBottom:2}}>{label}</div>
      <div style={{fontSize:15,fontWeight:700,color}}>{value}</div>
    </div>
  );
}
function SortPill({ label, active, dir, onClick }) {
  return (
    <button onClick={onClick}
      style={{background:active?"#007AFF":"#E5E5EA",color:active?"#fff":"#3A3A3C",
              border:"none",borderRadius:8,padding:"5px 11px",fontSize:12,
              fontWeight:active?700:500,cursor:"pointer",fontFamily:"inherit"}}>
      {label} {active&&(dir==="asc"?"↑":"↓")}
    </button>
  );
}