// correspondence-page.jsx — Журнал кореспонденції (вхідна / вихідна).
// Ведеться електронно, друкується в кінці року. Колонки за зразком + посилання на гугл-диск.
function CorrespondencePage({ role }) {
  const SYS = window.SYS_DATE || "2026-06-21";
  const curYear = parseInt(SYS.slice(0, 4), 10);
  const [direction, setDirection] = React.useState("in");
  const [year, setYear] = React.useState(curYear);
  const [items, setItems] = React.useState([]);
  const [editing, setEditing] = React.useState(null);
  const canEdit = role === "director" || role === "accountant";
  const dots = (iso) => (window.dateDots ? window.dateDots(iso) : (iso || ""));

  const reload = React.useCallback(() => {
    if (!(window.API && window.API.list)) return;
    // Рік фільтруємо на клієнті: колонка year — int, а у фільтрі бекенда значення йде рядком → 500.
    window.API.list("correspondence", { direction })
      .then((r) => setItems((r || []).filter((x) => x.year === year).slice().sort((a, b) => (a.seq || 0) - (b.seq || 0))))
      .catch(() => {});
  }, [direction, year]);
  React.useEffect(() => { reload(); }, [reload]);

  const years = []; for (let y = curYear; y >= 2022; y--) years.push(y);
  const isIn = direction === "in";

  const startNew = () => {
    const nextSeq = items.reduce((m, x) => Math.max(m, x.seq || 0), 0) + 1;
    setEditing({ direction, year, seq: nextSeq, regDate: SYS.slice(0, 10), regIndex: "", docDate: "", docNo: "", counterparty: "", summary: "", notes: "", driveUrl: "" });
  };
  const save = () => {
    const e = editing;
    window.API.save("correspondence", e.id || null, { ...e, direction, year })
      .then(() => { setEditing(null); reload(); })
      .catch(() => alert("Не вдалося зберегти запис."));
  };
  const remove = (id) => {
    if (!window.confirm("Видалити цей запис журналу?")) return;
    window.API.del("/correspondence/" + id).then(reload).catch(() => {});
  };

  const set = (k, v) => setEditing((e) => ({ ...e, [k]: v }));

  return (
    <div className="page corr-page">
      <CorrStyles />
      <div className="page-head no-print">
        <h1 className="page-h1">Журнал кореспонденції</h1>
        <div className="page-sub"><span>{isIn ? "Вхідна документація" : "Вихідна документація"}</span><span className="dot"></span><span>{year} рік</span><span className="dot"></span><span>{items.length} записів</span></div>
      </div>

      {/* Тулбар */}
      <div className="toolbar no-print" style={{ alignItems: "center", flexWrap: "wrap", gap: 12, marginBottom: 14 }}>
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${isIn ? "is-active" : ""}`} onClick={() => { setDirection("in"); setEditing(null); }}>Вхідна</button>
          <button className={`filter-pill-item ${!isIn ? "is-active" : ""}`} onClick={() => { setDirection("out"); setEditing(null); }}>Вихідна</button>
        </div>
        <select className="input" style={{ maxWidth: 130, fontSize: 13 }} value={year} onChange={(e) => { setYear(parseInt(e.target.value, 10)); setEditing(null); }}>
          {years.map((y) => <option key={y} value={y}>{y} рік</option>)}
        </select>
        <span style={{ marginLeft: "auto" }}></span>
        {canEdit && <button className="btn btn-primary" onClick={startNew}>+ Додати запис</button>}
        <button className="btn" onClick={() => window.print()}>Друк журналу</button>
      </div>

      {/* Форма запису */}
      {editing && (
        <div className="corr-form no-print">
          <div className="corr-form-h">{editing.id ? "Редагувати запис" : `Новий запис № ${editing.seq}`}</div>
          <div className="corr-form-grid">
            <label>Дата {isIn ? "надходження" : "реєстрації"}<input type="date" className="input" value={editing.regDate || ""} onChange={(e) => set("regDate", e.target.value)} /></label>
            <label>Реєстраційний індекс<input className="input" placeholder={isIn ? "напр. ВХ-116" : "напр. ВИХ-05-..."} value={editing.regIndex || ""} onChange={(e) => set("regIndex", e.target.value)} /></label>
            <label>Дата {isIn ? "вхідного" : "вихідного"} документа<input type="date" className="input" value={editing.docDate || ""} onChange={(e) => set("docDate", e.target.value)} /></label>
            <label>№ {isIn ? "вхідного" : "вихідного"} документа<input className="input" value={editing.docNo || ""} onChange={(e) => set("docNo", e.target.value)} /></label>
            <label className="corr-wide">{isIn ? "Найменування контрагента (відправник)" : "Адресат (кому)"}<input className="input" value={editing.counterparty || ""} onChange={(e) => set("counterparty", e.target.value)} /></label>
            <label className="corr-wide">Короткий зміст документа<textarea className="input" rows={2} value={editing.summary || ""} onChange={(e) => set("summary", e.target.value)} /></label>
            <label className="corr-wide">Примітки<input className="input" value={editing.notes || ""} onChange={(e) => set("notes", e.target.value)} /></label>
            <label className="corr-wide">Посилання на Google Drive<input className="input" placeholder="https://drive.google.com/..." value={editing.driveUrl || ""} onChange={(e) => set("driveUrl", e.target.value)} /></label>
          </div>
          <div className="corr-form-actions">
            <button className="btn" onClick={() => setEditing(null)}>Скасувати</button>
            <button className="btn btn-primary" onClick={save}>Зберегти</button>
          </div>
        </div>
      )}

      {/* Таблиця-журнал */}
      <div className="corr-print-title only-print">
        Журнал {isIn ? "вхідної" : "вихідної"} документації ТОВ «УКРБУДПРОЄКТ» за {year} рік
      </div>
      <div className="corr-scroll">
        <table className="corr-table">
          <thead>
            <tr>
              <th style={{ width: 38 }}>№ з/п</th>
              <th style={{ width: 120 }}>Дата {isIn ? "надходження" : "реєстрації"}, індекс</th>
              <th style={{ width: 120 }}>Дата та № {isIn ? "вхідного" : "вихідного"} документа</th>
              <th style={{ width: 180 }}>{isIn ? "Найменування контрагента" : "Адресат"}</th>
              <th>Короткий зміст</th>
              <th style={{ width: 130 }}>Примітки</th>
              <th style={{ width: 90 }}>Гугл-диск</th>
              {canEdit && <th className="no-print" style={{ width: 70 }}></th>}
            </tr>
          </thead>
          <tbody>
            {items.length === 0 && <tr><td colSpan={canEdit ? 8 : 7} className="corr-empty">Записів немає.</td></tr>}
            {items.map((x) => (
              <tr key={x.id}>
                <td className="corr-c">{x.seq}</td>
                <td>{dots(x.regDate)}{x.regIndex ? <><br /><span className="corr-mut">{x.regIndex}</span></> : null}</td>
                <td>{dots(x.docDate)}{x.docNo ? <><br /><span className="corr-mut">№ {x.docNo}</span></> : null}</td>
                <td>{x.counterparty}</td>
                <td className="corr-sum">{x.summary}</td>
                <td>{x.notes}</td>
                <td>{x.driveUrl ? <a href={x.driveUrl} target="_blank" rel="noopener noreferrer">відкрити ↗</a> : <span className="corr-mut">—</span>}</td>
                {canEdit && <td className="no-print corr-acts">
                  <button className="corr-mini" title="Редагувати" onClick={() => setEditing(x)}>✎</button>
                  <button className="corr-mini" title="Видалити" onClick={() => remove(x.id)}>✕</button>
                </td>}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.CorrespondencePage = CorrespondencePage;

function CorrStyles() {
  return (
    <style>{`
      .corr-scroll { overflow-x: auto; }
      .corr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
      .corr-table th, .corr-table td { border: 1px solid var(--line, #dfe3e7); padding: 6px 8px; vertical-align: top; text-align: left; }
      .corr-table th { background: var(--bg-elev, #f6f8f9); font-weight: 600; font-size: 11.5px; color: var(--ink-2, #3a4150); }
      .corr-table td { color: var(--ink, #161B29); }
      .corr-c { text-align: center; }
      .corr-mut { color: var(--ink-3, #6b7280); font-size: 11px; }
      .corr-sum { line-height: 1.4; }
      .corr-empty { text-align: center; color: var(--ink-3, #6b7280); padding: 18px; }
      .corr-acts { white-space: nowrap; text-align: center; }
      .corr-mini { border: 1px solid var(--line, #d7dde2); background: #fff; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; margin: 0 1px; color: var(--ink-2, #3a4150); }
      .corr-mini:hover { background: #f0f4f6; }
      .corr-form { border: 1px solid var(--line, #dfe3e7); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; background: var(--bg-elev, #fff); }
      .corr-form-h { font-weight: 650; margin-bottom: 10px; color: var(--ink, #161B29); }
      .corr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
      .corr-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3, #6b7280); }
      .corr-form-grid .corr-wide { grid-column: 1 / -1; }
      .corr-form-grid .input { font-size: 13px; }
      .corr-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
      .corr-print-title { display: none; }

      @media print {
        body * { visibility: hidden !important; }
        .corr-page, .corr-page * { visibility: visible !important; }
        .corr-page { position: absolute; inset: 0; }
        .no-print { display: none !important; }
        .only-print { display: block !important; }
        .corr-print-title { display: block; text-align: center; font-weight: 700; font-size: 13px; margin: 0 0 10px; }
        .corr-table { font-size: 9.5px; }
        .corr-table th, .corr-table td { padding: 3px 4px; }
        .corr-table th { background: #eee !important; -webkit-print-color-adjust: exact; }
        .corr-scroll { overflow: visible !important; }
        @page { size: A4 landscape; margin: 12mm; }
      }
    `}</style>
  );
}