// phase1-pages.jsx — Ліди, Бюджети об'єктів, Ролі, Компанія

// ============ ЛІДИ ============
function LeadsPage({ role }) {
  const leads = window.DATA.LEADS;
  const [track, setTrack] = React.useState("direct");
  const [openId, setOpenId] = React.useState(null);

  const st = (l) => window.leadStage(l);
  const trackLeads = leads.filter(l => st(l).track === track);
  const stages = window.leadStagesFor(track);
  const flowStages = stages.filter(s => !s.terminal);

  const inFlow = trackLeads.filter(l => !st(l).terminal && !st(l).won);
  const wonList = trackLeads.filter(l => st(l).won);
  const lostList = trackLeads.filter(l => st(l).lost);

  const pipelineValue = inFlow.reduce((s, l) => s + l.estimatedValue * (l.probability / 100), 0);
  const flowTotal = inFlow.reduce((s, l) => s + l.estimatedValue, 0);
  const awaitingCount = trackLeads.filter(l => l.awaitingReview).length;

  const byStage = {};
  stages.forEach(s => { byStage[s.key] = trackLeads.filter(l => l.stage === s.key); });
  const maxStage = Math.max(1, ...flowStages.map(s => byStage[s.key].length));

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Ліди</h1>
        <div className="page-sub">
          <span>{trackLeads.length} {window.plural(trackLeads.length, "картка", "картки", "карток")}</span>
          <span className="dot"></span>
          <span>{inFlow.length} у роботі</span>
          <span className="dot"></span>
          <span>прогноз виторгу <b style={{color: "var(--ink)"}}>{window.formatMoney(Math.round(pipelineValue))} ₴</b></span>
        </div>
      </div>

      <div className="lead-track-tabs">
        {Object.keys(window.LEAD_TRACKS).map(k => {
          const meta = window.LEAD_TRACKS[k];
          const count = leads.filter(l => st(l).track === k && !st(l).terminal && !st(l).won).length;
          return (
            <button key={k} className={"lead-track-tab " + (track === k ? "is-active" : "")} onClick={() => setTrack(k)}>
              <window.Ico name={meta.icon} />
              <span className="ltt-text"><b>{meta.label}</b><span>{meta.sub}</span></span>
              <span className="ltt-count">{count}</span>
            </button>
          );
        })}
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">У роботі</div>
          <div className="kpi-value">{inFlow.length}</div>
          <div className="kpi-sub">на {window.formatMoney(Math.round(flowTotal / 1000))} тис ₴ контрактів</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Прогноз виторгу</div>
          <div className="kpi-value">{window.formatMoney(Math.round(pipelineValue / 1000))} <span style={{fontSize: 14, color: "var(--ink-3)"}}>тис ₴</span></div>
          <div className="kpi-sub">з урахуванням ймовірності</div>
        </div>
        {track === "tender"
          ? (
            <div className="kpi">
              <div className="kpi-label">Чекають розгляду</div>
              <div className="kpi-value" style={{color: awaitingCount ? "var(--c-amber)" : "var(--ink)"}}>{awaitingCount}</div>
              <div className="kpi-sub">черга за ціною</div>
            </div>
          ) : (
            <div className="kpi">
              <div className="kpi-label">Договори</div>
              <div className="kpi-value" style={{color: "var(--c-green-deep)"}}>{wonList.length}</div>
              <div className="kpi-sub">готові до підписання</div>
            </div>
          )}
      </div>

      <div className="funnel-rail">
        {flowStages.map(s => (
          <div key={s.key} className="funnel-step">
            <div className="funnel-step-top">
              <span className={"status-tag tone-" + s.tone}>{s.label}</span>
              <b>{byStage[s.key].length}</b>
            </div>
            <div className="funnel-step-bar"><div className="funnel-step-fill" style={{width: (byStage[s.key].length / maxStage * 100) + "%"}}></div></div>
          </div>
        ))}
      </div>

      {track === "tender" && (
        <div className="sync-banner">
          <window.Ico name="refresh" />
          <span>Статуси тендерів синхронізуються з <b>zakupivli.pro</b>. Останнє оновлення: 07.06.2026 09:12.</span>
          <span className="sync-badge">демо · автосинк після інтеграції API</span>
        </div>
      )}

      <div className="lead-groups">
        {flowStages.map(s => byStage[s.key].length > 0 && (
          <div key={s.key} className="lead-group">
            <div className="lead-group-head"><span className={"status-tag tone-" + s.tone}>{s.label}</span><span className="lead-group-count">{byStage[s.key].length}</span></div>
            <div className="lead-stack">{byStage[s.key].map(l => <LeadCard key={l.id} lead={l} onOpen={() => setOpenId(l.id)} />)}</div>
          </div>
        ))}
        {wonList.length > 0 && (
          <div className="lead-group">
            <div className="lead-group-head"><span className="status-tag tone-live">Договір</span><span className="lead-group-count">{wonList.length}</span></div>
            <div className="lead-stack">{wonList.map(l => <LeadCard key={l.id} lead={l} onOpen={() => setOpenId(l.id)} />)}</div>
          </div>
        )}
        {lostList.length > 0 && (
          <div className="lead-group">
            <div className="lead-group-head"><span className="status-tag tone-warn">Закрито без угоди</span><span className="lead-group-count">{lostList.length}</span></div>
            <div className="lead-stack">{lostList.map(l => <LeadCard key={l.id} lead={l} onOpen={() => setOpenId(l.id)} />)}</div>
          </div>
        )}
      </div>

      <button className="btn btn-primary" style={{marginTop: 16}}>
        <window.Icon.Plus /> {track === "tender" ? "Додати тендер вручну" : "Новий лід"}
      </button>

      {openId && <LeadDrawer lead={leads.find(l => l.id === openId)} onClose={() => setOpenId(null)} />}
    </div>
  );
}

