// orders-page.jsx — Кадрові накази: журнал реєстрації + майстер створення.
// Нумерація НК-0N-2026. Друк через window.OrderPrintDoc.

function OrdStatusTag({ status }) {
  const s = window.ORDER_STATUS[status] || window.ORDER_STATUS.draft;
  return <span className={`status-tag tone-${s.tone}`}>{s.label}</span>;
}

// ——— дрібні поля форми ———
function OWField({ label, children, wide }) {
  return (
    <label className={`ow-field ${wide ? "ow-wide" : ""}`}>
      <span className="ow-label">{label}</span>
      {children}
    </label>
  );
}

function OrderWizard({ onClose }) {
  const team = window.DATA.TEAM;
  const staff = team.filter(p => p.employment !== "contractor");
  const SYS = window.SYS_DATE || "2026-05-29";
  const [step, setStep] = React.useState(1);
  const [type, setType] = React.useState(null);
  const firstPid = staff[0] ? staff[0].id : "";
  const [pid, setPid] = React.useState(firstPid);
  const [basis, setBasis] = React.useState("");
  const [f, setF] = React.useState({});
  const set = (k, v) => setF(prev => ({ ...prev, [k]: v }));

  // дефолти полів під тип + обрану людину
  const seedFields = (tp, personId) => {
    const p = window.getTeam(personId) || {};
    if (tp === "hire") return { name: "", position: "", dept: "Проєктний відділ", salary: 30000, partRate: 1, from: SYS, probation: 3, contract: "Безстроковий трудовий договір" };
    if (tp === "dismiss") return { date: SYS, ground: "art38", compDays: p.vacationBalance || 0 };
    if (tp === "vacation") return { kind: "щорічну основну", days: 10, from: SYS, to: SYS, period: "за робочий рік 2025–2026" };
    if (tp === "bonus") return { mode: "amount", amount: 10000, percent: 20, reason: "за сумлінне виконання посадових обов'язків" };
    if (tp === "transfer") return { posOld: p.positionOfficial || p.role || "", posNew: "", salaryNew: (p.baseSalary || 0), from: SYS };
    return {};
  };
  const pickType = (tp) => { setType(tp); setF(seedFields(tp, pid)); setBasis(defaultBasis(tp)); setStep(2); };
  const defaultBasis = (tp) => ({
    hire: "Заява про прийняття на роботу, трудовий договір",
    dismiss: "Заява про звільнення за власним бажанням",
    vacation: "Заява, графік відпусток на 2026 р.",
    bonus: "Подання директора",
    transfer: "Заява / службова записка",
  }[tp] || "");
  // при зміні людини — перерахувати залежні дефолти
  const onPid = (id) => { setPid(id); if (type) setF(prev => ({ ...prev, ...((type === "transfer" || type === "dismiss") ? seedFields(type, id) : {}) })); };

  const valid = (() => {
    if (!type) return false;
    if (type === "hire") return f.name && f.name.trim() && f.position && f.position.trim();
    return !!pid;
  })();

  const submit = () => {
    const order = {
      id: "ord-" + Date.now(),
      no: window.nextOrderNo(),
      date: SYS,
      type,
      personId: type === "hire" ? null : pid,
      status: "draft",
      basis,
      f: { ...f },
    };
    if (type === "bonus") { if (f.mode === "amount") delete order.f.percent; else delete order.f.amount; }
    window.addOrder(order);
    onClose(order);
  };

  const num = window.formatMoney;

  return (
    <div className="ow-root">
      <div className="ow-backdrop" onClick={() => onClose(null)}></div>
      <div className="ow-modal">
        <div className="ow-head">
          <div>
            <div className="ow-title">Новий кадровий наказ</div>
            <div className="ow-sub">№ {window.nextOrderNo()} · {window.formatDate(SYS)}</div>
          </div>
          <button className="ow-x" onClick={() => onClose(null)}><window.Ico name="plus" style={{ transform: "rotate(45deg)" }} /></button>
        </div>

        {step === 1 && (
          <div className="ow-body">
            <div className="ow-step-label">Оберіть тип наказу</div>
            <div className="ow-types">
              {window.ORDER_TYPE_ORDER.map(tp => {
                const T = window.ORDER_TYPES[tp];
                return (
                  <button key={tp} className="ow-type" onClick={() => pickType(tp)}>
                    <span className="ow-type-ic"><window.Ico name={T.icon} /></span>
                    <span className="ow-type-label">{T.label}</span>
                    <span className="ow-type-arrow"><window.Ico name="arrowRight" /></span>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {step === 2 && type && (
          <div className="ow-body">
            <button className="ow-back" onClick={() => setStep(1)}>← інший тип</button>
            <div className="ow-step-label">{window.ORDER_TYPES[type].label}</div>

            <div className="ow-grid">
              {/* Працівник */}
              {type === "hire" ? (
                <React.Fragment>
                  <OWField label="ПІБ працівника" wide>
                    <input value={f.name || ""} onChange={e => set("name", e.target.value)} placeholder="Ім'я Прізвище" />
                  </OWField>
                  <OWField label="Посада"><input value={f.position || ""} onChange={e => set("position", e.target.value)} placeholder="напр. Інженер-проєктувальник" /></OWField>
                  <OWField label="Підрозділ"><input value={f.dept || ""} onChange={e => set("dept", e.target.value)} /></OWField>
                  <OWField label="Оклад, ₴/міс"><input type="number" value={f.salary} onChange={e => set("salary", +e.target.value)} /></OWField>
                  <OWField label="Ставка">
                    <select value={f.partRate} onChange={e => set("partRate", +e.target.value)}>
                      <option value={1}>Повна (1,0)</option>
                      <option value={0.5}>Половина (0,5)</option>
                      <option value={0.25}>Чверть (0,25)</option>
                    </select>
                  </OWField>
                  <OWField label="Дата прийняття"><input type="date" value={f.from} onChange={e => set("from", e.target.value)} /></OWField>
                  <OWField label="Випробування, міс">
                    <select value={f.probation} onChange={e => set("probation", +e.target.value)}>
                      <option value={0}>Без випробування</option>
                      <option value={1}>1 місяць</option>
                      <option value={2}>2 місяці</option>
                      <option value={3}>3 місяці</option>
                    </select>
                  </OWField>
                </React.Fragment>
              ) : (
                <OWField label="Працівник" wide>
                  <select value={pid} onChange={e => onPid(e.target.value)}>
                    {staff.map(p => <option key={p.id} value={p.id}>{p.name} — {p.positionOfficial || p.role}</option>)}
                  </select>
                </OWField>
              )}

              {/* Поля під тип */}
              {type === "dismiss" && (
                <React.Fragment>
                  <OWField label="Дата звільнення"><input type="date" value={f.date} onChange={e => set("date", e.target.value)} /></OWField>
                  <OWField label="Компенсація, к. дн."><input type="number" value={f.compDays} onChange={e => set("compDays", +e.target.value)} /></OWField>
                  <OWField label="Підстава (КЗпП)" wide>
                    <select value={f.ground} onChange={e => set("ground", e.target.value)}>
                      {window.DISMISS_GROUNDS.map(g => <option key={g.id} value={g.id}>{g.label}</option>)}
                    </select>
                  </OWField>
                </React.Fragment>
              )}

              {type === "vacation" && (
                <React.Fragment>
                  <OWField label="Вид відпустки" wide>
                    <select value={f.kind} onChange={e => set("kind", e.target.value)}>
                      <option value="щорічну основну">Щорічна основна</option>
                      <option value="додаткову">Додаткова</option>
                      <option value="без збереження заробітної плати">Без збереження ЗП</option>
                    </select>
                  </OWField>
                  <OWField label="Днів"><input type="number" value={f.days} onChange={e => set("days", +e.target.value)} /></OWField>
                  <OWField label="З"><input type="date" value={f.from} onChange={e => set("from", e.target.value)} /></OWField>
                  <OWField label="По"><input type="date" value={f.to} onChange={e => set("to", e.target.value)} /></OWField>
                  {(() => { const p = window.getTeam(pid); return p && p.vacationBalance != null
                    ? <div className="ow-note">Залишок відпустки: <b>{p.vacationBalance} к. дн.</b></div> : null; })()}
                </React.Fragment>
              )}

              {type === "bonus" && (
                <React.Fragment>
                  <OWField label="Вид">
                    <select value={f.mode} onChange={e => set("mode", e.target.value)}>
                      <option value="amount">Фіксована сума</option>
                      <option value="percent">% окладу</option>
                    </select>
                  </OWField>
                  {f.mode === "percent"
                    ? <OWField label="Відсоток, %"><input type="number" value={f.percent} onChange={e => set("percent", +e.target.value)} /></OWField>
                    : <OWField label="Сума, ₴"><input type="number" value={f.amount} onChange={e => set("amount", +e.target.value)} /></OWField>}
                  <OWField label="За що" wide><input value={f.reason || ""} onChange={e => set("reason", e.target.value)} /></OWField>
                </React.Fragment>
              )}

              {type === "transfer" && (
                <React.Fragment>
                  <OWField label="Стара посада" wide><input value={f.posOld || ""} onChange={e => set("posOld", e.target.value)} /></OWField>
                  <OWField label="Нова посада" wide><input value={f.posNew || ""} onChange={e => set("posNew", e.target.value)} placeholder="напр. Провідний інженер-проєктувальник" /></OWField>
                  <OWField label="Новий оклад, ₴"><input type="number" value={f.salaryNew} onChange={e => set("salaryNew", +e.target.value)} /></OWField>
                  <OWField label="З дати"><input type="date" value={f.from} onChange={e => set("from", e.target.value)} /></OWField>
                </React.Fragment>
              )}

              <OWField label="Підстава (документ)" wide>
                <input value={basis} onChange={e => setBasis(e.target.value)} />
              </OWField>
            </div>

            <div className="ow-foot">
              <span className="ow-foot-hint">Створиться чернетка — текст можна відредагувати у бланку перед друком.</span>
              <button className="btn" onClick={() => onClose(null)}>Скасувати</button>
              <button className="btn btn-primary" disabled={!valid} onClick={submit}>Сформувати наказ</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function OrdersPage({ role }) {
  const st = window.useOrders();
  const [wizard, setWizard] = React.useState(false);
  const [printOrder, setPrintOrder] = React.useState(null);
  const [filter, setFilter] = React.useState("all");
  const canEdit = role === "director" || role === "accountant";

  const list = [...st.list].sort((a, b) => (a.no < b.no ? 1 : -1));
  const shown = filter === "all" ? list : list.filter(o => o.type === filter);

  const byType = {};
  window.ORDER_TYPE_ORDER.forEach(t => byType[t] = list.filter(o => o.type === t).length);
  const drafts = list.filter(o => o.status === "draft").length;

  const sign = (o) => window.updateOrder(o.id, { status: "signed", ackDate: o.ackDate || window.SYS_DATE });

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Кадрові накази</h1>
        <div className="page-sub">
          <span>журнал реєстрації по особовому складу</span>
          <span className="dot"></span>
          <span>нумерація НК-0N-2026</span>
          <span className="dot"></span>
          <span>{list.length} наказів за рік{drafts > 0 ? ` · ${drafts} чернеток` : ""}</span>
        </div>
      </div>

      {/* Зведення по типах */}
      <div className="ord-typecards">
        {window.ORDER_TYPE_ORDER.map(t => {
          const T = window.ORDER_TYPES[t];
          return (
            <button key={t} className={`ord-typecard ${filter === t ? "is-active" : ""}`} onClick={() => setFilter(filter === t ? "all" : t)}>
              <span className="ord-typecard-ic"><window.Ico name={T.icon} /></span>
              <span className="ord-typecard-n">{byType[t]}</span>
              <span className="ord-typecard-l">{T.label}</span>
            </button>
          );
        })}
      </div>

      {/* Тулбар */}
      <div className="toolbar" style={{ marginTop: 22, alignItems: "center" }}>
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${filter === "all" ? "is-active" : ""}`} onClick={() => setFilter("all")}>Усі типи</button>
          {filter !== "all" && <button className="filter-pill-item is-active">{window.ORDER_TYPES[filter].label}</button>}
        </div>
        {canEdit && <button className="btn btn-primary" style={{ marginLeft: "auto" }} onClick={() => setWizard(true)}><window.Ico name="plus" /> Новий наказ</button>}
      </div>

      {/* Журнал */}
      <table className="data-table" style={{ marginTop: 14 }}>
        <thead>
          <tr>
            <th style={{ width: 130 }}>№ наказу</th>
            <th style={{ width: 92 }}>Дата</th>
            <th>Тип · працівник</th>
            <th>Зміст</th>
            <th>Підстава</th>
            <th style={{ width: 108 }}>Статус</th>
            <th style={{ width: 150 }}></th>
          </tr>
        </thead>
        <tbody>
          {shown.map(o => {
            const T = window.ORDER_TYPES[o.type] || {};
            const p = window.getTeam(o.personId);
            const who = p ? p.name : (o.f && o.f.name) || "—";
            return (
              <tr key={o.id}>
                <td className="td-mono" style={{ fontWeight: 600 }}>{o.no}</td>
                <td className="td-mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{window.formatDate(o.date)}</td>
                <td>
                  <div className="ord-row-type"><span className="ord-row-ic"><window.Ico name={T.icon} /></span>{T.label}</div>
                  <div className="cell-sub">{who}</div>
                </td>
                <td style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{window.orderSummary(o)}</td>
                <td style={{ fontSize: 11.5, color: "var(--ink-3)", maxWidth: 200 }}>{o.basis}</td>
                <td><OrdStatusTag status={o.status} /></td>
                <td>
                  <div className="ord-actions">
                    <button className="btn btn-sm" onClick={() => setPrintOrder(o)}><window.Ico name="download" /> Бланк</button>
                    {canEdit && o.status === "draft" && <button className="btn btn-sm btn-primary" onClick={() => sign(o)}>Підписати</button>}
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      <div className="hint-box" style={{ marginTop: 18 }}>
        <b>Журнал реєстрації наказів</b> з особового складу ведеться наскрізно (НК-0N-2026). Бланк формується автоматично з картки працівника
        (ПІБ, посада, оклад), текст редагується перед друком. Підпис директора, печатка (М.П.) і блок ознайомлення — на бланку.
        КЕП та інтеграція з кадровим архівом — на бекенді.
      </div>

      {wizard && <OrderWizard onClose={(o) => { setWizard(false); if (o) setPrintOrder(o); }} />}
      {printOrder && <window.OrderPrintDoc order={printOrder} onClose={() => setPrintOrder(null)} />}
    </div>
  );
}

window.OrdersPage = OrdersPage;