// ─── K&N Elite — Cabinet (vertical sidebar layout) ───

const { useState } = React;

function CabinetShell({ section, onSection, onNav, children }) {
  const { t } = useI18n();
  const items = [
    { k: "valuations", l: "Мои оценки",   n: "01" },
    { k: "deal",       l: "Статус сделки", n: "02" },
    { k: "docs",       l: "Документы",     n: "03" },
    { k: "messages",   l: "Сообщения",     n: "04" },
    { k: "settings",   l: "Настройки",     n: "05" },
  ];
  return (
    <div className="page fade">
      <Topbar onNav={onNav} current="cabinet" />
      <div className="cabinet-layout">
        <aside className="cabinet-sidebar">
          <div className="cab-user">
            <div className="cab-user-avatar">И</div>
            <div>
              <div className="cab-user-name">Иван Петров</div>
              <div className="cab-user-sub">Клиент · 2025</div>
            </div>
          </div>

          <div className="cab-nav">
            {items.map(it => (
              <button key={it.k}
                className={"cab-nav-item" + (section === it.k ? " active" : "")}
                onClick={() => onSection(it.k)}>
                <span className="n-num">{it.n}</span>
                <span>{it.l}</span>
              </button>
            ))}
          </div>

          <div className="cab-logout" onClick={() => onNav("home")}>
            ← Выйти
          </div>
        </aside>

        <main style={{ minWidth: 0 }}>{children}</main>
      </div>
      <Footer />
    </div>
  );
}