function LeadCard({ lead, onOpen }) {
  const stage = window.leadStage(lead);
  const owner = window.getTeam(lead.owner);
  const cls = stage.won ? "lead-hot" : stage.lost ? "lead-lost" : "lead-warm";
  const isTender = lead.track === "tender";
  return (
    <div className={"lead-card " + cls} onClick={onOpen}>
      <div className="lead-card-head">
        <div className="lead-card-stage">
          <span className={"status-tag tone-" + stage.tone}>{stage.label}</span>
          <span className="empl-chip empl-staff" style={{fontSize: 9.5}}>{lead.grade}</span>
          {lead.awaitingReview && <span className="status-tag tone-amber" style={{fontSize: 9.5}}>черга за ціною</span>}
        </div>
        <div className="lead-card-prob">
          <div className="lead-prob-num">{lead.probability}<span>%</span></div>
          <div className="lead-prob-label">ймовірність</div>
        </div>
      </div>
      <div className="lead-card-name">{lead.name}</div>
      <div className="lead-card-client">{lead.client}</div>
      <div className="lead-card-meta">
        <span>{window.LEAD_TYPE[lead.type]}</span>
        <span className="dot"></span>
        <span>{lead.source}</span>
        {isTender && lead.externalId && <React.Fragment><span className="dot"></span><span className="td-mono" style={{fontSize: 11}}>{lead.externalId}</span></React.Fragment>}
      </div>
      <div className="lead-card-foot">
        <div className="lead-value">
          <div className="lead-value-label">{isTender ? "наша ставка / очік." : "оцінка контракту"}</div>
          <div className="lead-value-num">{window.formatMoney(isTender && lead.ourBid ? lead.ourBid : lead.estimatedValue)} <span>₴</span></div>
        </div>
        <div className="lead-action">
          <div className="lead-action-label">{isTender ? "статус" : "наступний крок"}</div>
          <div className="lead-action-text">{lead.nextAction}</div>
        </div>
        <div className="team-avatar" style={{width: 32, height: 32, fontSize: 11}}>{owner ? owner.initials : ""}</div>
      </div>
    </div>
  );
}

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

  const stage = window.leadStage(lead);
  const owner = window.getTeam(lead.owner);
  const isTender = lead.track === "tender";
  const company = window.getCompany(lead.companyId);
  const flowStages = window.leadStagesFor(lead.track).filter(s => !s.terminal);

  return (
    <React.Fragment>
      <div className="drawer-overlay" onClick={onClose}></div>
      <aside className="drawer" style={{width: "min(640px, 95vw)"}}>
        <div className="drawer-head">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <span className={"status-tag tone-" + stage.tone}>{stage.label}</span>
          <span className="empl-chip empl-staff">{lead.grade}</span>
          <span style={{marginLeft: "auto", fontSize: 11, color: "var(--ink-3)"}}>{lead.id}</span>
        </div>

        <div className="drawer-body">
          <h1 className="drawer-h1">{lead.name}</h1>
          <div className="drawer-meta">
            <span>{lead.client}</span>
            <span className="task-meta-dot"></span>
            <span>{window.LEAD_TYPE[lead.type]}</span>
            <span className="task-meta-dot"></span>
            <span>{window.LEAD_TRACKS[lead.track].label}</span>
          </div>

          <div className="lead-stepper">
            {flowStages.map(s => {
              const done = stage.won || s.order < (stage.order || 0);
              const cur = s.key === lead.stage;
              return (
                <div key={s.key} className={"lead-step " + (cur ? "is-current " : "") + (done ? "is-done" : "")}>
                  <span className="lead-step-dot"></span>
                  <span className="lead-step-label">{s.label}</span>
                </div>
              );
            })}
          </div>

          <div className="kpi-row" style={{gridTemplateColumns: "repeat(3, 1fr)", marginBottom: 20}}>
            <div className="kpi">
              <div className="kpi-label">{isTender ? "Очік. вартість" : "Оцінка"}</div>
              <div className="kpi-value" style={{fontSize: 22}}>{window.formatMoney(lead.estimatedValue)} <span style={{fontSize: 13, color: "var(--ink-3)"}}>₴</span></div>
            </div>
            <div className="kpi">
              <div className="kpi-label">{isTender ? "Наша ставка" : "Ймовірність"}</div>
              <div className="kpi-value">{isTender && lead.ourBid ? window.formatMoney(lead.ourBid) + " ₴" : lead.probability + "%"}</div>
            </div>
            <div className="kpi">
              <div className="kpi-label">Прогноз</div>
              <div className="kpi-value" style={{fontSize: 18, color: "var(--c-green-deep)"}}>{window.formatMoney(Math.round(lead.estimatedValue * lead.probability / 100))} ₴</div>
            </div>
          </div>

          {isTender && (
            <div className="drawer-section">
              <div className="drawer-section-h">Тендер · zakupivli.pro</div>
              <div className="tender-box">
                <div className="tender-row"><span>Номер закупівлі</span><b className="td-mono">{lead.externalId}</b></div>
                <div className="tender-row"><span>Майданчик</span><b>{lead.platform}</b></div>
                {lead.competitorsCount != null && <div className="tender-row"><span>Учасників</span><b>{lead.competitorsCount}</b></div>}
                {lead.priceRank != null && <div className="tender-row"><span>Наше місце за ціною</span><b>{lead.priceRank}</b></div>}
                <div className="tender-row"><span>Синхронізовано</span><b>{lead.synced}</b></div>
              </div>
              {lead.awaitingReview && (
                <div className="tender-note">Дешевший учасник на розгляді. Якщо його <b>відхилять</b> — картка автоматично підніметься на «Кваліфікацію». Це і є логіка черги за ціною.</div>
              )}
            </div>
          )}

          <div className="drawer-section">
            <div className="drawer-section-h">Поточний крок</div>
            <div className="lead-stage-block">
              <div className="lead-stage-icon"><window.Ico name="mapPin" /></div>
              <div>
                <div style={{fontSize: 14, fontWeight: 600}}>{stage.label}</div>
                <div style={{fontSize: 12.5, color: "var(--ink-3)", marginTop: 4}}>{lead.nextAction}</div>
              </div>
            </div>
          </div>

          <div className="drawer-section">
            <div className="drawer-section-h">Контакти</div>
            <div style={{fontSize: 13, padding: "12px 14px", background: "var(--bg-sunken)", borderRadius: 8, color: "var(--ink-2)"}}>
              {lead.contact}
            </div>
          </div>

          <div className="drawer-section">
            <div className="drawer-section-h">Деталі</div>
            <dl className="info-grid">
              <div><dt>Джерело</dt><dd>{lead.source}</dd></div>
              <div><dt>Очікуване закриття</dt><dd>{window.formatDate(lead.expectedClose)}</dd></div>
              <div><dt>Відповідальний</dt><dd>{owner ? owner.name : "—"}</dd></div>
              <div><dt>Тип замовника</dt><dd>{window.LEAD_TYPE[lead.type]}</dd></div>
              <div><dt>Компанія</dt><dd>{company.short}</dd></div>
            </dl>
          </div>

          {lead.notes && (
            <div className="drawer-section">
              <div className="drawer-section-h">Нотатки</div>
              <div style={{fontSize: 13, color: "var(--ink-2)", lineHeight: 1.55, padding: "12px 14px", background: "var(--bg-sunken)", borderRadius: 8}}>
                {lead.notes}
              </div>
            </div>
          )}

          {lead.closeReason && (
            <div className="drawer-section">
              <div className="drawer-section-h">Причина закриття</div>
              <div style={{fontSize: 13, color: "var(--late)", padding: "12px 14px", background: "var(--late-bg)", borderRadius: 8}}>
                {lead.closeReason}
              </div>
            </div>
          )}
        </div>

        <div className="drawer-foot">
          <button className="btn btn-primary">{isTender ? "Відкрити на zakupivli.pro" : "Перевести в замовника"}</button>
          <button className="btn">Призначити задачу</button>
        </div>
      </aside>
    </React.Fragment>
  );
}


