/* ========== Root App ========== */
const NAV = [
  { id: 'dashboard', label: 'Dashboard',  icon: 'dashboard'  },
  { id: 'orders',    label: 'Orders',     icon: 'orders'     },
  { id: 'customers', label: 'Customers',  icon: 'customers'  },
  { id: 'invoices',  label: 'Invoices',   icon: 'invoice'    },
  { id: 'finance',   label: 'Finance',    icon: 'finance'    },
  { id: 'templates', label: 'Templates',  icon: 'templates'  },
  { id: 'settings',  label: 'Settings',   icon: 'settings'   },
];

const PAGE_TITLES = {
  dashboard: { title: 'Dashboard',      crumb: 'Overview of all activity' },
  orders:    { title: 'Orders',         crumb: 'Visa applications & translation jobs' },
  customers: { title: 'Customers',      crumb: 'All clients and their history' },
  invoices:  { title: 'Invoices',       crumb: 'Billing and payment status' },
  finance:   { title: 'Income & Expenses', crumb: 'Money in, money out' },
  templates: { title: 'Translation Templates', crumb: 'Reusable document templates' },
  settings:  { title: 'Settings',       crumb: 'Configure your business' },
};

function App() {
  const state = useStore();
  const [page, setPage] = useState('dashboard');
  const [pageParams, setPageParams] = useState({});
  const [searchQ, setSearchQ] = useState('');

  const nav = (page, params = {}) => {
    setPage(page);
    setPageParams(params);
    window.scrollTo(0, 0);
  };

  // Badges
  const activeOrders = state.orders.filter(o => !['delivered','rejected'].includes(o.stage)).length;
  const overdue = state.orders.filter(o => o.dueAt && o.dueAt < Date.now() && !['delivered','approved','rejected'].includes(o.stage)).length;
  const unpaidInv = state.invoices.filter(i => i.status === 'sent' || i.status === 'draft').length;

  const navBadges = {
    orders: activeOrders > 0 ? activeOrders : null,
    invoices: unpaidInv > 0 ? unpaidInv : null,
  };

  // Global search: jump to result
  const handleSearchSelect = (result) => {
    setSearchQ('');
    if (result.kind === 'order') nav('orders', { orderId: result.id });
    if (result.kind === 'customer') nav('customers', { customerId: result.id });
    if (result.kind === 'invoice') nav('invoices', { invoiceId: result.id });
  };

  return (
    <div className="app">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark">
            <PrimeLogo size={36}/>
          </div>
          <div>
            <div className="brand-name">Prime Ops</div>
            <div className="brand-tag">Visa &amp; Translation</div>
          </div>
        </div>

        <nav className="nav">
          {NAV.map(item => (
            <button
              key={item.id}
              className={`nav-item ${page === item.id ? 'active' : ''}`}
              onClick={() => nav(item.id)}
            >
              <Icon name={item.icon} size={16}/>
              <span>{item.label}</span>
              {navBadges[item.id] && <span className="nav-badge">{navBadges[item.id]}</span>}
            </button>
          ))}
        </nav>

        <div className="sidebar-footer">
          {overdue > 0 && (
            <div style={{
              padding: '8px 10px',
              background: 'rgba(200,48,42,0.18)',
              color: '#ffb4b0',
              borderRadius: 7,
              fontSize: 12,
              display: 'flex',
              gap: 8,
              alignItems: 'flex-start'
            }}>
              <Icon name="alert" size={13}/>
              <span><b style={{ color: '#fff' }}>{overdue}</b> overdue order{overdue===1?'':'s'} need attention</span>
            </div>
          )}
          <div className="ops-user">
            <div className="avatar">{(state.user?.email || 'U').slice(0,2).toUpperCase()}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="name" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {state.user?.email || 'Signed in'}
              </div>
              <div className="role">Owner · Vientiane</div>
            </div>
            <button className="btn ghost icon" title="Sign out"
              onClick={() => { if (confirm('Sign out?')) window.PVStore.signOut(); }}
              style={{ color: '#8da3c4' }}>
              <Icon name="arrowRight" size={14}/>
            </button>
          </div>
        </div>
      </aside>

      <main className="main">
        <header className="topbar">
          <div>
            <div className="crumbs">{PAGE_TITLES[page].crumb}</div>
            <h1 className="page-title">{PAGE_TITLES[page].title}</h1>
          </div>
          <div className="topbar-actions">
            <GlobalSearch q={searchQ} setQ={setSearchQ} onSelect={handleSearchSelect}/>
            <button className="btn" onClick={() => nav('orders')} title="Quick: orders">
              <Icon name="bell" size={14}/>
            </button>
          </div>
        </header>

        <div className={`content ${page === 'dashboard' || page === 'orders' ? 'wide' : ''}`}>
          {page === 'dashboard' && <Dashboard onNav={nav}/>}
          {page === 'orders'    && <OrdersView initialOrderId={pageParams.orderId} initialStage={pageParams.filterStage} onNav={nav}/>}
          {page === 'customers' && <CustomersView initialCustomerId={pageParams.customerId} onNav={nav}/>}
          {page === 'invoices'  && <InvoicesView initialInvoiceId={pageParams.invoiceId} onNav={nav}/>}
          {page === 'finance'   && <FinanceView onNav={nav}/>}
          {page === 'templates' && <TemplatesView/>}
          {page === 'settings'  && <SettingsView/>}
        </div>
      </main>
    </div>
  );
}

