// reports-pages.jsx — Звіти: замовникам · внутрішні · шаблони

// ============ ЗВІТИ ЗАМОВНИКАМ ============
function ClientReportsPage({ role }) {
  const objects = window.DATA.OBJECTS;
  const contracts = window.DATA.CONTRACTS;
  const tasks = window.DATA.TASKS;
  const [openId, setOpenId] = React.useState(null);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Звіти замовникам</h1>
        <div className="page-sub">
          <span>прогрес проєктів</span>
          <span className="dot"></span>
          <span>формуються автоматично з задач і платежів</span>
        </div>
      </div>

      <div className="hint-box" style={{marginBottom: 24}}>
        <b>Як це працює:</b> для кожного активного об'єкта формується PDF-звіт з прогресом
        проєктних робіт, фотофіксацією, графіком платежів і списком зданих документів.
        Натисніть «Сформувати» для попереднього перегляду, потім «Експорт PDF» для надсилання.
      </div>

      <div className="report-grid">
        {objects.map(o => {
          const contract = contracts.find(c => c.obj === o.id);
          const client = contract ? window.getClient(contract.client) : null;
          const objTasks = tasks.filter(t => t.obj === o.id);
          const done = objTasks.filter(t => t.status === "done").length;
          const total = Object.values(o.plan || {}).reduce((s, n) => s + n, 0);
          const pct = total > 0 ? Math.round(done / total * 100) : 0;
          return (
            <div key={o.id} className="report-card" onClick={() => setOpenId(o.id)}>
              <div className="report-card-head">
                <div className="td-mono" style={{fontSize: 11.5, color: "var(--ink-3)"}}>{o.code}</div>
                <span className="status-tag tone-live">{o.grade}</span>
              </div>
              <div className="report-card-name">{o.name}</div>
              <div className="report-card-client">{client?.short || "—"}</div>
              <div className="obj-overall" style={{padding: "12px 0 0"}}>
                <div className="obj-overall-bar">
                  <div className="obj-overall-fill" style={{width: pct + "%"}}></div>
                </div>
                <div className="obj-overall-meta">
                  <span>{done} з {total} задач</span>
                  <span>{pct}%</span>
                </div>
              </div>
              <div className="report-card-foot">
                <button className="btn btn-primary" style={{width: "100%", justifyContent: "center"}}>
                  Сформувати звіт →
                </button>
              </div>
            </div>
          );
        })}
      </div>

      {openId && <ReportPreview obj={objects.find(o => o.id === openId)} onClose={() => setOpenId(null)} />}
    </div>
  );
}

