// vat-page.jsx — Облік ПДВ: реєстр податкових накладних, зобов'язання vs кредит,
// незакриті позиції, ПДВ до сплати. Ручний ввід + гачок під інтеграцію (Вчасно/ДПС).

function VatStatusTag({ status }) {
  const s = window.VAT_INV_STATUS[status];
  if (!s) return null;
  return <span className={`status-tag tone-${s.tone}`}>{s.label}</span>;
}

function VatAddBar({ periodId, onAdd, onClose }) {
  const [kind, setKind] = React.useState("in");
  const [f, setF] = React.useState({ date: periodId + "-", number: "", party: "", edrpou: "", base: "" });
  const set = (k, v) => setF(prev => ({ ...prev, [k]: v }));
  const statusOpts = kind === "out"
    ? [["registered", "Зареєстрована"], ["pending", "Очікує реєстрації"], ["overdue", "Прострочена"]]
    : [["credit", "У кредит"], ["awaiting", "Очікує постачальника"], ["no_vat", "Без ПДВ (ЄП)"], ["blocked", "Заблокована"]];
  const [status, setStatus] = React.useState(statusOpts[0][0]);
  React.useEffect(() => { setStatus(statusOpts[0][0]); }, [kind]);

  const base = parseFloat(String(f.base).replace(/\s/g, "").replace(",", "."));
  const valid = f.number.trim() && f.party.trim() && !isNaN(base) && base > 0;
  const submit = () => {
    if (!valid) return;
    onAdd({
      id: "x-" + Date.now(), period: periodId, kind,
      date: f.date && f.date.length > 7 ? f.date : periodId + "-15",
      number: f.number.trim(), party: f.party.trim(), edrpou: f.edrpou.trim(),
      base: Math.round(base), status, basis: "Ручний ввід", obj: null,
    });
    onClose();
  };

  return (
    <div className="vat-addbar">
      <div className="vat-addbar-row">
        <div className="filter-pill" style={{ flexShrink: 0 }}>
          <button className={`filter-pill-item ${kind === "in" ? "is-active" : ""}`} onClick={() => setKind("in")}>Вхідна (кредит)</button>
          <button className={`filter-pill-item ${kind === "out" ? "is-active" : ""}`} onClick={() => setKind("out")}>Вихідна (зобов'язання)</button>
        </div>
        <button className="vat-addbar-x" onClick={onClose}><window.Ico name="plus" style={{ transform: "rotate(45deg)" }} /></button>
      </div>
      <div className="vat-addbar-grid">
        <label>Дата<input type="date" value={f.date} onChange={e => set("date", e.target.value)} /></label>
        <label>№ накладної<input value={f.number} onChange={e => set("number", e.target.value)} placeholder="напр. 15" /></label>
        <label>Контрагент<input value={f.party} onChange={e => set("party", e.target.value)} placeholder="назва" /></label>
        <label>ЄДРПОУ<input value={f.edrpou} onChange={e => set("edrpou", e.target.value)} placeholder="код" /></label>
        <label>База без ПДВ, ₴<input value={f.base} onChange={e => set("base", e.target.value)} placeholder="0" inputMode="numeric" /></label>
        <label>Статус
          <select value={status} onChange={e => setStatus(e.target.value)}>
            {statusOpts.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
          </select>
        </label>
      </div>
      <div className="vat-addbar-foot">
        <span className="vat-addbar-calc">ПДВ 20%: <b>{!isNaN(base) && base > 0 ? window.formatMoney(window.vatOf(Math.round(base))) : "—"} ₴</b></span>
        <button className="btn" onClick={onClose}>Скасувати</button>
        <button className="btn btn-primary" disabled={!valid} onClick={submit}>Додати накладну</button>
      </div>
    </div>
  );
}

function VatPage({ role }) {
  const periods = window.VAT_PERIODS;
  const [periodId, setPeriodId] = React.useState(periods[0].id);
  const [filter, setFilter] = React.useState("all"); // all | out | in
  const [extra, setExtra] = React.useState([]);
  const [adding, setAdding] = React.useState(false);

  const period = periods.find(p => p.id === periodId) || periods[0];
  const extraForPeriod = extra.filter(r => r.period === periodId);
  const sum = window.vatSummary(periodId, extraForPeriod);

  let rows = sum.rows;
  if (filter !== "all") rows = rows.filter(r => r.kind === filter);
  rows = [...rows].sort((a, b) => (a.date < b.date ? -1 : 1));

  const m = window.formatMoney;
  const isPaid = period.status === "paid";

  // незакриті позиції
  const alerts = [];
  if (sum.cntUnreg > 0) alerts.push({ tone: "late", icon: "alert", title: `${sum.cntUnreg} вихідних ПН не зареєстровано в ЄРПН`, sub: `Зобов'язання на ${m(sum.outputUnreg)} ₴ ПДВ. Ризик штрафу і блокування податкового кредиту в покупця — зареєструвати в межах строку.` });
  if (sum.cntStuck > 0) alerts.push({ tone: "amber", icon: "clock", title: `${sum.cntStuck} вхідних ПН очікують реєстрації постачальником`, sub: `Кредит ${m(sum.inputStuck)} ₴ поки недоступний. Після реєстрації ПДВ до сплати зменшиться на цю суму.` });
  if (!isPaid) alerts.push({ tone: sum.payable > 0 ? "amber" : "live", icon: "coins", title: `ПДВ до сплати за ${period.label}: ${m(sum.payable)} ₴`, sub: `Граничний строк сплати — ${window.formatDate(period.payDue)}. Декларацію ще не подано.` });

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">ПДВ</h1>
        <div className="page-sub">
          <span>ТОВ · загальна система · платник ПДВ 20%</span>
          <span className="dot"></span>
          <span>{period.label}</span>
          <span className="dot"></span>
          {isPaid
            ? <span style={{ color: "var(--c-green-deep)" }}><b>Сплачено</b> {window.formatDate(period.paidAt)}</span>
            : <span style={{ color: "var(--ink-2)" }}>Період відкритий</span>}
        </div>
      </div>

      {/* Підсумок */}
      <div className="kpi-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <div className="kpi">
          <div className="kpi-label">Податкове зобов'язання</div>
          <div className="kpi-value">{m(sum.output)} <span style={{ fontSize: 15, color: "var(--ink-3)" }}>₴</span></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)" }}>{m(sum.input)} <span style={{ fontSize: 15, color: "var(--ink-3)" }}>₴</span></div>
          <div className="kpi-sub">вхідний ПДВ {sum.inputStuck > 0 ? `· ще ${m(sum.inputStuck)} ₴ завис` : "(зареєстровані)"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">ПДВ до сплати</div>
          <div className="kpi-value" style={{ color: sum.payable > 0 ? "var(--ink)" : "var(--c-green-deep)" }}>{m(sum.payable)} <span style={{ fontSize: 15, color: "var(--ink-3)" }}>₴</span></div>
          <div className="kpi-sub">зобов'язання − кредит</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Незакрите</div>
          <div className="kpi-value" style={{ color: (sum.cntUnreg + sum.cntStuck) > 0 ? "var(--late)" : "var(--c-green-deep)" }}>{sum.cntUnreg + sum.cntStuck}</div>
          <div className="kpi-sub">{(sum.cntUnreg + sum.cntStuck) > 0 ? "накладних потребують дії" : "усі накладні в порядку"}</div>
        </div>
      </div>

      {/* Незакриті позиції */}
      {alerts.length > 0 && (
        <section className="section" style={{ marginTop: 24 }}>
          <div className="section-head"><h2 className="section-h2">Незакриті позиції</h2></div>
          <div className="vat-alerts">
            {alerts.map((a, i) => (
              <div key={i} className={`vat-alert tone-${a.tone}`}>
                <span className="vat-alert-ic"><window.Ico name={a.icon} /></span>
                <div className="vat-alert-text">
                  <div className="vat-alert-title">{a.title}</div>
                  <div className="vat-alert-sub">{a.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Тулбар реєстру */}
      <div className="toolbar" style={{ marginTop: 26, alignItems: "center", flexWrap: "wrap", gap: 12 }}>
        <div className="filter-pill" role="tablist">
          {[["all", "Усі"], ["out", "Вихідні"], ["in", "Вхідні"]].map(([id, l]) => (
            <button key={id} className={`filter-pill-item ${filter === id ? "is-active" : ""}`} onClick={() => setFilter(id)}>{l}</button>
          ))}
        </div>
        <div className="filter-pill" role="tablist" style={{ marginLeft: 4 }}>
          {periods.map(p => (
            <button key={p.id} className={`filter-pill-item ${periodId === p.id ? "is-active" : ""}`} onClick={() => { setPeriodId(p.id); setAdding(false); }}>{p.label}</button>
          ))}
        </div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
          <button className="btn" title="Інтеграція з'явиться на бекенді"><window.Ico name="download" /> Імпорт з Вчасно / ДПС</button>
          {!isPaid && <button className="btn btn-primary" onClick={() => setAdding(a => !a)}><window.Ico name="plus" /> Нова накладна</button>}
        </div>
      </div>

      {adding && <VatAddBar periodId={periodId} onAdd={(r) => setExtra(prev => [...prev, r])} onClose={() => setAdding(false)} />}

      {/* Реєстр податкових накладних */}
      <table className="data-table vat-table" style={{ marginTop: 14 }}>
        <thead>
          <tr>
            <th>Тип</th>
            <th>Дата</th>
            <th>№ ПН</th>
            <th>Контрагент</th>
            <th>Підстава</th>
            <th className="num-col">База</th>
            <th className="num-col">ПДВ 20%</th>
            <th className="num-col">Сума з ПДВ</th>
            <th>Статус</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(r => {
            const vat = window.vatOf(r.base);
            return (
              <tr key={r.id}>
                <td><span className={`vat-kind vat-kind-${r.kind}`}>{r.kind === "out" ? "Вих" : "Вх"}</span></td>
                <td className="td-mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{window.formatDate(r.date)}</td>
                <td className="td-mono" style={{ fontSize: 12.5 }}>{r.number}</td>
                <td>
                  <div className="cell-name">{r.party}</div>
                  <div className="cell-sub td-mono">{r.edrpou}</div>
                </td>
                <td style={{ fontSize: 12, color: "var(--ink-2)", maxWidth: 240 }}>{r.basis}</td>
                <td className="num-col">{m(r.base)}</td>
                <td className="num-col" style={{ color: r.status === "no_vat" ? "var(--ink-4)" : "var(--ink-2)" }}>{r.status === "no_vat" ? "—" : m(vat)}</td>
                <td className="num-col num-bold">{m(r.base + (r.status === "no_vat" ? 0 : vat))}</td>
                <td><VatStatusTag status={r.status} /></td>
              </tr>
            );
          })}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan={5}><b>Усього {filter === "all" ? "" : filter === "out" ? "вихідних" : "вхідних"} · {rows.length} ПН</b></td>
            <td className="num-col"><b>{m(rows.reduce((s, r) => s + r.base, 0))}</b></td>
            <td className="num-col"><b>{m(rows.reduce((s, r) => s + (r.status === "no_vat" ? 0 : window.vatOf(r.base)), 0))}</b></td>
            <td className="num-col"></td>
            <td></td>
          </tr>
        </tfoot>
      </table>

      <div className="hint-box" style={{ marginTop: 18 }}>
        <b>Як це працює.</b> Зобов'язання виникає за датою першої події (відвантаження/оплата), незалежно від реєстрації ПН.
        У кредит потрапляють лише <b>зареєстровані</b> вхідні накладні — від постачальників без ПДВ (єдиний податок) кредиту немає.
        ПДВ до сплати = зобов'язання − кредит. Реєстр можна вести вручну вже зараз; підтягування з Вчасно / кабінету ДПС — на бекенді.
        Ці суми живлять рядок ПДВ у звіті P&amp;L.
      </div>
    </div>
  );
}

window.VatPage = VatPage;