/* Vooice — Contacts / Memory ("what Vooice remembers about you and yours") */

function ContactsMemory({ width = 1320, height = 880, onNavigate }) {
  const go = (k) => onNavigate && onNavigate(k);
  return (
    <div className="vc-root" style={{
      width, minHeight: height, background: VC_TOKENS.paper, color: VC_TOKENS.ink,
      display:'grid', gridTemplateColumns: 'minmax(240px, 320px) minmax(0, 1fr) minmax(280px, 380px)', gridTemplateRows: 'auto 1fr',
      borderTop: `1px solid ${VC_TOKENS.line}`,
    }}>
      {/* Top nav — unified AppHeader */}
      <AppHeader
        onNavigate={onNavigate}
        current="contacts-memory"
        crumbs={[{ label: 'MEMORY' }]}
      />

      {/* Contacts list */}
      <aside style={{ borderRight: `1px solid ${VC_TOKENS.line}`, background: VC_TOKENS.paper2, padding: 24, display:'flex', flexDirection:'column', gap: 16 }}>
        <div>
          <Mono>184 PEOPLE</Mono>
          <h2 style={{ fontFamily: "'Inter Tight', sans-serif", fontSize: 26, fontWeight: 700, letterSpacing:'-0.025em', margin: '6px 0 0' }}>
            Contacts
          </h2>
        </div>
        <div style={{
          padding: '10px 12px', border:`1px solid ${VC_TOKENS.line}`,
          background: VC_TOKENS.paper, fontSize: 13, color: VC_TOKENS.ink3,
          display:'flex', justifyContent:'space-between',
        }}>
          <span>Search names, tags, last call…</span>
          <Mono>⌘K</Mono>
        </div>
        <div style={{ overflow:'auto', display:'flex', flexDirection:'column', gap: 2 }}>
          {[
            { n: 'Lina Ortega', meta: '3d ago · lease talk', tags: ['neighbor','wed afternoons'] , active: true},
            { n: 'David Kim', meta: '5d ago · Tues prep', tags: ['work','client'] },
            { n: 'Mom (Helen Reyes)', meta: 'this morning', tags: ['family'] },
            { n: 'Marcus Wu', meta: 'just now · live', tags: ['barber'] , live: true },
            { n: 'Dr. Han', meta: 'Apr 8 · scheduled physical', tags: ['health'] },
            { n: 'Mike Patel', meta: '1h ago', tags: ['friend'] },
            { n: 'Sarah Chen', meta: 'Apr 5', tags: ['accountant'] },
            { n: 'The Plumber (Joe)', meta: 'Mar 28', tags: ['vendor','urgent'] },
            { n: 'Casey Liu', meta: 'Mar 22', tags: ['therapist'] },
          ].map((p, i) => (
            <div key={i} style={{
              padding: '12px 10px', display:'grid', gridTemplateColumns:'36px 1fr auto',
              gap: 10, alignItems:'center', cursor: 'pointer',
              background: p.active ? VC_TOKENS.ink : 'transparent',
              color: p.active ? VC_TOKENS.paper : VC_TOKENS.ink,
              borderLeft: p.active ? `2px solid ${VC_TOKENS.signal}` : '2px solid transparent',
            }}>
              <Avatar name={p.n} size={32} bg={p.active ? VC_TOKENS.signal : VC_TOKENS.ink2} />
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, display:'flex', gap: 6, alignItems:'center' }}>
                  {p.n}
                  {p.live && <RingingRing size={8} color={VC_TOKENS.signal} />}
                </div>
                <Mono color={p.active ? VC_TOKENS.paper : VC_TOKENS.ink3} size={10}>{p.meta}</Mono>
              </div>
            </div>
          ))}
        </div>
      </aside>

      {/* Main — index card */}
      <main style={{ padding: 40, overflow:'auto', display:'flex', flexDirection:'column', gap: 24 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
          <div>
            <Mono>NEIGHBOR · WED AFTERNOONS · LEASE TALK</Mono>
            <h1 style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 64, fontWeight: 700, letterSpacing:'-0.035em', lineHeight: 1, margin:'12px 0 0' }}>
              Lina Ortega
            </h1>
            <div style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 22, color: VC_TOKENS.ink2, marginTop: 8 }}>
              "Apartment 4B. Husband Pete. Daughter Eli started kindergarten."
            </div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap: 6, alignItems:'flex-end' }}>
            <Stamp>SINCE FEB 2025</Stamp>
          </div>
        </div>

        {/* The "memory map" — physical index card metaphor */}
        <div style={{
          background: VC_TOKENS.paper, border: `1px solid ${VC_TOKENS.line}`,
          padding: 0, position:'relative',
          backgroundImage: `repeating-linear-gradient(to bottom, transparent 0 30px, ${VC_TOKENS.lineSoft} 30px 31px)`,
          backgroundPosition: '0 16px',
        }}>
          <div style={{
            position:'absolute', left: 80, top: 0, bottom: 0, width: 1, background: VC_TOKENS.signalSoft,
          }} />
          <div style={{ padding: '20px 24px', borderBottom: `1px solid ${VC_TOKENS.lineSoft}`, display:'flex', gap: 24 }}>
            <Mono>WHAT VOOICE KNOWS</Mono>
            <Mono color={VC_TOKENS.ink3}>9 facts · 4 sources · last verified 3 days ago</Mono>
          </div>
          <div style={{ padding: 24, display:'grid', gridTemplateColumns:'1fr 1fr', gap: '6px 24px', fontSize: 15, lineHeight: 1.9 }}>
            <Fact label="Address"     value="Apartment 4B (next door)" />
            <Fact label="Husband"      value="Pete Ortega" />
            <Fact label="Daughter"    value="Eli, 5 (kindergarten)" />
            <Fact label="Cat"          value="Pickle" />
            <Fact label="Best to call" value="Wednesday afternoons" highlight />
            <Fact label="Avoid"        value="Mornings before 9, Sun" />
            <Fact label="Topic right now" value="Building's lease renewal — frustrated" highlight />
            <Fact label="Last seen"    value="Hallway, Apr 5 — chatted re: bike rack" />
            <Fact label="Owes you"     value="$28 · Doordash split, Mar" />
          </div>
        </div>

        {/* Conversation history */}
        <div>
          <Mono>RECENT THREADS</Mono>
          <div style={{ marginTop: 12, display:'flex', flexDirection:'column' }}>
            {[
              { c: 'Phone',    t: '3d ago', s: 'You called — talked about lease renewal, 12 min.' },
              { c: 'Telegram', t: '5d ago', s: '"Quick — can you watch Pickle this weekend?" Vooice replied yes (your calendar was clear).' },
              { c: 'Phone',    t: '2w ago', s: 'She called you — bike rack proposal for the building.' },
            ].map((t, i) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'80px 80px 1fr', gap: 16,
                padding: '14px 0', borderBottom: `1px solid ${VC_TOKENS.lineSoft}`, alignItems:'baseline',
              }}>
                <Mono>{t.c.toUpperCase()}</Mono>
                <Mono color={VC_TOKENS.ink3}>{t.t}</Mono>
                <span style={{ fontSize: 14 }}>{t.s}</span>
              </div>
            ))}
          </div>
        </div>
      </main>

      {/* Right rail */}
      <aside style={{
        background: VC_TOKENS.paper2, borderLeft: `1px solid ${VC_TOKENS.line}`,
        padding: 28, overflow:'auto', display:'flex', flexDirection:'column', gap: 22,
      }}>
        <div>
          <Mono>QUICK ACTIONS</Mono>
          <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 10 }}>
            <SidebarBtn label="Call Lina" sub="Vooice will dial out" tone="signal" />
            <SidebarBtn label="Send message" sub="Telegram preferred" />
            <SidebarBtn label="Schedule a chat" sub="Wed afternoons work best" />
          </div>
        </div>

        <div>
          <Mono>FIELDS</Mono>
          <FieldRow label="Phone">+1 (415) 555‑0205</FieldRow>
          <FieldRow label="Email">lina@orteg.as</FieldRow>
          <FieldRow label="Telegram">@linaort</FieldRow>
          <FieldRow label="Relationship">Neighbor · friendly</FieldRow>
        </div>

        <div>
          <Mono>FROM JORDAN'S NOTE</Mono>
          <div style={{
            marginTop: 10, padding: 14, background: VC_TOKENS.paper,
            border: `1px solid ${VC_TOKENS.lineSoft}`,
            fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 16, lineHeight: 1.5,
          }}>
            "If she calls upset about the building, just commit to a real conversation that night. Don't try to solve it on the phone."
            <div style={{ marginTop: 8 }}>
              <Mono color={VC_TOKENS.ink3} size={9}>ADDED FEB 18 · APPLIED 3×</Mono>
            </div>
          </div>
        </div>
      </aside>
    </div>
  );
}