/* ========== Global search ========== */
function GlobalSearch({ q, setQ, onSelect }) {
  const state = useStore();
  const [focus, setFocus] = useState(false);

  const results = useMemo(() => {
    if (!q || q.length < 2) return [];
    const t = q.toLowerCase();
    const out = [];
    state.orders.forEach(o => {
      const txt = (o.orderNo + ' ' + o.title + ' ' + customerName(o.customerId)).toLowerCase();
      if (txt.includes(t)) out.push({ kind: 'order', id: o.id, label: `${o.orderNo} · ${o.title}`, sub: customerName(o.customerId) });
    });
    state.customers.forEach(c => {
      const txt = (c.name + ' ' + (c.phone||'') + ' ' + (c.email||'')).toLowerCase();
      if (txt.includes(t)) out.push({ kind: 'customer', id: c.id, label: c.name, sub: c.phone || c.email || '' });
    });
    state.invoices.forEach(inv => {
      if (inv.no.toLowerCase().includes(t)) out.push({ kind: 'invoice', id: inv.id, label: inv.no, sub: customerName(inv.customerId) });
    });
    return out.slice(0, 10);
  }, [q, state]);

  return (
    <div className="search" style={{ position: 'relative' }}>
      <Icon name="search" size={14}/>
      <input
        type="text"
        placeholder="Search orders, customers, invoices…"
        value={q}
        onChange={e=>setQ(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setTimeout(() => setFocus(false), 200)}
      />
      {focus && results.length > 0 && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 4,
          background: '#fff', border: '1px solid var(--ink-200)', borderRadius: 8,
          boxShadow: 'var(--shadow)', zIndex: 50, maxHeight: 320, overflow: 'auto'
        }}>
          {results.map((r, i) => (
            <div
              key={i}
              onClick={() => onSelect(r)}
              style={{
                padding: '10px 12px',
                cursor: 'pointer',
                borderBottom: i < results.length-1 ? '1px solid var(--ink-100)' : 'none',
                display: 'flex', alignItems: 'center', gap: 10
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--ink-50)'}
              onMouseLeave={(e) => e.currentTarget.style.background = '#fff'}
            >
              <Icon name={r.kind === 'order' ? 'orders' : r.kind === 'customer' ? 'customers' : 'invoice'} size={14} color="var(--ink-500)"/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.label}</div>
                {r.sub && <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>{r.sub}</div>}
              </div>
              <span className="badge slate" style={{ fontSize: 10 }}>{r.kind}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <AuthGate><App/></AuthGate>
);