// phase5-pages.jsx — Онбординг · Навчання · Аудит · Сповіщення

// ============ ОНБОРДИНГ ============
function OnboardingPage({ role }) {
  const steps = window.ONBOARDING_STEPS;
  const cats = window.ONBOARDING_CATEGORIES;
  const active = window.ACTIVE_ONBOARDINGS;
  const [openId, setOpenId] = React.useState(null);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Онбординг новачків</h1>
        <div className="page-sub">
          <span>{active.length} {window.plural(active.length, "новачок", "новачки", "новачків")} зараз</span>
          <span className="dot"></span>
          <span>{steps.length} кроків у чек-листі</span>
          <span className="dot"></span>
          <span>щоб ніхто не загубився в перший тиждень</span>
        </div>
      </div>

      <div className="hint-box">
        <b>Як працює:</b> при додаванні нового співробітника створюється персональний чек-лист
        з 20 пунктів. Менеджер і ментор галочкують виконане. Прогрес видно всім.
      </div>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Сторінки для новачка</h2>
          <span className="section-sub">видай у перший день</span>
        </div>
        <div className="onb-doc-card">
          <div className="onb-doc-ic"><window.Ico name="book" /></div>
          <div className="onb-doc-body">
            <div className="onb-doc-title">Пам'ятка · Доступ до ERP</div>
            <div className="onb-doc-sub">Як новачок уперше входить у систему — 3 кроки зі скріншотами реальних екранів: вхід, зміна пароля, «На сьогодні». Придатна для друку й розсилки.</div>
          </div>
          <div className="onb-doc-actions">
            <a className="btn btn-primary" href={encodeURI("Пам'ятка · ERP.html")} target="_blank" rel="noopener">Відкрити пам'ятку</a>
            <a className="btn" href={encodeURI("Пам'ятка · ERP.html")} target="_blank" rel="noopener">Роздрукувати</a>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Активні онбординги</h2>
          <span className="section-sub">{active.length}</span>
          <button className="btn btn-primary" style={{marginLeft: "auto", padding: "4px 12px", fontSize: 12}}>
            <window.Icon.Plus /> Новий співробітник
          </button>
        </div>
        <div className="onb-stack">
          {active.map(o => {
            const total = steps.length;
            const done = Object.values(o.progress).filter(v => v).length;
            const pct = Math.round(done / total * 100);
            const mentor = window.getTeam(o.mentor);
            const today = new Date("2026-05-26");
            const start = new Date(o.startDate);
            const daysIn = Math.round((today - start) / 86400000);
            return (
              <div key={o.id} className="onb-card" onClick={() => setOpenId(openId === o.id ? null : o.id)}>
                <div className="onb-head">
                  <div className="onb-avatar">{o.who.split(" ").map(s => s[0]).slice(0,2).join("")}</div>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div className="cell-name" style={{fontSize: 15}}>{o.who}</div>
                    <div className="cell-sub">{o.role} · працює {daysIn} {window.plural(daysIn, "день", "дні", "днів")}</div>
                  </div>
                  <div className="onb-progress">
                    <div className="onb-prog-num">{done}<span>/{total}</span></div>
                    <div className="onb-prog-label">{pct}% готово</div>
                  </div>
                  <div style={{textAlign: "right"}}>
                    <div style={{fontSize: 10.5, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em"}}>Ментор</div>
                    <div className="team-avatar" style={{width: 28, height: 28, fontSize: 10, marginTop: 4}}>{mentor?.initials}</div>
                  </div>
                </div>
                <div className="onb-bar">
                  <div className="onb-bar-fill" style={{width: pct + "%"}}></div>
                </div>
                {openId === o.id && (
                  <div className="onb-detail">
                    {Object.entries(cats).map(([catId, cat]) => {
                      const catSteps = steps.filter(s => s.category === catId);
                      const catDone = catSteps.filter(s => o.progress[s.id]).length;
                      return (
                        <div key={catId} className="onb-cat">
                          <div className="onb-cat-head">
                            <span className="onb-cat-icon"><window.Ico e={cat.icon} /></span>
                            <span className="onb-cat-name">{cat.label}</span>
                            <span className="onb-cat-stat">{catDone}/{catSteps.length}</span>
                          </div>
                          <div className="onb-steps">
                            {catSteps.map(s => {
                              const isDone = o.progress[s.id];
                              return (
                                <div key={s.id} className={`onb-step ${isDone ? "is-done" : ""}`}>
                                  <span className={`onb-check ${isDone ? "is-on" : ""}`}>
                                    {isDone && <window.Icon.Check />}
                                  </span>
                                  <span className="onb-step-label">{s.label}</span>
                                  {s.required && <span style={{fontSize: 10, color: "var(--late)", marginLeft: 8, fontWeight: 600}}>обов'язк.</span>}
                                </div>
                              );
                            })}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Шаблон чек-листа</h2>
          <span className="section-sub">{steps.length} {window.plural(steps.length, "крок", "кроки", "кроків")}</span>
          <button className="btn" style={{marginLeft: "auto", padding: "4px 10px", fontSize: 12}}>Редагувати</button>
        </div>
        <div className="onb-template">
          {Object.entries(cats).map(([catId, cat]) => {
            const catSteps = steps.filter(s => s.category === catId);
            return (
              <div key={catId} className="onb-cat">
                <div className="onb-cat-head">
                  <span className="onb-cat-icon"><window.Ico e={cat.icon} /></span>
                  <span className="onb-cat-name">{cat.label}</span>
                  <span className="onb-cat-stat">{catSteps.length} {window.plural(catSteps.length, "крок", "кроки", "кроків")}</span>
                </div>
                <div className="onb-steps">
                  {catSteps.map(s => (
                    <div key={s.id} className="onb-step">
                      <span className="onb-check"><span style={{color: "var(--ink-4)"}}>○</span></span>
                      <span className="onb-step-label">{s.label}</span>
                      {s.required && <span style={{fontSize: 10, color: "var(--late)", marginLeft: 8, fontWeight: 600}}>обов'язк.</span>}
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}

// ============ НАВЧАННЯ ============
function TrainingPage({ role }) {
  const trainings = window.DATA.TRAININGS;
  const team = window.DATA.TEAM;
  const [filter, setFilter] = React.useState("active");

  const planned     = trainings.filter(t => t.status === "planned" || t.status === "scheduled");
  const inProgress  = trainings.filter(t => t.status === "in_progress");
  const completed   = trainings.filter(t => t.status === "completed");
  const active      = [...inProgress, ...planned];

  let shown = trainings;
  if (filter === "active") shown = active;
  else if (filter === "completed") shown = completed;

  const totalCost = trainings.reduce((s, t) => s + t.cost, 0);
  const yearCost = trainings.filter(t => t.date.startsWith("2026")).reduce((s, t) => s + t.cost, 0);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Навчання команди</h1>
        <div className="page-sub">
          <span>{trainings.length} {window.plural(trainings.length, "запис", "записи", "записів")}</span>
          <span className="dot"></span>
          <span>{inProgress.length} триває</span>
          <span className="dot"></span>
          <span>бюджет {window.formatMoney(yearCost)} ₴ на 2026</span>
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">Заплановано</div>
          <div className="kpi-value">{planned.length}</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)"}}>{inProgress.length}</div>
          <div className="kpi-sub">зараз навчаються</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Завершено</div>
          <div className="kpi-value">{completed.length}</div>
          <div className="kpi-sub">за рік</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Бюджет 2026</div>
          <div className="kpi-value">{window.formatMoney(yearCost)} <span style={{fontSize: 14, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">витрачено + заплановано</div>
        </div>
      </div>

      <div className="toolbar">
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${filter === "active" ? "is-active" : ""}`} onClick={() => setFilter("active")}>
            Активні <span className="filter-pill-count">{active.length}</span>
          </button>
          <button className={`filter-pill-item ${filter === "completed" ? "is-active" : ""}`} onClick={() => setFilter("completed")}>
            Завершено <span className="filter-pill-count">{completed.length}</span>
          </button>
          <button className={`filter-pill-item ${filter === "all" ? "is-active" : ""}`} onClick={() => setFilter("all")}>
            Усі <span className="filter-pill-count">{trainings.length}</span>
          </button>
        </div>
        <button className="btn btn-primary" style={{marginLeft: "auto"}}>
          <window.Icon.Plus /> Записати на курс
        </button>
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>Курс / захід</th>
            <th>Учасник</th>
            <th>Тип</th>
            <th>Тривалість</th>
            <th>Дата</th>
            <th className="num-col">Вартість</th>
            <th>Статус</th>
          </tr>
        </thead>
        <tbody>
          {shown.map(t => {
            const person = window.getTeam(t.who);
            const typ = window.TRAINING_TYPE_LABELS[t.type];
            const st = window.TRAINING_STATUS[t.status];
            return (
              <tr key={t.id} className="is-clickable">
                <td>
                  <div style={{display: "flex", alignItems: "center", gap: 10}}>
                    <span style={{fontSize: 18}}><window.Ico e={typ.icon} /></span>
                    <div>
                      <div className="cell-name">{t.title}</div>
                      <div className="cell-sub">{t.provider}</div>
                    </div>
                  </div>
                </td>
                <td>
                  <div style={{display: "flex", alignItems: "center", gap: 8}}>
                    <div className="team-avatar" style={{width: 24, height: 24, fontSize: 9}}>{person?.initials}</div>
                    <span style={{fontSize: 12.5}}>{person?.name.split(" ")[0]} {person?.name.split(" ")[1]?.[0]}.</span>
                  </div>
                </td>
                <td><span className="empl-chip empl-staff">{typ.label}</span></td>
                <td style={{fontSize: 12, color: "var(--ink-3)"}}>{t.duration}</td>
                <td className="td-mono" style={{fontSize: 12}}>{window.formatDate(t.date)}</td>
                <td className="num-col">{t.cost > 0 ? window.formatMoney(t.cost) + " ₴" : <span style={{color: "var(--ink-4)"}}>безкошт.</span>}</td>
                <td>
                  <div>
                    <span className={`status-tag tone-${st.tone}`}>{st.label}</span>
                    {t.status === "in_progress" && t.progress && (
                      <div style={{fontSize: 11, color: "var(--c-green-deep)", marginTop: 4, fontVariantNumeric: "tabular-nums"}}>{t.progress}% завершено</div>
                    )}
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ============ АУДИТ ============
function AuditLogPage({ role }) {
  const log = window.AUDIT_LOG;
  const actions = window.AUDIT_ACTIONS;
  const entities = window.AUDIT_ENTITY_LABELS;
  const team = window.DATA.TEAM;
  const [filterWho, setFilterWho] = React.useState("all");
  const [filterAction, setFilterAction] = React.useState("all");

  let shown = log;
  if (filterWho !== "all") shown = shown.filter(l => l.who === filterWho);
  if (filterAction !== "all") shown = shown.filter(l => l.action === filterAction);

  // Group by day
  const byDay = {};
  shown.forEach(item => {
    const day = item.date.substring(0, 10);
    if (!byDay[day]) byDay[day] = [];
    byDay[day].push(item);
  });
  const days = Object.keys(byDay).sort((a, b) => b.localeCompare(a));

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Журнал аудиту</h1>
        <div className="page-sub">
          <span>{log.length} {window.plural(log.length, "запис", "записи", "записів")} за {days.length} {window.plural(days.length, "день", "дні", "днів")}</span>
          <span className="dot"></span>
          <span>хто що змінив у системі</span>
          <span className="dot"></span>
          <span>усі дії незмінні · зберігаються 7 років</span>
        </div>
      </div>

      <div className="hint-box">
        <b>Для чого:</b> вимога для відповідальних об'єктів (СС2/СС3) і для перевірок —
        повний слід усіх змін: підписи, узгодження, виставлення рахунків, редагування
        проєктної документації. Записи неможливо видалити.
      </div>

      <div className="toolbar">
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${filterWho === "all" ? "is-active" : ""}`} onClick={() => setFilterWho("all")}>
            Усі
          </button>
          {team.map(p => (
            <button key={p.id} className={`filter-pill-item ${filterWho === p.id ? "is-active" : ""}`} onClick={() => setFilterWho(p.id)}>
              <span className="av" style={{width: 22, height: 22, fontSize: 9.5, border: "none"}}>{p.initials[0]}</span>
              {p.initials}
            </button>
          ))}
        </div>
        <select className="select-pill" value={filterAction} onChange={(e) => setFilterAction(e.target.value)} style={{marginLeft: "auto"}}>
          <option value="all">Усі дії</option>
          {Object.entries(actions).map(([id, a]) => (
            <option key={id} value={id}>{a.label}</option>
          ))}
        </select>
        <button className="btn">Експорт CSV</button>
      </div>

      <div className="audit-stream">
        {days.map(day => (
          <div key={day} className="audit-day">
            <div className="audit-day-head">{window.formatDate(day)}</div>
            <div className="audit-day-list">
              {byDay[day].map(item => {
                const act = actions[item.action];
                const person = window.getTeam(item.who) || { initials: "СС", name: "Система" };
                const time = item.date.substring(11, 16);
                return (
                  <div key={item.id} className="audit-row">
                    <div className="audit-time td-mono">{time}</div>
                    <div className="audit-actor">
                      <div className="team-avatar" style={{width: 24, height: 24, fontSize: 9}}>{person.initials}</div>
                      <span style={{fontSize: 12.5}}>{person.name.split(" ")[0]}</span>
                    </div>
                    <div className="audit-action" style={{color: act.color}}>
                      <span className="audit-action-icon" style={{background: act.color + "20", color: act.color}}><window.Ico e={act.icon} /></span>
                      <span className="audit-action-label">{act.label.toLowerCase()}</span>
                    </div>
                    <div className="audit-entity">
                      <span className="audit-entity-type">{entities[item.entity]}</span>
                      <span className="audit-entity-name">{item.entityName}</span>
                    </div>
                    <div className="audit-details">{item.details}</div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ СПОВІЩЕННЯ ============
function NotificationsPage({ role }) {
  const all = window.NOTIFICATIONS;
  const kinds = window.NOTIF_KINDS;
  const [filter, setFilter] = React.useState("unread");

  const unread = all.filter(n => !n.read);
  const important = all.filter(n => n.important);

  let shown = all;
  if (filter === "unread") shown = unread;
  else if (filter === "important") shown = important;

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Сповіщення</h1>
        <div className="page-sub">
          <span>{all.length} {window.plural(all.length, "сповіщення", "сповіщення", "сповіщень")}</span>
          {unread.length > 0 && <>
            <span className="dot"></span>
            <span style={{color: "var(--accent)", fontWeight: 600}}>{unread.length} непрочитаних</span>
          </>}
          {important.length > 0 && <>
            <span className="dot"></span>
            <span style={{color: "var(--late)"}}>{important.length} важливих</span>
          </>}
        </div>
      </div>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Налаштування каналів</h2>
        </div>
        <div className="drive-status" style={{ marginTop: 0, marginBottom: 14 }}>
          <div className="drive-status-icon"><window.Ico name="mail" /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>Відправник e-mail сповіщень</div>
            <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>
              Усі листи (нагадування про задачі, дедлайни, рахунки, ДН, КЕП) надходять від <b style={{ color: "var(--ink)" }} className="td-mono">erp@ukrbudproiekt.ua</b> — той самий акаунт, що й сховище Drive.
            </div>
          </div>
          <span className="status-tag tone-live">активно</span>
          <button className="btn">Змінити</button>
        </div>
        <div className="notif-settings">
          {Object.entries(kinds).map(([id, k]) => (
            <div key={id} className="notif-setting-row">
              <span style={{fontSize: 18}}><window.Ico e={k.icon} /></span>
              <span style={{flex: 1, fontSize: 13.5}}>{k.label}</span>
              <label className="notif-channel">
                <input type="checkbox" defaultChecked />
                <span>В системі</span>
              </label>
              <label className="notif-channel">
                <input type="checkbox" defaultChecked />
                <span>Telegram</span>
              </label>
              <label className="notif-channel">
                <input type="checkbox" defaultChecked={id === "late_task" || id === "overdue_invoice"} />
                <span>Email</span>
              </label>
            </div>
          ))}
        </div>
      </section>

      <div className="toolbar">
        <div className="filter-pill" role="tablist">
          <button className={`filter-pill-item ${filter === "unread" ? "is-active" : ""}`} onClick={() => setFilter("unread")}>
            Непрочитані <span className="filter-pill-count">{unread.length}</span>
          </button>
          <button className={`filter-pill-item ${filter === "important" ? "is-active" : ""}`} onClick={() => setFilter("important")}>
            Важливі <span className="filter-pill-count">{important.length}</span>
          </button>
          <button className={`filter-pill-item ${filter === "all" ? "is-active" : ""}`} onClick={() => setFilter("all")}>
            Усі <span className="filter-pill-count">{all.length}</span>
          </button>
        </div>
        <button className="btn" style={{marginLeft: "auto"}}>Позначити всі прочитаними</button>
      </div>

      <div className="notif-list">
        {shown.map(n => {
          const kind = kinds[n.kind];
          const time = n.time.substring(11, 16);
          const day = n.time.substring(0, 10);
          const isToday = day === "2026-05-26";
          return (
            <div key={n.id} className={`notif-row ${!n.read ? "is-unread" : ""} ${n.important ? "is-important" : ""}`}>
              <div className="notif-icon"><window.Ico e={kind.icon} /></div>
              <div style={{flex: 1, minWidth: 0}}>
                <div className="notif-title">{n.title}</div>
                <div className="notif-text">{n.text}</div>
              </div>
              <div style={{textAlign: "right", fontSize: 11.5, color: "var(--ink-3)", flexShrink: 0}}>
                <div>{isToday ? "сьогодні" : window.formatDate(day)}</div>
                <div className="td-mono">{time}</div>
              </div>
              {!n.read && <span className="notif-unread-dot"></span>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.OnboardingPage = OnboardingPage;
window.TrainingPage = TrainingPage;
window.AuditLogPage = AuditLogPage;
window.NotificationsPage = NotificationsPage;