// Otto App · Account detail screen (Northwind)

const AccountScreen = () => {
  const acc = accountById('northwind');
  const contacts = CONTACTS.northwind;
  const accDeals = DEALS.filter(d => d.account === 'northwind');
  const accActs = ACTIVITIES.filter(a => a.account === 'northwind');
  const [tab, setTab] = React.useState('Overview');
  const owner = userById(acc.owner);

  return (
    <>
      <div style={{ background: 'var(--paper)', borderBottom: '1px solid var(--line)', padding: '20px 28px 0' }}>
        {/* Eyebrow row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: 12, color: 'var(--fg-muted)' }}>
          <span>Accounts</span>
          <Icon name="chevron" size={11} color="var(--fg-soft)" />
          <span style={{ color: 'var(--fg)' }}>{acc.name}</span>
        </div>

        {/* Identity row */}
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24 }}>
          <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
            <div style={{
              width: 56, height: 56, borderRadius: 'var(--r-md)',
              background: 'var(--fg)', color: '#FFF',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--t-display)', fontSize: 26, fontWeight: 700,
            }}>NW</div>
            <div>
              <h1 style={{ margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: -0.4 }}>{acc.name}</h1>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 6, fontSize: 13, color: 'var(--fg-muted)' }}>
                <span>{acc.industry}</span>
                <span>·</span>
                <span>{acc.employees} employees</span>
                <span>·</span>
                <span>{acc.location}</span>
                <span>·</span>
                <a href={`https://${acc.domain}`} style={{ color: 'var(--sky)', textDecoration: 'none' }}>{acc.domain}</a>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 12, alignItems: 'center' }}>
                <Pill color="#FFF" bg="var(--stage-won)">Customer · Active</Pill>
                <Pill>Tier 2</Pill>
                <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>Owner</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Avatar initials={owner.initials} color={owner.color} size={20} />
                  <span style={{ fontSize: 12 }}>{owner.name}</span>
                </div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn leadingIcon="plus">Log activity</Btn>
            <Btn>Compose</Btn>
            <Btn kind="primary" leadingIcon="sparkle">Ask Otto about this account</Btn>
          </div>
        </div>

        {/* Stat strip */}
        <div style={{ display: 'flex', gap: 32, marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--line-soft)' }}>
          <MiniStat label="ARR" value={`$${(acc.arr/1000).toFixed(0)}K`} />
          <MiniStat label="Open deals" value={accDeals.length} sub="2 advancing" />
          <MiniStat label="Activities · 30d" value="42" sub="28 by Otto" />
          <MiniStat label="Health" value={<HealthDot health={acc.health} />} sub="Strong engagement" />
          <MiniStat label="Last touch" value={acc.lastTouch} sub="Inbound from Carla" />
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 0, marginTop: 16 }}>
          {['Overview', 'Activity', 'Deals', 'Contacts', 'Threads', 'Files'].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{
              padding: '10px 14px', background: 'transparent', border: 'none',
              borderBottom: `2px solid ${tab === t ? 'var(--fg)' : 'transparent'}`,
              color: tab === t ? 'var(--fg)' : 'var(--fg-muted)',
              fontSize: 13, fontWeight: tab === t ? 500 : 400, marginBottom: -1,
            }}>{t}</button>
          ))}
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: 28, display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 14, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card title="Otto summary" sub="Auto-generated from activity" accent="var(--signal)">
            <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--fg)' }}>
              Northwind is a 240-person industrial distributor that signed verbal commitment on
              Q-2041 ($51K ARR) on Tuesday's call. <strong>Carla Reyes</strong> (VP Ops) is the
              economic buyer; <strong>Sam Patel</strong> drove the discovery. Inventory module is
              deferred to Phase 2 (Q3 trigger). Implementation kickoff scheduled pending signature
              — <strong>contract is the only blocker</strong>.
              <div style={{ marginTop: 10, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <Pill color="var(--sky)" bg="var(--sky-soft)">CRM · Sales · Service</Pill>
                <Pill color="var(--signal)" bg="var(--signal-soft)">Phase 2: Inventory</Pill>
                <Pill color="var(--stage-won)" bg="rgba(31,138,91,0.10)">High intent</Pill>
              </div>
            </div>
          </Card>

          <Card title={`Activity · ${accActs.length}`} sub="Calls, emails, tasks, notes" action={<Btn>Filter</Btn>}>
            <ActivityRows activities={accActs} />
          </Card>

          <Card title={`Deals · ${accDeals.length}`} action={<Btn leadingIcon="plus">New deal</Btn>}>
            <DealRows deals={accDeals} />
          </Card>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card title={`Contacts · ${contacts.length}`} action={<Btn leadingIcon="plus">Add</Btn>}>
            <div style={{ margin: -16 }}>
              {contacts.map((c, i) => (
                <div key={c.id} style={{
                  padding: '12px 16px', display: 'flex', gap: 12, alignItems: 'flex-start',
                  borderTop: i === 0 ? 'none' : '1px solid var(--line-soft)',
                }}>
                  <Avatar initials={c.initials} color="#6B47E0" size={32} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                      <span style={{ fontSize: 13, fontWeight: 500 }}>{c.name}</span>
                      {c.primary && <Pill color="var(--sky)" bg="var(--sky-soft)">Primary</Pill>}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>{c.title}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-soft)', marginTop: 3, fontFamily: 'var(--t-mono)' }}>
                      {c.email}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card title="Account at a glance">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 12px', fontSize: 12 }}>
              <Field label="Industry" value={acc.industry} />
              <Field label="Employees" value={acc.employees} />
              <Field label="HQ" value={acc.location} />
              <Field label="Domain" value={acc.domain} />
              <Field label="Territory" value={acc.territory} />
              <Field label="Tenant" value="ottokap.com" mono />
              <Field label="Created" value="Mar 14, 2025" />
              <Field label="Source" value="Inbound · website" />
            </div>
          </Card>

          <Card title="Endpoints" sub="Channels Otto monitors for this account">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 12 }}>
              <EndpointRow label="quotes@northwind-supply.com" kind="Shared inbox" />
              <EndpointRow label="orders@northwind-supply.com" kind="Shared inbox" />
              <EndpointRow label="(216) 555-0100" kind="Phone line" />
              <EndpointRow label="MS Teams · #sales" kind="Channel" />
              <EndpointRow label="3 SMS short codes" kind="SMS" />
            </div>
          </Card>
        </div>
      </div>
    </>
  );
};

