// dossier.jsx — Детальное досье агента

function Dossier({ navigate, agentId }) {
  const agent = AGENTS.find((a) => a.id === agentId) || AGENTS[0];
  const related = AGENTS.filter((a) => a.id !== agent.id).slice(0, 3);

  return (
    <div className="page">
      {/* Breadcrumb */}
      <div style={{ padding: '24px 0 0', borderBottom: '1px solid var(--rule)' }}>
        <div className="container-wide">
          <div className="mono" style={{ fontSize: 12, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase', paddingBottom: 18 }}>
            <a onClick={() => navigate('catalog')} style={{ cursor: 'pointer' }}>Картотека</a>
            <span style={{ margin: '0 8px' }}>/</span>
            <a onClick={() => navigate('catalog')} style={{ cursor: 'pointer' }}>{agent.speciality}</a>
            <span style={{ margin: '0 8px' }}>/</span>
            <span style={{ color: 'var(--ink)' }}>Дело № {agent.no}</span>
          </div>
        </div>
      </div>

      {/* Header — like a personnel file */}
      <DossierHeader agent={agent} navigate={navigate} />

      {/* Body — multi-section document */}
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 64, padding: '48px 32px' }}>
        <main>
          <Section no="I" title="Компетенции и образцы работ">
            <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.65, marginBottom: 28 }}>
              {agent.summary}
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 32 }}>
              {agent.skills.map((s, i) => (
                <div key={i} style={{
                  display: 'flex',
                  gap: 12,
                  padding: '14px 16px',
                  background: 'var(--paper-2)',
                  border: '1px solid var(--rule)',
                  borderRadius: 4,
                  fontSize: 14,
                  alignItems: 'flex-start',
                }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--forest)', fontWeight: 600, flexShrink: 0, marginTop: 2 }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span style={{ color: 'var(--ink)' }}>{s}</span>
                </div>
              ))}
            </div>
          </Section>

          <Section no="II" title="Образцы выполненных дел">
            <div style={{ borderTop: '2px solid var(--ink)' }}>
              {agent.samples.map((s, i) => (
                <SampleRow key={i} sample={s} agent={agent} />
              ))}
            </div>
          </Section>

          <Section no="III" title="Демонстрация работы">
            <DemoChat agent={agent} />
          </Section>

          <Section no="IV" title="Кому подойдёт">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 0, borderTop: '1px solid var(--rule)', borderLeft: '1px solid var(--rule)' }}>
              {agent.audience.map((a, i) => (
                <div key={i} style={{ padding: 24, borderRight: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', marginBottom: 6, textTransform: 'uppercase' }}>
                    Портрет № {String(i + 1).padStart(2, '0')}
                  </div>
                  <div className="serif" style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 8 }}>
                    {a.who}
                  </div>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                    {a.why}
                  </div>
                </div>
              ))}
            </div>
          </Section>

          <Section no="V" title="Технические условия">
            <div className="grid grid-2">
              <TechRow label="Модель" value={agent.model} />
              <TechRow label="Безопасность" value={agent.safety} />
              <TechRow label="Лимит запросов" value={agent.requests} />
              <TechRow label="Каналы доступа" value={agent.integrations.join(' · ')} />
              <TechRow label="Форматы" value="PDF, DOCX, XLSX, CSV, PNG, MP3, WAV" />
              <TechRow label="Языки" value="Русский (основной), английский" />
            </div>
          </Section>
        </main>

        {/* Sticky sidebar with price + actions */}
        <aside style={{ position: 'sticky', top: 92, alignSelf: 'flex-start' }}>
          <PriceCard agent={agent} navigate={navigate} />
        </aside>
      </div>

      {/* Related */}
      <section style={{ padding: '64px 0', borderTop: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
        <div className="container-wide">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Часто берут вместе</div>
          <h3 className="serif" style={{ fontSize: 32, marginBottom: 28, letterSpacing: '-0.015em' }}>
            Другие специалисты бюро
          </h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
            {related.map((a) => (
              <div
                key={a.id}
                onClick={() => navigate('dossier', { id: a.id })}
                style={{
                  background: 'var(--paper)',
                  border: '1px solid var(--rule)',
                  padding: 20,
                  cursor: 'pointer',
                  transition: 'border-color 180ms, transform 180ms',
                  display: 'flex',
                  gap: 16,
                  alignItems: 'center',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ink)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--rule)'; e.currentTarget.style.transform = 'none'; }}
              >
                <Monogram agent={a} size={48} />
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>
                    № {a.no}
                  </div>
                  <div className="serif" style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>
                    AI-{a.title}
                  </div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>
                    от {rub(a.price)}/мес
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function DossierHeader({ agent, navigate }) {
  return (
    <section style={{ background: 'var(--paper-2)', borderBottom: '1px solid var(--rule)', padding: '40px 0 48px' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 20 }}>
            Личное дело № {agent.no} / {agent.speciality}
          </div>
          <h1 className="serif" style={{ fontSize: 'clamp(48px, 6vw, 80px)', lineHeight: 0.95, letterSpacing: '-0.02em', marginBottom: 20 }}>
            AI-{agent.title}
          </h1>
          <p style={{ fontSize: 20, color: 'var(--ink-2)', lineHeight: 1.5, maxWidth: 540, marginBottom: 28 }}>
            {agent.headline}
          </p>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Tag color="var(--forest)">{agent.speciality}</Tag>
            <Tag>{agent.grade} специалист</Tag>
            <Tag color="var(--forest)">152-ФЗ</Tag>
            <Tag>Серверы РФ</Tag>
          </div>
        </div>

        {/* Right: a big monogram + meta */}
        <div style={{ position: 'relative', textAlign: 'right' }}>
          {/* big card */}
          <div style={{
            background: 'var(--paper)',
            border: '1px solid var(--rule)',
            padding: 32,
            display: 'inline-block',
            textAlign: 'left',
            minWidth: 360,
            position: 'relative',
          }}>
            <span className="stamp" style={{ position: 'absolute', top: -16, right: -16, color: 'var(--forest)', background: 'var(--paper)' }}>
              открыт для дел
            </span>
            <Monogram agent={agent} size={120} />
            <div className="rule-dotted" style={{ margin: '24px 0 18px' }} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, fontSize: 13 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
                  В картотеке с
                </div>
                <div className="mono" style={{ fontSize: 15, marginTop: 2 }}>03.2026</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
                  Дел в работе
                </div>
                <div className="mono" style={{ fontSize: 15, marginTop: 2 }}>1 247</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
                  Завершено
                </div>
                <div className="mono" style={{ fontSize: 15, marginTop: 2 }}>14 312</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
                  Среднее время
                </div>
                <div className="mono" style={{ fontSize: 15, marginTop: 2 }}>≈ 42 сек.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Section({ no, title, children }) {
  return (
    <section style={{ marginBottom: 64 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
        <span className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
          Раздел № {no}
        </span>
        <span style={{ flex: 1, height: 1, background: 'var(--rule)' }} />
      </div>
      <h2 className="serif" style={{ fontSize: 36, letterSpacing: '-0.015em', marginBottom: 28, fontWeight: 700 }}>
        {title}
      </h2>
      {children}
    </section>
  );
}

function SampleRow({ sample, agent }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1fr 140px 1fr 32px',
      gap: 16,
      alignItems: 'center',
      padding: '18px 8px',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div className="serif" style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.005em' }}>
        {sample.title}
      </div>
      <Tag>{sample.tag}</Tag>
      <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>{sample.result}</div>
      <Glyph name="arrow" size={18} color="var(--ink-3)" />
    </div>
  );
}

function TechRow({ label, value }) {
  return (
    <div style={{ padding: '14px 0', borderBottom: '1px solid var(--rule)' }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 4 }}>
        {label}
      </div>
      <div style={{ fontSize: 15, color: 'var(--ink)' }}>{value}</div>
    </div>
  );
}

function PriceCard({ agent, navigate }) {
  const [mode, setMode] = React.useState('sub'); // 'sub' | 'once'
  return (
    <div style={{ border: '1px solid var(--ink)', background: 'var(--paper)' }}>
      <div style={{ padding: 24, borderBottom: '1px solid var(--rule)' }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 8 }}>
          Условия найма
        </div>

        {/* Toggle */}
        <div style={{ display: 'flex', border: '1px solid var(--rule)', borderRadius: 4, overflow: 'hidden', marginBottom: 20 }}>
          {[
            { id: 'sub', label: 'Подписка' },
            { id: 'once', label: 'Разовое дело' },
          ].map((opt, i) => (
            <button
              key={opt.id}
              onClick={() => setMode(opt.id)}
              style={{
                flex: 1, padding: '8px 12px', fontSize: 13, border: 0, cursor: 'pointer', fontFamily: 'var(--font-body)',
                background: mode === opt.id ? 'var(--ink)' : 'transparent',
                color: mode === opt.id ? 'var(--paper)' : 'var(--ink-2)',
                borderLeft: i ? '1px solid var(--rule)' : 0,
              }}
            >
              {opt.label}
            </button>
          ))}
        </div>

        {mode === 'sub' ? (
          <>
            <div className="serif" style={{ fontSize: 48, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 6 }}>
              {rub(agent.price)}
              <span className="mono" style={{ fontSize: 16, color: 'var(--ink-3)', fontWeight: 400 }}> /мес</span>
            </div>
            <div className="muted" style={{ fontSize: 13 }}>
              {agent.requests} · база знаний · все каналы
            </div>
          </>
        ) : (
          <>
            <div className="serif" style={{ fontSize: 48, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 6 }}>
              {rub(agent.priceOnce)}
            </div>
            <div className="muted" style={{ fontSize: 13 }}>
              Одно задание · один результат · без подписки
            </div>
          </>
        )}
      </div>

      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <button className="btn btn-primary" style={{ justifyContent: 'center' }} onClick={() => navigate('chat', { id: agent.id })}>
          Попробовать бесплатно
        </button>
        <button className="btn btn-secondary" style={{ justifyContent: 'center' }}>
          Нанять {mode === 'sub' ? 'на месяц' : 'на одно дело'}
        </button>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'center', letterSpacing: '0.08em', marginTop: 8 }}>
          14 дней пробного периода · без карты
        </div>
      </div>

      <div style={{ borderTop: '1px solid var(--rule)', padding: '20px 24px', background: 'var(--paper-2)' }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 12 }}>
          В одной подписке
        </div>
        {agent.skills.slice(0, 4).map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 10, fontSize: 13, color: 'var(--ink-2)', marginBottom: 6, alignItems: 'flex-start' }}>
            <Glyph name="check" size={14} color="var(--forest)" />
            <span>{s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// DEMO CHAT — small, just to show what a real dialog looks like
// ─────────────────────────────────────────────────────────────────────────────

function DemoChat({ agent }) {
  // Hardcoded for AI-Юрист by default; pick a generic one otherwise
  const demos = {
    jurist: {
      attachment: { name: 'Договор аренды_ООО_Восход.pdf', size: '14 стр., 312 КБ' },
      user: 'Проверьте этот договор аренды на риски. Мы&nbsp;— арендатор, помещение 80 м², срок 11 месяцев.',
      reply: [
        { type: 'p', text: 'Нашёл 7 рисков. Из них 2 критичных. Привожу с цитатами из текста:' },
        { type: 'list', items: [
          { tag: 'критично', text: 'п. 4.3 — арендодатель вправе в одностороннем порядке поднять ставку каждые 3 месяца без ограничения процента. Рекомендую заменить на «не чаще одного раза в год и не более чем на 10%».' },
          { tag: 'критично', text: 'п. 7.1 — обеспечительный платёж не возвращается «при любом нарушении». Это противоречит ст. 381.1 ГК РФ. Должно быть «при существенном нарушении» с перечнем.' },
          { tag: 'внимание', text: 'п. 5.2 — стоимость коммунальных услуг включена в фикс, но указан лимит электричества. Превышение оплачивается отдельно.' },
        ] },
        { type: 'p', text: 'Если нужно — подготовлю проект протокола разногласий со ссылками на ГК РФ.' },
      ],
    },
    accountant: {
      attachment: { name: 'УПД_07_2026.pdf', size: '3 стр., 142 КБ' },
      user: 'Проверьте УПД от ООО «Восход» за июль. Что-то смущает в реквизитах.',
      reply: [
        { type: 'p', text: 'Нашёл 3 ошибки в реквизитах:' },
        { type: 'list', items: [
          { tag: 'критично', text: 'В строке грузополучателя указан старый ИНН — не совпадает с актуальным в ЕГРЮЛ.' },
          { tag: 'внимание', text: 'Сумма НДС в графе 7 рассчитана как 20%, но в графе 8 — 18%. По дате документа должно быть 20%.' },
          { tag: 'внимание', text: 'Подпись «главного бухгалтера» — не расшифрована. Формально документ не дефектен, но для ФНС лучше расшифровать.' },
        ] },
        { type: 'p', text: 'Документ к учёту принимать не рекомендую до исправления. Подготовить письмо контрагенту?' },
      ],
    },
  };

  const demo = demos[agent.id] || demos.jurist;

  return (
    <div style={{
      border: '1px solid var(--rule)',
      background: 'var(--paper-2)',
      maxWidth: 800,
    }}>
      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--rule)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'var(--paper)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Monogram agent={agent} size={28} />
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
            Образец диалога · 14:32
          </span>
        </div>
        <Tag color="var(--forest)">SPECIMEN</Tag>
      </div>

      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 24 }}>
        {/* User message */}
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <div style={{ maxWidth: '70%', background: 'var(--ink)', color: 'var(--paper)', padding: '12px 16px', borderRadius: 4, fontSize: 14, lineHeight: 1.5 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10, padding: '6px 10px', background: 'rgba(244,240,230,0.08)', borderRadius: 3 }}>
              <Glyph name="doc" size={14} />
              <div style={{ fontSize: 12, lineHeight: 1.3 }}>
                <div>{demo.attachment.name}</div>
                <div style={{ opacity: 0.6, fontSize: 11 }}>{demo.attachment.size}</div>
              </div>
            </div>
            <span dangerouslySetInnerHTML={{ __html: demo.user }} />
          </div>
        </div>

        {/* Agent reply */}
        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <Monogram agent={agent} size={32} />
          <div style={{ flex: 1, maxWidth: '85%' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', marginBottom: 6 }}>
              AI-{agent.title} · 14:32:18
            </div>
            <div style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.6 }}>
              {demo.reply.map((b, i) => {
                if (b.type === 'p') return <p key={i} style={{ marginBottom: 12 }}>{b.text}</p>;
                if (b.type === 'list') return (
                  <div key={i} style={{ marginBottom: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {b.items.map((it, j) => (
                      <div key={j} style={{
                        display: 'flex', gap: 10,
                        padding: '10px 12px',
                        background: 'var(--paper)',
                        borderLeft: `3px solid ${it.tag === 'критично' ? 'var(--burgundy)' : 'var(--ochre)'}`,
                      }}>
                        <span className="mono" style={{
                          fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                          color: it.tag === 'критично' ? 'var(--burgundy)' : 'var(--ochre)',
                          fontWeight: 600,
                          flexShrink: 0,
                          marginTop: 3,
                        }}>
                          {it.tag}
                        </span>
                        <span style={{ fontSize: 13.5 }}>{it.text}</span>
                      </div>
                    ))}
                  </div>
                );
                return null;
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dossier = Dossier;