function CabinetValuations({ onOpen, onNav }) {
  const items = [
    {
      id: 1,
      addr: "Calle Serrano 42, Чамбери, Мадрид",
      area: 112, rooms: 3,
      photo: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1200&q=80&auto=format&fit=crop",
      status: "ready", date: "24 апреля 2026",
      range: "325 000 – 340 000 €",
    },
    {
      id: 2,
      addr: "Paseo de Gracia 89, Барселона",
      area: 145, rooms: 4,
      photo: "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1200&q=80&auto=format&fit=crop",
      status: "processing", date: "23 апреля 2026",
    },
    {
      id: 3,
      addr: "Calle Velázquez 80, Мадрид",
      area: 98, rooms: 3,
      photo: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1200&q=80&auto=format&fit=crop",
      status: "needs_info", date: "22 апреля 2026",
    },
  ];
  const tone = { ready: "var(--ok)", processing: "var(--warn)", needs_info: "var(--err)" };
  const lbl = { ready: "Готово", processing: "В работе", needs_info: "Нужна информация" };

  return (
    <div style={{ padding: "56px 48px 120px", maxWidth: 1100 }}>
      <div className="rise" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
        <div>
          <div className="eyebrow">Раздел 01</div>
          <h1 style={{ marginTop: 12, fontSize: 44 }}>Мои оценки</h1>
          <p style={{ marginTop: 10, color: "var(--ink-60)", maxWidth: 560 }}>
            История всех оценок. Откройте любую, чтобы увидеть детальный отчёт с аналогами и рекомендациями.
          </p>
        </div>
        <button className="btn btn-gold" onClick={() => onNav("home")}>+ Новая оценка</button>
      </div>

      <div className="stagger" style={{ display: "grid", gap: 20 }}>
        {items.map(it => (
          <div key={it.id} className="card card-hover" style={{
            padding: 0, display: "grid", gridTemplateColumns: "280px 1fr auto", gap: 0, alignItems: "stretch", overflow: "hidden",
          }}>
            <div className="photo photo-hover" style={{ height: 220 }}>
              <img src={it.photo} alt="" loading="lazy" />
            </div>
            <div style={{ padding: "28px 32px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: tone[it.status] }} />
                <span className="mono" style={{ color: tone[it.status], fontSize: 10 }}>{lbl[it.status]}</span>
                <span className="mono" style={{ color: "var(--ink-40)", marginLeft: 10 }}>{it.date}</span>
              </div>
              <h3 style={{ marginTop: 10, fontSize: 24 }}>{it.addr}</h3>
              <div style={{ marginTop: 8, fontSize: 13, color: "var(--ink-60)" }}>{it.area} м² · {it.rooms} комн.</div>
              {it.range && <div className="num-lg" style={{ marginTop: 14, color: "var(--gold-deep)", fontSize: 28 }}>{it.range}</div>}
            </div>
            <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 10, justifyContent: "center", borderLeft: "1px solid var(--ink-10)" }}>
              <button className="btn btn-sm btn-gold" onClick={onOpen}>Открыть →</button>
              <button className="btn btn-sm btn-ghost">Переоценить</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CabinetDeal() {
  const stages = [
    { n: "01", t: "Подписание договора", done: true, date: "18 апр" },
    { n: "02", t: "Фотосъёмка и стейджинг", done: true, date: "21 апр" },
    { n: "03", t: "Публикация в базах", active: true, date: "с 24 апр" },
    { n: "04", t: "Показы и офферы", date: "—" },
    { n: "05", t: "Нотариус и передача ключей", date: "—" },
  ];
  return (
    <div style={{ padding: "56px 48px 120px", maxWidth: 1100 }}>
      <div className="eyebrow">Раздел 02</div>
      <h1 style={{ marginTop: 12, fontSize: 44 }}>Статус сделки</h1>
      <p style={{ marginTop: 10, color: "var(--ink-60)", maxWidth: 640 }}>
        Продажа Calle Serrano 42. Отслеживайте каждый этап в реальном времени.
      </p>

      <div className="card" style={{ marginTop: 40, padding: 0, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "320px 1fr" }}>
          <div className="photo" style={{ minHeight: 220 }}>
            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1200&q=80&auto=format&fit=crop" alt="" />
          </div>
          <div style={{ padding: 32 }}>
            <div className="mono" style={{ color: "var(--gold-deep)" }}>В продаже · с 21 апреля</div>
            <h3 style={{ marginTop: 10, fontSize: 26 }}>Calle Serrano 42, Чамбери</h3>
            <div style={{ fontSize: 14, color: "var(--ink-60)", marginTop: 6 }}>112 м² · 3 комнаты · выставлено за 335 000 €</div>
            <div style={{ display: "flex", gap: 32, marginTop: 24 }}>
              <div>
                <div className="label">Показов</div>
                <div className="num-lg" style={{ marginTop: 4, fontSize: 28 }}>12</div>
              </div>
              <div>
                <div className="label">Офферов</div>
                <div className="num-lg" style={{ marginTop: 4, fontSize: 28 }}>3</div>
              </div>
              <div>
                <div className="label">Лучший оффер</div>
                <div className="num-lg" style={{ marginTop: 4, fontSize: 28, color: "var(--gold-deep)" }}>328 000 €</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <h3 style={{ marginTop: 48, fontSize: 22 }}>Этапы сделки</h3>
      <div style={{ marginTop: 24, background: "var(--paper)", border: "1px solid var(--ink-10)" }}>
        {stages.map((s, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "60px 1fr auto auto",
            padding: "20px 28px", alignItems: "center", gap: 20,
            borderBottom: i < stages.length - 1 ? "1px solid var(--ink-10)" : "none",
            background: s.active ? "var(--gold-10)" : "transparent",
          }}>
            <div style={{
              fontFamily: "var(--serif)", fontSize: 28, fontWeight: 300,
              color: s.done ? "var(--gold-deep)" : s.active ? "var(--gold)" : "var(--ink-40)",
            }}>{s.n}</div>
            <div style={{ fontSize: 16, color: s.done || s.active ? "var(--ink)" : "var(--ink-60)" }}>{s.t}</div>
            <div className="mono" style={{ color: "var(--ink-60)" }}>{s.date}</div>
            <div style={{ width: 24, textAlign: "right" }}>
              {s.done && <span style={{ color: "var(--gold-deep)" }}>✓</span>}
              {s.active && <span style={{
                display: "inline-block", width: 8, height: 8, borderRadius: "50%",
                background: "var(--gold)", boxShadow: "0 0 0 4px var(--gold-20)",
                animation: "pulse-dot 1.8s ease-in-out infinite",
              }} />}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CabinetDocs() {
  const docs = [
    { n: "Договор-поручение на продажу.pdf", size: "284 КБ", date: "18 апр" },
    { n: "Nota simple — Calle Serrano 42.pdf", size: "156 КБ", date: "21 апр" },
    { n: "Фотосессия — 48 фото.zip", size: "68 МБ", date: "21 апр" },
    { n: "Отчёт об оценке.pdf", size: "1,2 МБ", date: "20 апр" },
  ];
  return (
    <div style={{ padding: "56px 48px 120px", maxWidth: 1100 }}>
      <div className="eyebrow">Раздел 03</div>
      <h1 style={{ marginTop: 12, fontSize: 44 }}>Документы</h1>
      <p style={{ marginTop: 10, color: "var(--ink-60)" }}>Все документы по вашим сделкам и оценкам</p>

      <div style={{ marginTop: 40, background: "var(--paper)", border: "1px solid var(--ink-10)" }}>
        {docs.map((d, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "auto 1fr auto auto",
            padding: "18px 24px", alignItems: "center", gap: 20,
            borderBottom: i < docs.length - 1 ? "1px solid var(--ink-10)" : "none",
          }}>
            <div style={{
              width: 40, height: 40, background: "var(--gold-10)",
              display: "grid", placeItems: "center",
              fontFamily: "var(--mono)", fontSize: 10, color: "var(--gold-deep)",
            }}>PDF</div>
            <div>
              <div style={{ fontSize: 15 }}>{d.n}</div>
              <div className="mono" style={{ color: "var(--ink-60)", marginTop: 4 }}>{d.size} · {d.date}</div>
            </div>
            <button className="btn btn-sm btn-ghost">Скачать</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function CabinetMessages() {
  const msgs = [
    { from: "Carlos Tenorio", role: "Персональный менеджер", t: "Иван, завтра в 11:00 два показа подряд. Успеем?", time: "10 мин назад", unread: true },
    { from: "María González", role: "Фотограф",              t: "Готовы материалы со съёмки. Прислать на почту?",    time: "2 часа", unread: false },
    { from: "Офис K&N Elite", role: "",                       t: "Документы на подпись готовы. Ждём в офисе.",       time: "вчера",   unread: false },
  ];
  return (
    <div style={{ padding: "56px 48px 120px", maxWidth: 1100 }}>
      <div className="eyebrow">Раздел 04</div>
      <h1 style={{ marginTop: 12, fontSize: 44 }}>Сообщения</h1>

      <div style={{ marginTop: 40, background: "var(--paper)", border: "1px solid var(--ink-10)" }}>
        {msgs.map((m, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "48px 1fr auto",
            padding: "22px 28px", alignItems: "flex-start", gap: 18,
            borderBottom: i < msgs.length - 1 ? "1px solid var(--ink-10)" : "none",
            background: m.unread ? "var(--gold-10)" : "transparent",
            cursor: "pointer",
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: "50%",
              background: "var(--ivory-2)", border: "1px solid var(--gold-20)",
              display: "grid", placeItems: "center",
              fontFamily: "var(--serif)", fontSize: 17, color: "var(--gold-deep)",
            }}>{m.from[0]}</div>
            <div>
              <div style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--serif)", fontSize: 17 }}>{m.from}</span>
                {m.role && <span className="mono" style={{ color: "var(--ink-60)" }}>{m.role}</span>}
              </div>
              <div style={{ marginTop: 6, fontSize: 14, color: "var(--ink-soft)" }}>{m.t}</div>
            </div>
            <div className="mono" style={{ color: "var(--ink-60)" }}>{m.time}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CabinetSettings() {
  const [saved, setSaved] = useState(false);
  return (
    <div style={{ padding: "56px 48px 120px", maxWidth: 820 }}>
      <div className="eyebrow">Раздел 05</div>
      <h1 style={{ marginTop: 12, fontSize: 44 }}>Настройки</h1>

      <div className="card" style={{ marginTop: 40 }}>
        <h3>Личные данные</h3>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 24 }}>
          <div className="field"><div className="label">Имя</div><input className="input" defaultValue="Иван" /></div>
          <div className="field"><div className="label">Фамилия</div><input className="input" defaultValue="Петров" /></div>
          <div className="field"><div className="label">Email</div><input className="input" defaultValue="ivan@mail.com" /></div>
          <div className="field"><div className="label">Телефон / WhatsApp</div><input className="input" defaultValue="+34 612 345 678" /></div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 24 }}>
        <h3>Приватность</h3>
        <div style={{ display: "grid", gap: 16, marginTop: 20 }}>
          <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }}>Экспортировать мои данные</button>
          <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start", color: "var(--err)", borderColor: "var(--err)" }}>Удалить аккаунт</button>
        </div>
      </div>

      <button className="btn btn-gold" style={{ marginTop: 32 }}
        onClick={() => { setSaved(true); setTimeout(() => setSaved(false), 2000); }}>
        {saved ? "✓ Сохранено" : "Сохранить изменения"}
      </button>
    </div>
  );
}

Object.assign(window, {
  CabinetShell, CabinetValuations, CabinetDeal, CabinetDocs, CabinetMessages, CabinetSettings,
});