// App shell - sidebar, topbar, trade switcher, route router

function AppShell({ state, setState, prospect }) {
  const trade = TRADES[state.tradeId];
  const jobs = JOBS_BY_TRADE[state.tradeId];

  const nav = [
    { id: 'pipeline', label: 'Pipeline', icon: 'dash', group: 'main' },
    { id: 'jobs', label: 'Jobs', icon: 'list', group: 'main', badge: jobs.length },
    { id: 'quotes', label: 'Quotes', icon: 'quote', group: 'main', badge: 4 },
    { id: 'invoices', label: 'Invoices', icon: 'receipt', group: 'main', badge: 2 },
    { id: 'customers', label: 'Customers', icon: 'users', group: 'main' },
    { id: 'schedule', label: 'Schedule', icon: 'calendar', group: 'main' },
    { id: 'reports', label: 'Reports', icon: 'bolt', group: 'main' },
    { id: 'field-tech', label: 'Field tech (mobile)', icon: 'phone', group: 'aux' },
    { id: 'customer-approval', label: 'Customer approval view', icon: 'external', group: 'aux' },
    { id: 'onboarding', label: 'Onboarding', icon: 'sparkles', group: 'aux' },
    { id: 'settings', label: 'Settings', icon: 'settings', group: 'aux' },
    { id: 'capabilities', label: 'Capabilities', icon: 'shield', group: 'aux' },
  ];

  const goTo = (id) => setState(s => ({ ...s, screen: id }));

  return (
    <div style={{
      minHeight: '100vh', background: 'var(--paper)', color: 'var(--ink)',
      display: 'grid', gridTemplateColumns: '232px 1fr',
    }}>
      {/* Sidebar */}
      <aside style={{
        borderRight: '1px solid var(--border)', background: 'var(--paper)',
        display: 'flex', flexDirection: 'column',
        position: 'sticky', top: 0, height: '100vh',
      }}>
        <div style={{ padding: '14px 16px 12px', borderBottom: '1px solid var(--border)' }}>
          <button onClick={() => setState(s => ({ ...s, screen: 'landing' }))} style={{
            display: 'flex', alignItems: 'center', gap: 10, width: '100%',
            background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
          }}>
            <div style={{ width: 26, height: 26, background: 'var(--ink)', borderRadius: 6, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <div style={{ width: 9, height: 9, border: '2px solid var(--paper)', borderRadius: 2, transform: 'rotate(45deg)' }} />
            </div>
            <div style={{ textAlign: 'left', flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: -0.2 }}>{BUSINESS.name}</div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-50)', fontFamily: 'var(--mono)' }}>ABN {BUSINESS.abn}</div>
            </div>
            <Icon name="chevron-down" size={13} style={{ color: 'var(--ink-50)' }} />
          </button>
        </div>

        {/* Trade switcher - only for Ankith's demo-mode (?tweaks=1). A real
            customer is already on their own trade via ?for=<slug>; showing
            17 other trades as switchable options would be noise for them. */}
        {new URLSearchParams(window.location.search).get('tweaks') === '1' && (
          <div style={{ padding: '12px 12px 6px' }}>
            <div style={{ fontSize: 10, color: 'var(--ink-50)', fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: 0.6, padding: '0 4px 6px' }}>
              Viewing trade
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
              {Object.values(TRADES).map(t => (
                <TradeChip key={t.id} trade={t} selected={t.id === state.tradeId} onClick={() => setState(s => ({ ...s, tradeId: t.id }))} />
              ))}
            </div>
          </div>
        )}

        {/* Nav */}
        <nav style={{ padding: '16px 8px 8px', flex: 1, overflowY: 'auto' }}>
          <div style={{ fontSize: 10, color: 'var(--ink-50)', fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: 0.6, padding: '0 8px 6px' }}>
            Workflow
          </div>
          {nav.filter(n => n.group === 'main').map(n => (
            <NavItem key={n.id} item={n} active={state.screen === n.id || (n.id === 'pipeline' && state.screen === 'pipeline')} onClick={() => goTo(n.id)} />
          ))}

          <div style={{ fontSize: 10, color: 'var(--ink-50)', fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: 0.6, padding: '20px 8px 6px' }}>
            Tour
          </div>
          {nav.filter(n => n.group === 'aux').map(n => (
            <NavItem key={n.id} item={n} active={state.screen === n.id} onClick={() => goTo(n.id)} />
          ))}
        </nav>

        {/* Footer */}
        <div style={{ padding: '10px 12px', borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <Avatar initials={(() => {
            const n = (BUSINESS.admin || 'Admin').trim().split(/\s+/);
            return (n.length >= 2 ? n[0][0] + n[1][0] : (n[0][0] + (n[0][1] || ''))).toUpperCase();
          })()} size={28} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 500 }}>{BUSINESS.admin}</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-50)', fontFamily: 'var(--mono)' }}>admin</div>
          </div>
          <button onClick={() => setState(s => ({ ...s, screen: 'landing' }))} title="Back to landing" style={{
            padding: 5, borderRadius: 6, border: '1px solid var(--border)', background: 'var(--surface)',
            cursor: 'pointer', color: 'var(--ink-60)',
          }}><Icon name="external" size={13} /></button>
        </div>
      </aside>

      {/* Guided tour - first-visit coach-marks for cold-email visitors */}
      <Tour state={state} setState={setState} prospect={prospect} />

      {/* Main */}
      <main style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <TopBar state={state} setState={setState} prospect={prospect} />
        <div style={{ flex: 1, minHeight: 0 }}>
          <ScreenRouter state={state} setState={setState} />
        </div>
      </main>
    </div>
  );
}