// ============ БЮДЖЕТИ ОБ'ЄКТІВ ============
function BudgetsPage({ role, tasks }) {
  const objects = window.DATA.OBJECTS;
  const contracts = window.DATA.CONTRACTS;
  const expenses = window.DATA.EXPENSES;
  const allocations = window.allocateOverheadToObjects();
  const team = window.DATA.TEAM;

  // Розрахунок: на кожен об'єкт - план vs факт
  const objectBudgets = objects.map(o => {
    const contract = contracts.find(c => c.obj === o.id);
    if (!contract) return null;

    // План — з кошторису (як у estimates)
    const estimatedLabor = Math.round(contract.total * 0.25);
    const plannedAdm = Math.round(estimatedLabor * window.OVERHEAD_RATES.admPct / 100);
    const plannedZvv = Math.round(estimatedLabor * window.OVERHEAD_RATES.zvvPct / 100);
    const plannedTotal = estimatedLabor + plannedAdm + plannedZvv;

    // Факт — на скільки реально витрачено
    const directExpenses = expenses.filter(e => e.obj === o.id).reduce((s, e) => s + e.amount, 0);
    const allocation = allocations.find(a => a.contract.id === contract.id);
    const monthsActive = 6; // спрощено — припустимо 6 місяців роботи
    const factAdm = (allocation?.monthlyAdm || 0) * monthsActive;
    const factZvv = (allocation?.monthlyZvv || 0) * monthsActive + directExpenses;
    const factLabor = Math.round(estimatedLabor * 0.85); // спрощено — поки 85% з плану

    const factTotal = factLabor + factAdm + factZvv;

    return {
      obj: o,
      contract,
      plannedLabor: estimatedLabor,
      plannedAdm,
      plannedZvv,
      plannedTotal,
      factLabor,
      factAdm,
      factZvv,
      factTotal,
      directExpenses,
      varAbs: factTotal - plannedTotal,
      varPct: ((factTotal - plannedTotal) / plannedTotal) * 100,
    };
  }).filter(Boolean);

  const totalPlanned = objectBudgets.reduce((s, b) => s + b.plannedTotal, 0);
  const totalFact = objectBudgets.reduce((s, b) => s + b.factTotal, 0);
  const totalVar = totalFact - totalPlanned;

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Бюджети об'єктів</h1>
        <div className="page-sub">
          <span>план vs факт по витратах</span>
          <span className="dot"></span>
          <span>{objectBudgets.length} активних об'єктів</span>
          <span className="dot"></span>
          {totalVar < 0
            ? <span style={{color: "var(--c-green-deep)"}}>економія {window.formatMoney(Math.abs(totalVar))} ₴</span>
            : <span style={{color: "var(--late)"}}>перевитрата {window.formatMoney(totalVar)} ₴</span>
          }
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">Запланований бюджет</div>
          <div className="kpi-value">{window.formatMoney(Math.round(totalPlanned / 1000))}<span style={{fontSize: 14, color: "var(--ink-3)"}}>k ₴</span></div>
          <div className="kpi-sub">по всіх активних</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Фактично витрачено</div>
          <div className="kpi-value">{window.formatMoney(Math.round(totalFact / 1000))}<span style={{fontSize: 14, color: "var(--ink-3)"}}>k ₴</span></div>
          <div className="kpi-sub">накопиченим підсумком</div>
        </div>
        <div className={`kpi ${totalVar > 0 ? "is-warn" : ""}`}>
          <div className="kpi-label">Відхилення</div>
          <div className="kpi-value" style={{color: totalVar > 0 ? "var(--late)" : "var(--c-green-deep)"}}>
            {totalVar > 0 ? "+" : ""}{Math.round(totalVar / totalPlanned * 100)}%
          </div>
          <div className="kpi-sub">{totalVar > 0 ? "перевитрата" : "економія"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Об'єктів у нормі</div>
          <div className="kpi-value">{objectBudgets.filter(b => b.varPct <= 5).length} <span style={{fontSize: 14, color: "var(--ink-3)"}}>з {objectBudgets.length}</span></div>
          <div className="kpi-sub">відхилення ≤ 5%</div>
        </div>
      </div>

      <div className="budget-stack">
        {objectBudgets.map(b => <BudgetRow key={b.obj.id} budget={b} />)}
      </div>
    </div>
  );
}