function ReportPreview({ obj, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const contract = window.DATA.CONTRACTS.find(c => c.obj === obj.id);
  const client = contract ? window.getClient(contract.client) : null;
  const tasks = window.DATA.TASKS.filter(t => t.obj === obj.id);
  const stages = window.DATA.STAGES;
  const today = "26 травня 2026";

  // Прогрес по етапах
  const stageProgress = stages.map(s => {
    const list = tasks.filter(t => t.stage === s.id);
    const done = list.filter(t => t.status === "done").length;
    const planned = obj.plan?.[s.id] || 0;
    return { stage: s, done, planned, pct: planned > 0 ? Math.round(done / planned * 100) : 0 };
  }).filter(x => x.planned > 0);

  // Платежі
  const paid = contract?.schedule.filter(s => s.paidDate) || [];
  const upcoming = contract?.schedule.filter(s => !s.paidDate) || [];

  return (
    <>
      <div className="drawer-overlay" onClick={onClose} style={{background: "rgba(0,0,0,0.4)"}}></div>
      <div className="report-modal">
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div style={{fontSize: 13, fontWeight: 600}}>Попередній перегляд звіту</div>
          <div style={{marginLeft: "auto", display: "flex", gap: 8}}>
            <button className="btn">Редагувати</button>
            <button className="btn">Експорт PDF</button>
            <button className="btn btn-primary">Надіслати email</button>
          </div>
        </div>

        <div className="report-page">
          {/* Шапка звіту */}
          <div className="report-doc-head">
            <div>
              <div style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--ink-3)", marginBottom: 6}}>Звіт про виконання проєктних робіт</div>
              <h1 style={{fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: "-0.015em"}}>{obj.name}</h1>
              <div style={{fontSize: 13, color: "var(--ink-2)", marginTop: 8}}>
                <span className="td-mono" style={{fontSize: 12, color: "var(--ink-3)"}}>{obj.code}</span> · {obj.address} · клас {obj.grade}
              </div>
            </div>
            <div style={{textAlign: "right", fontSize: 12, color: "var(--ink-3)"}}>
              <div>Замовнику:</div>
              <div style={{color: "var(--ink), fontWeight: 600", fontSize: 13, marginTop: 4}}>{client?.short}</div>
              <div style={{marginTop: 8}}>станом на {today}</div>
            </div>
          </div>

          {/* Резюме */}
          <div className="report-section">
            <div className="report-section-h">1. Загальні відомості</div>
            <table className="report-info-table">
              <tbody>
                <tr><td>Договір</td><td>№ {contract?.number} від {window.formatDate(contract?.date)}</td></tr>
                <tr><td>Сума договору</td><td><b>{window.formatMoney(contract?.total)} ₴</b></td></tr>
                <tr><td>Поточна стадія</td><td>{window.getStage(obj.activeStage)?.name}</td></tr>
                <tr><td>Очікуваний дедлайн</td><td>{obj.deadline}</td></tr>
              </tbody>
            </table>
          </div>

          {/* Прогрес по етапах */}
          <div className="report-section">
            <div className="report-section-h">2. Прогрес виконання</div>
            <div style={{display: "flex", flexDirection: "column", gap: 10}}>
              {stageProgress.map(sp => (
                <div key={sp.stage.id} style={{display: "grid", gridTemplateColumns: "180px 1fr 80px", gap: 12, alignItems: "center", fontSize: 13}}>
                  <span style={{color: "var(--ink-2)", fontWeight: 500}}>{sp.stage.name}</span>
                  <div className="obj-overall-bar"><div className="obj-overall-fill" style={{width: sp.pct + "%"}}></div></div>
                  <span style={{textAlign: "right", fontVariantNumeric: "tabular-nums", fontWeight: 500}}>{sp.done}/{sp.planned}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Виконані задачі періоду */}
          <div className="report-section">
            <div className="report-section-h">3. Виконано за звітний період</div>
            {tasks.filter(t => t.status === "done").length > 0
              ? <ul className="report-list">
                  {tasks.filter(t => t.status === "done").slice(0, 8).map(t => (
                    <li key={t.id}>{t.title} <span style={{color: "var(--ink-3)", fontSize: 12}}>· розділ {t.section}</span></li>
                  ))}
                </ul>
              : <div style={{color: "var(--ink-3)", fontSize: 13}}>За звітний період задач ще не закрито.</div>
            }
          </div>

          {/* Фотофіксація (плейсхолдер) */}
          <div className="report-section">
            <div className="report-section-h">4. Фотофіксація з виїздів</div>
            <div className="photo-placeholder">
              <div className="photo-ph"></div>
              <div className="photo-ph"></div>
              <div className="photo-ph"></div>
            </div>
            <div style={{fontSize: 12, color: "var(--ink-3)", marginTop: 8}}>Підвантажується з Google Drive ↗</div>
          </div>

          {/* Платежі */}
          <div className="report-section">
            <div className="report-section-h">5. Графік платежів</div>
            <table className="report-info-table">
              <thead>
                <tr><th>Етап</th><th className="num-col">Сума</th><th>Термін</th><th>Статус</th></tr>
              </thead>
              <tbody>
                {contract?.schedule.map((s, i) => (
                  <tr key={i}>
                    <td>{s.stage}</td>
                    <td className="num-col">{window.formatMoney(s.amount)} ₴</td>
                    <td>{window.formatDate(s.dueDate)}</td>
                    <td>
                      {s.paidDate
                        ? <span style={{color: "var(--c-green-deep)"}}>сплачено {window.formatDate(s.paidDate)}</span>
                        : <span style={{color: "var(--ink-3)"}}>очікується</span>
                      }
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Підпис */}
          <div className="report-section report-signature">
            <div>
              <div style={{fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4}}>Звіт підготувала</div>
              <div style={{fontSize: 14, fontWeight: 600}}>Кравченко О.М.</div>
              <div style={{fontSize: 12, color: "var(--ink-3)"}}>ГІП, ТОВ «Укрбудпроєкт»</div>
            </div>
            <div style={{textAlign: "right", fontSize: 12, color: "var(--ink-3)"}}>
              <div>Підпис: <span style={{borderBottom: "1px solid var(--ink-3)", display: "inline-block", width: 140, height: 16}}></span></div>
              <div style={{marginTop: 8}}>{today}</div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// ============ ВНУТРІШНІ ЗВІТИ ============
function InternalReportsPage({ role }) {
  // Розрахунок загальновиробничих (ЗВВ) та адміністративних (АДМ) витрат
  const overhead = (type) => {
    const cats = window.EXPENSE_CATEGORIES.filter(c => c.type === type).map(c => c.id);
    const items = window.DATA.EXPENSES
      .filter(e => cats.includes(e.cat))
      .map(e => ({ cat: e.cat, monthly: e.monthlyAmount || 0 }));
    const byCat = {};
    items.forEach(i => { byCat[i.cat] = (byCat[i.cat] || 0) + i.monthly; });
    const monthly = window.totalMonthlyByType(type);
    const top = Object.entries(byCat).sort((a, b) => b[1] - a[1])[0];
    const topCat = top ? window.getCategory(top[0]) : null;
    return { monthly, annual: monthly * 12, topLabel: topCat ? topCat.label : "—" };
  };
  const zvv = overhead("zvv");
  const adm = overhead("adm");
  const [openReport, setOpenReport] = React.useState(null);

  if (openReport === "finance") {
    return <window.FinancialReportPage onBack={() => setOpenReport(null)} role={role} />;
  }

  const pl = window.computeAnnualPL("2026");

  const reports = [
    { id: "zvv", title: "Загальновиробничі витрати", subtitle: `ЗВВ · надбавка ${window.OVERHEAD_RATES.zvvPct}%`, icon: "🏗",
      kpis: [
        { label: "ЗВВ за місяць", val: `${window.formatMoney(zvv.monthly)} ₴` },
        { label: "За рік (прогноз)", val: `${window.formatMoney(zvv.annual)} ₴` },
        { label: "Найбільша стаття", val: zvv.topLabel },
      ] },
    { id: "adm", title: "Адміністративні витрати", subtitle: `АДМ · надбавка ${window.OVERHEAD_RATES.admPct}%`, icon: "🏢",
      kpis: [
        { label: "АДМ за місяць", val: `${window.formatMoney(adm.monthly)} ₴` },
        { label: "За рік (прогноз)", val: `${window.formatMoney(adm.annual)} ₴` },
        { label: "Найбільша стаття", val: adm.topLabel },
      ] },
    { id: "monthly", title: "Місячний дашборд", subtitle: "Травень 2026", icon: "📊",
      kpis: [
        { label: "Виторг (виставлено)", val: "5 440 000 ₴", color: "var(--c-green-deep)" },
        { label: "Фонд ЗП", val: "247 600 ₴" },
        { label: "Витрати", val: "70 333 ₴/міс" },
        { label: "Чистий прибуток", val: "+5 122 067 ₴", color: "var(--c-green-deep)" },
      ] },
    { id: "team", title: "Звіт по команді", subtitle: "Завантаження, ефективність, ЗП", icon: "👥",
      kpis: [
        { label: "Середнє завантаження", val: "67%" },
        { label: "Прострочених задач", val: "1", color: "var(--late)" },
        { label: "Сер. ефективність", val: "87%" },
      ] },
    { id: "objects", title: "Звіт по об'єктах", subtitle: "Прогрес, маржа, дедлайни", icon: "🏗",
      kpis: [
        { label: "Активних об'єктів", val: "4" },
        { label: "Загальна маржа", val: "59.6%" },
        { label: "Найближчий дедлайн", val: "12.06 · УКП-47" },
      ] },
    { id: "finance", title: "Фінансовий результат (P&L)", subtitle: "Рік · ТОВ · загальна система", icon: "💰", open: "finance",
      kpis: [
        { label: "Дохід (без ПДВ)", val: `${window.formatMoney(pl.revenueNet)} ₴` },
        { label: "Чистий прибуток", val: `${window.formatMoney(pl.netProfit)} ₴`, color: "var(--c-green-deep)" },
        { label: "Рентабельність", val: `${pl.margin.toFixed(1)}%` },
      ] },
    { id: "tax", title: "Податки до сплати", subtitle: "Рік · загальна система, платник ПДВ", icon: "🏛",
      kpis: [
        { label: "ПДВ до сплати", val: `${window.formatMoney(pl.vatPayable)} ₴` },
        { label: "Податок на прибуток 18%", val: `${window.formatMoney(pl.profitTax)} ₴` },
        { label: "ЄСВ (нараховано)", val: `${window.formatMoney(pl.esv)} ₴` },
      ] },
    { id: "kpi", title: "KPI звіт по команді", subtitle: "Бонусний пул", icon: "🎯",
      kpis: [
        { label: "Бонус до виплати", val: "98 000 ₴" },
        { label: "Учасників", val: "3 з 5" },
        { label: "Дата виплати", val: "30.05.2026" },
      ] },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Внутрішні звіти</h1>
        <div className="page-sub">
          <span>для директора, бухгалтерії, керівництва</span>
          <span className="dot"></span>
          <span>оновлюються щодня</span>
        </div>
      </div>

      <div className="internal-report-grid">
        {reports.map(r => (
          <div key={r.id} className="internal-report-card">
            <div className="irc-head">
              <div className="irc-icon"><window.Ico e={r.icon} /></div>
              <div>
                <div className="irc-title">{r.title}</div>
                <div className="irc-subtitle">{r.subtitle}</div>
              </div>
            </div>
            <div className="irc-kpis">
              {r.kpis.map((k, i) => (
                <div key={i} className="irc-kpi">
                  <div className="irc-kpi-label">{k.label}</div>
                  <div className="irc-kpi-val" style={{color: k.color || "var(--ink)"}}>{k.val}</div>
                </div>
              ))}
            </div>
            <div className="irc-foot">
              <button className="btn" style={{flex: 1, justifyContent: "center"}} onClick={() => r.open && setOpenReport(r.open)}>Відкрити</button>
              <button className="btn">PDF</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ ШАБЛОНИ ============
function ReportTemplatesPage({ role }) {
  const templates = [
    { id: "tpl1", name: "Звіт замовнику · повний",         category: "client", description: "Прогрес + фото + платежі + підпис ГІП", fields: 12 },
    { id: "tpl2", name: "Звіт замовнику · короткий",       category: "client", description: "Тільки прогрес і дедлайни", fields: 6 },
    { id: "tpl3", name: "Акт виконаних робіт",             category: "client", description: "Юридичний документ для підпису", fields: 10 },
    { id: "tpl4", name: "Місячний звіт директора",         category: "internal", description: "KPI, фінанси, команда", fields: 18 },
    { id: "tpl5", name: "Звіт ДПС · ФОП 3 група",          category: "tax",    description: "Квартальна декларація", fields: 24 },
    { id: "tpl6", name: "Авторський нагляд · виїзд",       category: "client", description: "Журнал АН з фото і зауваженнями", fields: 8 },
    { id: "tpl7", name: "Звіт у банк · підтвердження доходу", category: "external", description: "Довідка для кредиту/іпотеки", fields: 6 },
    { id: "tpl8", name: "Кадровий звіт за рік",            category: "internal", description: "Звіт по штату для річного зібрання", fields: 14 },
  ];

  const catLabels = { client: "Замовникам", internal: "Внутрішній", tax: "Податковий", external: "Зовнішній" };
  const catTones  = { client: "live", internal: "neutral", tax: "warn", external: "neutral" };

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Шаблони звітів</h1>
        <div className="page-sub">
          <span>{templates.length} {window.plural(templates.length, "шаблон", "шаблони", "шаблонів")}</span>
          <span className="dot"></span>
          <span>можна копіювати, редагувати, створювати нові</span>
        </div>
      </div>

      <div className="toolbar">
        <div style={{marginLeft: "auto"}}>
          <button className="btn btn-primary"><window.Icon.Plus /> Створити шаблон</button>
        </div>
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>Назва</th>
            <th>Тип</th>
            <th>Опис</th>
            <th>Полів</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {templates.map(t => (
            <tr key={t.id} className="is-clickable">
              <td><div className="cell-name">{t.name}</div></td>
              <td><span className={`status-tag tone-${catTones[t.category]}`}>{catLabels[t.category]}</span></td>
              <td style={{fontSize: 12.5, color: "var(--ink-2)"}}>{t.description}</td>
              <td className="num-col">{t.fields}</td>
              <td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Редагувати →</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

window.ClientReportsPage = ClientReportsPage;
window.InternalReportsPage = InternalReportsPage;
window.ReportTemplatesPage = ReportTemplatesPage;