const MiniStat = ({ label, value, sub }) => (
  <div>
    <div className="eyebrow">{label}</div>
    <div style={{ fontSize: 18, fontWeight: 600, marginTop: 4, letterSpacing: -0.3 }}>{value}</div>
    {sub && <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>{sub}</div>}
  </div>
);

const HealthDot = ({ health }) => {
  const c = { good: 'var(--stage-won)', attention: 'var(--signal)', risk: 'var(--stage-lost)' }[health];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 500 }}>
      <span style={{ width: 8, height: 8, borderRadius: 4, background: c }} />
      {health === 'good' ? 'Healthy' : health === 'attention' ? 'Attention' : 'At risk'}
    </span>
  );
};

const Field = ({ label, value, mono }) => (
  <div>
    <div className="eyebrow" style={{ fontSize: 9 }}>{label}</div>
    <div style={{ marginTop: 3, fontSize: 12.5, fontFamily: mono ? 'var(--t-mono)' : 'inherit' }}>{value}</div>
  </div>
);

const EndpointRow = ({ label, kind }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 8px', background: 'var(--bg)', borderRadius: 'var(--r-xs)' }}>
    <span style={{ fontFamily: 'var(--t-mono)', fontSize: 11.5 }}>{label}</span>
    <span style={{ color: 'var(--fg-muted)', fontSize: 11 }}>{kind}</span>
  </div>
);

Object.assign(window, { AccountScreen });