function BudgetRow({ budget }) {
  const [open, setOpen] = React.useState(false);
  const { obj, contract, plannedTotal, factTotal, plannedLabor, plannedAdm, plannedZvv, factLabor, factAdm, factZvv, varAbs, varPct } = budget;

  const factPctOfPlan = (factTotal / plannedTotal) * 100;
  const isOver = varPct > 5;
  const isWarning = varPct > 0 && varPct <= 5;
  const isGood = varPct <= 0;

  // Маржа: контракт - фактичні витрати
  const marginFact = contract.total - factTotal;
  const marginPlanned = contract.total - plannedTotal;

  return (
    <div className={`budget-row ${open ? "is-open" : ""} ${isOver ? "is-over" : ""}`}>
      <div className="budget-head" onClick={() => setOpen(!open)}>
        <div className="budget-id">
          <div className="td-mono" style={{fontSize: 11.5, color: "var(--ink-3)"}}>{obj.code}</div>
          <div className="cell-name">{obj.name}</div>
          <div className="cell-sub">договір {window.formatMoney(contract.total)} ₴</div>
        </div>

        <div className="budget-plan-fact">
          <div className="bpf-row">
            <span className="bpf-label">План</span>
            <span className="bpf-val">{window.formatMoney(plannedTotal)} ₴</span>
          </div>
          <div className="bpf-row">
            <span className="bpf-label">Факт</span>
            <span className="bpf-val num-bold">{window.formatMoney(factTotal)} ₴</span>
          </div>
          <div className="bpf-bar">
            <div className="bpf-bar-track">
              <div className={`bpf-bar-fill ${isOver ? "is-over" : isWarning ? "is-warn" : ""}`}
                style={{width: Math.min(factPctOfPlan, 100) + "%"}}></div>
              {factPctOfPlan > 100 && (
                <div className="bpf-bar-over" style={{width: (factPctOfPlan - 100) + "%"}}></div>
              )}
            </div>
            <span className="bpf-bar-pct">{Math.round(factPctOfPlan)}%</span>
          </div>
        </div>

        <div className="budget-margin">
          <div className="bpf-label">Маржа</div>
          <div className="budget-margin-val" style={{color: marginFact > 0 ? "var(--c-green-deep)" : "var(--late)"}}>
            {window.formatMoney(marginFact)} <span>₴</span>
          </div>
          <div className="bpf-label" style={{marginTop: 2}}>
            {Math.round(marginFact / contract.total * 100)}% від договору
          </div>
        </div>

        <button className="obj-card-toggle">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s"}}>
            <path d="M3 5L7 9L11 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>

      {open && (
        <div className="budget-detail">
          <table className="data-table compact-table">
            <thead>
              <tr>
                <th>Стаття</th>
                <th className="num-col">Запланувалось</th>
                <th className="num-col">Витрачено</th>
                <th className="num-col">Залишок</th>
                <th className="num-col">% від плану</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <BudgetLine name="Оплата праці (ОП)" tag="ОП" planned={plannedLabor} fact={factLabor} hint="з timesheet команди × ставки" />
              <BudgetLine name="Адміністративні витрати" tag="АДМ" planned={plannedAdm} fact={factAdm} hint={`частка ${window.OVERHEAD_RATES.admPct}% від ОП`} />
              <BudgetLine name="Загальновиробничі" tag="ЗВВ" planned={plannedZvv} fact={factZvv} hint={`частка ${window.OVERHEAD_RATES.zvvPct}% + прямі витрати`} />
              <tr className="budget-total-row">
                <td><b>Усього</b></td>
                <td className="num-col"><b>{window.formatMoney(plannedTotal)} ₴</b></td>
                <td className="num-col"><b>{window.formatMoney(factTotal)} ₴</b></td>
                <td className="num-col" style={{color: varAbs > 0 ? "var(--late)" : "var(--c-green-deep)"}}>
                  <b>{varAbs > 0 ? "−" : "+"}{window.formatMoney(Math.abs(varAbs))} ₴</b>
                </td>
                <td className="num-col">
                  <b style={{color: isOver ? "var(--late)" : isGood ? "var(--c-green-deep)" : "var(--ink)"}}>
                    {Math.round(factPctOfPlan)}%
                  </b>
                </td>
                <td></td>
              </tr>
            </tbody>
          </table>
          <div className="budget-actions">
            <button className="btn">Звіт по витратах</button>
            <button className="btn">Деталізація</button>
            <button className="btn btn-primary" style={{marginLeft: "auto"}}>Закрити період</button>
          </div>
        </div>
      )}
    </div>
  );
}