function Fact({ label, value, highlight }) {
  return (
    <div style={{ display:'flex', gap: 16, paddingLeft: 4 }}>
      <span style={{
        fontFamily:"'JetBrains Mono', monospace", fontSize: 11,
        textTransform:'uppercase', letterSpacing:'.08em',
        color: VC_TOKENS.ink3, width: 56, flexShrink: 0, paddingTop: 2,
      }}>{label}</span>
      <span style={{
        fontWeight: 500,
        background: highlight ? VC_TOKENS.butter : 'transparent',
        padding: highlight ? '0 4px' : 0,
      }}>{value}</span>
    </div>
  );
}

function SidebarBtn({ label, sub, tone }) {
  const isSig = tone === 'signal';
  return (
    <button style={{
      textAlign:'left', cursor:'pointer',
      padding: '12px 14px',
      background: isSig ? VC_TOKENS.signal : VC_TOKENS.paper,
      color: isSig ? VC_TOKENS.paper : VC_TOKENS.ink,
      border: `1px solid ${isSig ? VC_TOKENS.signal : VC_TOKENS.line}`,
    }}>
      <div style={{ fontWeight:600, fontSize: 14 }}>{label}</div>
      <div style={{ fontSize: 12, opacity: 0.75, marginTop: 2 }}>{sub}</div>
    </button>
  );
}

window.ContactsMemory = ContactsMemory;