function NavItem({ item, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick}
      data-tour={`nav-${item.id}`}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 10, width: '100%',
        padding: '7px 9px', borderRadius: 7, border: 'none',
        background: active ? 'var(--surface-2)' : (hover ? 'var(--surface-2)' : 'transparent'),
        color: active ? 'var(--ink)' : 'var(--ink-70)',
        fontSize: 13, fontFamily: 'var(--sans)', fontWeight: active ? 500 : 400,
        cursor: 'pointer', textAlign: 'left',
        letterSpacing: -0.1, position: 'relative',
      }}>
      {active && <div style={{ position: 'absolute', left: -8, top: 8, bottom: 8, width: 2, background: 'var(--accent)', borderRadius: 2 }} />}
      <Icon name={item.icon} size={14} style={{ color: active ? 'var(--ink)' : 'var(--ink-50)' }} />
      <span style={{ flex: 1 }}>{item.label}</span>
      {item.badge != null && (
        <span style={{
          fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--ink-50)',
          padding: '1px 5px', borderRadius: 4, background: active ? 'var(--surface)' : 'transparent',
          border: active ? '1px solid var(--border)' : 'none',
        }}>{item.badge}</span>
      )}
    </button>
  );
}

function TopBar({ state, setState, prospect }) {
  const trade = TRADES[state.tradeId];
  const crumb = ({
    'pipeline': 'Pipeline',
    'jobs': 'Jobs',
    'quotes': 'Quotes',
    'invoices': 'Invoices',
    'customers': 'Customers',
    'schedule': 'Schedule',
    'reports': 'Reports',
    'job-detail': `Job detail · ${FOCUS_JOB[state.tradeId].id}`,
    'ai-quote': `AI quote · ${FOCUS_JOB[state.tradeId].id}`,
    'invoice': `Invoice · ${FOCUS_JOB[state.tradeId].id}`,
    'field-tech': 'Field tech · mobile view',
    'customer-approval': 'Customer approval · shared link',
    'onboarding': 'Onboarding',
    'settings': 'Settings',
    'capabilities': 'What I can build',
  })[state.screen] || 'TradesFlow';

  return (
    <div style={{
      padding: '10px 22px', borderBottom: '1px solid var(--border)',
      display: 'flex', alignItems: 'center', gap: 14, height: 52, flexShrink: 0,
      background: 'var(--paper)', position: 'sticky', top: 0, zIndex: 20,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13 }}>
        <span style={{ color: 'var(--ink-50)', fontFamily: 'var(--mono)', fontSize: 11 }}>{trade.longLabel} /</span>
        <span style={{ fontWeight: 500, letterSpacing: -0.1 }}>{crumb}</span>
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 7, border: '1px solid var(--border)', background: 'var(--surface)', minWidth: 220 }}>
        <Icon name="search" size={13} style={{ color: 'var(--ink-50)' }} />
        <input placeholder="Search jobs, customers…" style={{
          border: 'none', background: 'transparent', outline: 'none', flex: 1,
          fontSize: 12.5, fontFamily: 'var(--sans)', color: 'var(--ink)',
        }} />
        <KeyCap>⌘K</KeyCap>
      </div>
      <Btn variant="ghost" size="sm" icon="bell" title="3 notifications" />
      <Btn variant="primary" size="sm" icon="plus" onClick={() => setState(s => ({ ...s, screen: 'ai-quote' }))}>New job</Btn>
    </div>
  );
}

function ScreenRouter({ state, setState }) {
  const go = (screen) => setState(s => ({ ...s, screen }));
  switch (state.screen) {
    case 'pipeline': return <Pipeline state={state} setState={setState} onOpenJob={() => go('job-detail')} onOpenAI={() => go('ai-quote')} />;
    case 'jobs': return <Pipeline state={state} setState={setState} onOpenJob={() => go('job-detail')} onOpenAI={() => go('ai-quote')} view="list" />;
    case 'quotes': return <QuotesList state={state} onOpen={() => go('ai-quote')} />;
    case 'invoices': return <InvoicesList state={state} onOpen={() => go('invoice')} />;
    case 'customers': return <CustomersList state={state} />;
    case 'schedule': return <Schedule state={state} />;
    case 'reports': return <Reports state={state} />;
    case 'job-detail': return <JobDetail state={state} setState={setState} />;
    case 'ai-quote': return <AIQuote state={state} setState={setState} />;
    case 'invoice': return <InvoiceView state={state} setState={setState} />;
    case 'field-tech': return <FieldTechMobile state={state} setState={setState} />;
    case 'customer-approval': return <CustomerApproval state={state} setState={setState} />;
    case 'onboarding': return <Onboarding state={state} setState={setState} />;
    case 'settings': return <Settings state={state} setState={setState} />;
    case 'capabilities': return <Capabilities state={state} setState={setState} />;
    default: return <Pipeline state={state} setState={setState} onOpenJob={() => go('job-detail')} onOpenAI={() => go('ai-quote')} />;
  }
}

Object.assign(window, { AppShell });