function BudgetLine({ name, tag, planned, fact, hint }) {
  const pct = (fact / planned) * 100;
  const isOver = pct > 100;
  const remaining = planned - fact;

  return (
    <tr>
      <td>
        <div style={{display: "flex", alignItems: "center", gap: 10}}>
          <span className={`empl-chip empl-${tag === "ОП" ? "staff" : tag === "АДМ" ? "part" : "contractor"}`}>{tag}</span>
          <div>
            <div className="cell-name">{name}</div>
            <div className="cell-sub">{hint}</div>
          </div>
        </div>
      </td>
      <td className="num-col">{window.formatMoney(planned)} ₴</td>
      <td className="num-col num-bold">{window.formatMoney(fact)} ₴</td>
      <td className="num-col" style={{color: remaining < 0 ? "var(--late)" : "var(--ink-2)"}}>
        {remaining > 0 ? window.formatMoney(remaining) : "−" + window.formatMoney(Math.abs(remaining))} ₴
      </td>
      <td className="num-col" style={{color: isOver ? "var(--late)" : pct > 90 ? "var(--ink)" : "var(--ink-2)"}}>
        {Math.round(pct)}%
      </td>
      <td style={{width: 130}}>
        <div className="load-bar">
          <span className="load-bar-val" style={{minWidth: 0}}>{Math.round(pct)}%</span>
          <div className="load-bar-track">
            <div className={`load-bar-fill ${isOver ? "is-high" : ""}`} style={{width: Math.min(pct, 100) + "%"}}></div>
          </div>
        </div>
      </td>
    </tr>
  );
}

// ============ РОЛІ ============
function RolesPage({ role }) {
  const roles = window.DATA.ROLES;
  const team = window.DATA.TEAM;
  const cat = window.PERMISSIONS_CATALOG;
  const [openId, setOpenId] = React.useState(null);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Ролі та права доступу</h1>
        <div className="page-sub">
          <span>{roles.length} {window.plural(roles.length, "роль", "ролі", "ролей")}</span>
          <span className="dot"></span>
          <span>хто що бачить і може робити</span>
        </div>
      </div>

      <div className="hint-box">
        <b>Як це працює:</b> кожен співробітник має одну з ролей. Роль визначає, які модулі він бачить,
        які дані може редагувати, видаляти, експортувати. Директор має повний доступ; інші — обмежений
        за принципом «потрібно знати».
      </div>

      <div className="roles-grid">
        {roles.map(r => {
          const members = r.members.map(id => window.getTeam(id)).filter(Boolean);
          return (
            <div key={r.id} className="role-card" onClick={() => setOpenId(r.id)}>
              <div className="role-card-head">
                <div className="role-icon" style={{background: `${r.color}20`, color: r.color}}><window.Ico e={r.icon} /></div>
                <div style={{flex: 1, minWidth: 0}}>
                  <div className="role-name">{r.label}</div>
                  <div className="role-desc">{r.description}</div>
                </div>
              </div>

              <div className="role-permissions-summary">
                {Object.entries(r.permissions).map(([key, val]) => (
                  <div key={key} className="role-perm-item">
                    <span className="role-perm-label">{
                      key === "read" ? "Перегляд" :
                      key === "write" ? "Редагування" :
                      key === "delete" ? "Видалення" :
                      key === "export" ? "Експорт" : key
                    }</span>
                    <span className="role-perm-val">
                      {val === "*" ? "Усе" : Array.isArray(val) ? `${val.length} ${window.plural(val.length, "модуль", "модулі", "модулів")}` : "—"}
                    </span>
                  </div>
                ))}
              </div>

              <div className="role-members">
                <div className="role-members-label">Призначено</div>
                {members.length > 0
                  ? <div className="avatar-stack">
                      {members.slice(0, 4).map((m, i) => (
                        <span key={m.id} className="av" style={{zIndex: 10 - i}}>{m.initials[0]}</span>
                      ))}
                      {members.length > 4 && <span className="av av-more">+{members.length - 4}</span>}
                    </div>
                  : <span style={{fontSize: 12, color: "var(--ink-4)"}}>нікого</span>
                }
              </div>
            </div>
          );
        })}
      </div>

      {openId && <RolePermissionsModal role={roles.find(r => r.id === openId)} catalog={cat} onClose={() => setOpenId(null)} />}
    </div>
  );
}

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

  const hasAccess = (group) => role.permissions.read === "*" || (Array.isArray(role.permissions.read) && role.permissions.read.includes(group));

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <aside className="drawer" style={{width: "min(720px, 96vw)"}}>
        <div className="drawer-head">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="role-icon" style={{background: `${role.color}20`, color: role.color, width: 28, height: 28, fontSize: 14}}><window.Ico e={role.icon} /></div>
          <span style={{fontSize: 13, fontWeight: 600}}>{role.label}</span>
        </div>
        <div className="drawer-body">
          <div style={{fontSize: 13, color: "var(--ink-2)", marginBottom: 20}}>{role.description}</div>

          <div className="drawer-section">
            <div className="drawer-section-h">Доступ до модулів</div>
            <div className="perm-matrix">
              <div className="perm-matrix-head">
                <span></span>
                <span>Перегляд</span>
                <span>Редагування</span>
                <span>Видалення</span>
                <span>Експорт</span>
              </div>
              {catalog.map(grp => (
                <div key={grp.id} className="perm-matrix-section">
                  <div className="perm-matrix-group">{grp.group}</div>
                  {grp.items.map(item => {
                    const isAll = role.permissions.read === "*";
                    const hasRead = isAll || (Array.isArray(role.permissions.read) && (role.permissions.read.includes(grp.id) || role.permissions.read.includes(item.id)));
                    const hasWrite = role.permissions.write === "*" || (Array.isArray(role.permissions.write) && (role.permissions.write.includes(grp.id) || role.permissions.write.includes(item.id)));
                    const hasDelete = role.permissions.delete === "*" || (Array.isArray(role.permissions.delete) && (role.permissions.delete.includes(grp.id) || role.permissions.delete.includes(item.id)));
                    const hasExport = role.permissions.export === "*" || (Array.isArray(role.permissions.export) && (role.permissions.export.includes(grp.id) || role.permissions.export.includes(item.id)));
                    return (
                      <div key={item.id} className="perm-matrix-row">
                        <span className="perm-item-name">{item.label}</span>
                        <PermDot on={hasRead} />
                        <PermDot on={hasWrite} />
                        <PermDot on={hasDelete} />
                        <PermDot on={hasExport} />
                      </div>
                    );
                  })}
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="drawer-foot">
          <button className="btn btn-primary">Редагувати права</button>
          <button className="btn">Дублювати роль</button>
        </div>
      </aside>
    </>
  );
}

function PermDot({ on }) {
  return on
    ? <span className="perm-dot is-on">✓</span>
    : <span className="perm-dot">·</span>;
}

// ============ КОМПАНІЯ ============
function CompanyPage({ role }) {
  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Налаштування компанії</h1>
        <div className="page-sub">
          <span>реквізити, печатка, КЕП, підписи</span>
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi"><div className="kpi-label">Назва</div><div className="kpi-value" style={{fontSize: 16}}>ТОВ «Укрбудпроєкт»</div></div>
        <div className="kpi"><div className="kpi-label">ЄДРПОУ</div><div className="kpi-value" style={{fontSize: 18}}>42158963</div></div>
        <div className="kpi"><div className="kpi-label">Працівників</div><div className="kpi-value">{window.DATA.TEAM.length}</div></div>
        <div className="kpi"><div className="kpi-label">Активних об'єктів</div><div className="kpi-value">{window.DATA.OBJECTS.length}</div></div>
      </div>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Реквізити</h2>
          <a className="section-action" href="#">Редагувати →</a>
        </div>
        <dl className="info-grid">
          <div><dt>Повна назва</dt><dd>Товариство з обмеженою відповідальністю «Укрбудпроєкт»</dd></div>
          <div><dt>ЄДРПОУ</dt><dd className="td-mono">42158963</dd></div>
          <div><dt>Юридична адреса</dt><dd>04070, м. Київ, вул. Хорива 12, оф. 305</dd></div>
          <div><dt>Поштова адреса</dt><dd>Та сама</dd></div>
          <div><dt>Директор</dt><dd>Кравченко Олена Михайлівна</dd></div>
          <div><dt>Email</dt><dd><a className="td-link" href="mailto:info@ukrbudproiekt.ua">info@ukrbudproiekt.ua</a></dd></div>
          <div><dt>Сайт</dt><dd>ukrbudproiekt.ua</dd></div>
          <div><dt>Телефон</dt><dd className="td-mono">+380 67 412 38 90</dd></div>
        </dl>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Банківські реквізити</h2>
          <a className="section-action" href="#">Усі рахунки →</a>
        </div>
        <div className="account-grid">
          {window.DATA.CASH_ACCOUNTS.slice(0, 2).map(a => (
            <div key={a.id} className={`account-card ${a.primary ? "is-primary" : ""}`}>
              <div className="account-head">
                <div>
                  <div className="account-label">{a.label}</div>
                  <div className="account-bank">{a.bank}</div>
                </div>
                {a.primary && <span className="empl-chip empl-staff">основний</span>}
              </div>
              <div className="account-iban">{a.iban}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">КЕП і підписи</h2>
          <a className="section-action" href="#">Дія.Підпис →</a>
        </div>
        <div className="ke-grid">
          <div className="ke-card">
            <div className="ke-icon"><window.Ico name="lock" /></div>
            <div style={{flex: 1}}>
              <div className="cell-name">КЕП директора</div>
              <div className="cell-sub">Кравченко О.М. · діє до 12.03.2027</div>
            </div>
            <span className="status-tag tone-live">активний</span>
          </div>
          <div className="ke-card">
            <div className="ke-icon"><window.Ico name="shield" /></div>
            <div style={{flex: 1}}>
              <div className="cell-name">Печатка ТОВ</div>
              <div className="cell-sub">Електронна · для договорів</div>
            </div>
            <span className="status-tag tone-live">активна</span>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Документи компанії</h2>
        </div>
        <table className="data-table compact-table">
          <tbody>
            <tr><td><b>Витяг з ЄДР</b></td><td>отримано 12.03.2024</td><td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Відкрити в Drive ↗</button></td></tr>
            <tr><td><b>Статут</b></td><td>чинна редакція</td><td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Відкрити в Drive ↗</button></td></tr>
            <tr><td><b>Ліцензія на проєктування</b></td><td>діє до 15.08.2028</td><td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Відкрити в Drive ↗</button></td></tr>
            <tr><td><b>Свідоцтво платника ЄП</b></td><td>3 група, 5%</td><td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Відкрити в Drive ↗</button></td></tr>
          </tbody>
        </table>
      </section>
    </div>
  );
}

window.LeadsPage = LeadsPage;
window.BudgetsPage = BudgetsPage;
window.RolesPage = RolesPage;
window.CompanyPage = CompanyPage;
