// templates-page.jsx — нова сторінка «Шаблони» з 3 рівнями

function TemplatesPage({ role, onCreateFromTemplate, setPage }) {
  const [tab, setTab] = React.useState("projects");
  const [openProject, setOpenProject] = React.useState(null);
  const [openStage, setOpenStage] = React.useState(null);
  const [openTask, setOpenTask] = React.useState(null);
  const [openHr, setOpenHr] = React.useState(null);
  const [creating, setCreating] = React.useState(null); // PROJECT_TEMPLATE для створення

  const projectTpl = window.PROJECT_TEMPLATES;
  const stageTpl = window.STAGE_TEMPLATES;
  const taskTpl = window.TASK_TEMPLATES;
  const hrTpl = window.HR_PROCESS_TEMPLATES || [];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Шаблони</h1>
        <div className="page-sub">
          <span>Три рівні: <b>проєкт</b> → <b>етап</b> → <b>задача</b></span>
          <span className="dot"></span>
          <span>обираєш шаблон проєкту — створюються всі задачі</span>
        </div>
      </div>

      <div className="tab-bar">
        <button className={`tab ${tab === "projects" ? "is-active" : ""}`} onClick={() => setTab("projects")}>
          Шаблони проєктів <span className="tab-count">{projectTpl.length}</span>
        </button>
        <button className={`tab ${tab === "stages" ? "is-active" : ""}`} onClick={() => setTab("stages")}>
          Шаблони етапів <span className="tab-count">{stageTpl.length}</span>
        </button>
        <button className={`tab ${tab === "tasks" ? "is-active" : ""}`} onClick={() => setTab("tasks")}>
          Шаблони задач <span className="tab-count">{taskTpl.length}</span>
        </button>
        <button className={`tab ${tab === "hr" ? "is-active" : ""}`} onClick={() => setTab("hr")}>
          HR / Команда <span className="tab-count">{hrTpl.length}</span>
        </button>
      </div>

      {tab === "projects" && (
        <ProjectTemplates
          templates={projectTpl}
          onView={(t) => setOpenProject(t)}
          onCreate={(t) => setCreating(t)}
        />
      )}
      {tab === "stages" && (
        <StageTemplates templates={stageTpl} onView={(t) => setOpenStage(t)} />
      )}
      {tab === "tasks" && (
        <TaskTemplates templates={taskTpl} onView={(t) => setOpenTask(t)} />
      )}
      {tab === "hr" && (
        <HrTemplates templates={hrTpl} onView={(t) => setOpenHr(t)} />
      )}

      {openProject && (
        <ProjectTemplateModal
          template={openProject}
          onClose={() => setOpenProject(null)}
          onCreate={() => { setCreating(openProject); setOpenProject(null); }}
        />
      )}
      {openStage && <StageTemplateModal template={openStage} onClose={() => setOpenStage(null)} />}
      {openTask && <TaskTemplateModal template={openTask} onClose={() => setOpenTask(null)} />}
      {openHr && <HrTemplateModal template={openHr} onClose={() => setOpenHr(null)} />}

      {creating && (
        <window.CreateProjectModal
          template={creating}
          onClose={() => setCreating(null)}
          onCreated={(newObjectId) => {
            setCreating(null);
            onCreateFromTemplate && onCreateFromTemplate(newObjectId);
            setPage && setPage("objects");
          }}
        />
      )}
    </div>
  );
}

// =========== ТАБ 1: Шаблони проєктів ===========
function ProjectTemplates({ templates, onView, onCreate }) {
  const dirs = window.DIRECTION_LABELS;
  const WT = window.WORK_TYPE_LABELS;

  // Групуємо: схема намірів → невиробниче → виробниче → авторський нагляд
  const groupOf = (t) => {
    if (t.direction === "supervision") return "supervision";
    if (t.workType === "schema") return "schema";
    return t.purpose || "other";
  };
  const groupDefs = [
    { key: "schema",         label: "Житлова садибна / блокована забудова" },
    { key: "non_production", label: "Невиробниче призначення" },
    { key: "production",     label: "Виробниче призначення" },
    { key: "supervision",    label: "Авторський нагляд" },
  ];
  const gradeOrder = (t) => (t.objectGrade === "СС1" ? 0 : 1);
  const sortFn = (a, b) =>
    ((WT[a.workType]?.order ?? 5) - (WT[b.workType]?.order ?? 5)) || (gradeOrder(a) - gradeOrder(b));

  const renderCard = (t) => {
    const stageCount = t.stageTemplateIds.length;
    const taskCount = t.stageTemplateIds.reduce((sum, sid) => {
      const s = window.getStageTemplate(sid);
      return sum + (s ? s.taskTemplateIds.length : 0);
    }, 0);
    const dir = dirs[t.direction];
    const wt = WT[t.workType];
    return (
      <div key={t.id} className="template-card">
        <div className="template-card-head">
          <div className="template-icon"><window.Ico e={t.icon} /></div>
          <div style={{display: "flex", gap: 6, flexWrap: "wrap", justifyContent: "flex-end"}}>
            {t.gradeLabel && <span className="empl-chip">{t.gradeLabel}</span>}
            <span className="empl-chip" style={{borderColor: dir.color, color: dir.color}}>{dir.short}</span>
          </div>
        </div>
        <div className="template-name">{t.name}</div>
        <div className="template-desc">{t.description}</div>
        <div className="template-stats">
          <div><b>{taskCount}</b><span>задач</span></div>
          <div><b>{stageCount}</b><span>{window.plural(stageCount, "етап", "етапи", "етапів")}</span></div>
          <div><b>{t.estimatedDays}</b><span>{window.plural(t.estimatedDays, "день", "дні", "днів")}</span></div>
        </div>
        <div className="template-foot">
          <button className="btn" onClick={() => onView(t)}>Переглянути</button>
          <button className="btn btn-primary" style={{flex: 1}} onClick={() => onCreate(t)}>
            Створити проєкт →
          </button>
        </div>
      </div>
    );
  };

  return (
    <div style={{display: "flex", flexDirection: "column", gap: 28}}>
      {groupDefs.map(g => {
        const list = templates.filter(t => groupOf(t) === g.key).sort(sortFn);
        if (list.length === 0) return null;
        return (
          <section key={g.key} className="section">
            <div className="section-head">
              <h2 className="section-h2">{g.label}</h2>
              <span className="section-sub">{list.length} {window.plural(list.length, "шаблон", "шаблони", "шаблонів")}</span>
            </div>
            <div className="template-grid">
              {list.map(renderCard)}
            </div>
          </section>
        );
      })}
      <button className="template-add" style={{alignSelf: "flex-start"}}>
        <window.Icon.Plus />
        <span>Створити шаблон</span>
      </button>
    </div>
  );
}

// =========== ТАБ 2: Шаблони етапів ===========
function StageTemplates({ templates, onView }) {
  const byStage = {};
  templates.forEach(t => { (byStage[t.stage] = byStage[t.stage] || []).push(t); });
  const allStages = [...window.DATA.STAGES, ...(window.DATA.CORRECTION_STAGES || [])];
  return (
    <div style={{display: "flex", flexDirection: "column", gap: 28}}>
      {Object.entries(byStage).map(([stageId, list]) => {
        const stage = allStages.find(s => s.id === stageId);
        return (
          <section key={stageId} className="section">
            <div className="section-head">
              <h2 className="section-h2">{stage?.name || stageId}</h2>
              <span className="section-sub">{list.length} {window.plural(list.length, "шаблон", "шаблони", "шаблонів")}</span>
            </div>
            <div className="template-grid">
              {list.map(t => (
                <div key={t.id} className="template-card" onClick={() => onView(t)} style={{cursor: "pointer"}}>
                  <div className="template-card-head">
                    <div className="template-icon"><window.Ico e={t.icon} /></div>
                  </div>
                  <div className="template-name" style={{fontSize: 14}}>{t.name}</div>
                  <div className="template-desc">{t.description}</div>
                  <div className="template-stats">
                    <div><b>{t.taskTemplateIds.length}</b><span>задач</span></div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        );
      })}
    </div>
  );
}

// =========== Базові (наскрізні) задачі — застосовуються за правилом ===========
function BaselineTasksSection({ onView }) {
  const baseline = window.BASELINE_TASKS || [];
  if (baseline.length === 0) return null;
  return (
    <section className="section" style={{marginBottom: 24}}>
      <div className="section-head">
        <h2 className="section-h2">Базові (наскрізні) задачі</h2>
        <span className="section-sub">описані один раз · підставляються за правилом застосовності</span>
      </div>
      <div style={{fontSize: 12.5, color: "var(--ink-3)", marginBottom: 12, maxWidth: 720}}>
        Не дублюються в кожному шаблоні етапу. Рушій додає їх при створенні проєкту залежно від типу робіт — тому правило можна змінити в одному місці.
      </div>
      <div className="template-grid">
        {baseline.map(b => {
          const tt = window.getTaskTemplate(b.taskTemplateId);
          if (!tt) return null;
          const role = window.ASSIGNEE_ROLE_LABELS[tt.assigneeRole];
          return (
            <div key={b.taskTemplateId} className="template-card" onClick={() => onView(tt)} style={{cursor: "pointer"}}>
              <div className="template-card-head">
                <div className="template-icon"><window.Ico e={tt.icon} /></div>
                <span className="empl-chip" style={{borderColor: "var(--accent)", color: "var(--accent)"}}>наскрізна</span>
              </div>
              <div className="template-name" style={{fontSize: 14}}>{tt.title}</div>
              <div className="cc-applies">
                <span className="cc-applies-key">Застосовується до</span>
                <span className="cc-applies-val">{window.appliesToLabel(b.appliesTo)}</span>
              </div>
              <div className="template-desc" style={{marginTop: 8}}>{b.rationale}</div>
              {role && <div style={{fontSize: 12, color: "var(--ink-3)", marginTop: 8}}><window.Ico e={role.icon} /> {role.label}</div>}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// =========== ТАБ 3: Шаблони задач ===========
function TaskTemplates({ templates, onView }) {
  const [filterSection, setFilterSection] = React.useState("all");
  const sections = ["all", ...Array.from(new Set(templates.map(t => t.section)))];

  const filtered = filterSection === "all" ? templates : templates.filter(t => t.section === filterSection);

  return (
    <div>
      <BaselineTasksSection onView={onView} />

      <div className="filter-pill" style={{marginBottom: 16, flexWrap: "wrap"}}>
        {sections.map(s => (
          <button
            key={s}
            className={`filter-pill-item ${filterSection === s ? "is-active" : ""}`}
            onClick={() => setFilterSection(s)}
          >
            {s === "all" ? `Усі (${templates.length})` : `${s} (${templates.filter(t => t.section === s).length})`}
          </button>
        ))}
      </div>

      <div className="data-table-wrap">
        <table className="data-table">
          <thead>
            <tr>
              <th style={{width: 40}}></th>
              <th>Задача</th>
              <th style={{width: 80}}>Розділ</th>
              <th>Виконавець</th>
              <th className="num-col" style={{width: 80}}>Тривалість</th>
              <th className="num-col" style={{width: 90}}>Дедлайн</th>
              <th style={{width: 80}}>Виїзд</th>
              <th style={{width: 90}}>Залежності</th>
              <th style={{width: 90}}>Файли</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(t => {
              const role = window.ASSIGNEE_ROLE_LABELS[t.assigneeRole];
              return (
                <tr key={t.id} onClick={() => onView(t)} style={{cursor: "pointer"}}>
                  <td style={{fontSize: 18, textAlign: "center"}}>{t.icon || "•"}</td>
                  <td><div className="cell-name">{t.title}</div>
                    <div className="cell-sub" style={{whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 380}}>
                      {t.description}
                    </div>
                  </td>
                  <td><span className="doc-type">{t.section}</span></td>
                  <td>{role ? <span style={{fontSize: 12.5}}><window.Ico e={role.icon} /> {role.label}</span> : "—"}</td>
                  <td className="num-col">{t.estDays} дн</td>
                  <td className="num-col" style={{color: "var(--ink-3)", fontSize: 12.5}}>+{t.deadlineOffset} дн</td>
                  <td>{t.requiresSiteVisit ? <span className="empl-chip" style={{display: "inline-flex", alignItems: "center", gap: 4}}><window.Ico name="car" size={12} /> так</span> : <span style={{color: "var(--ink-4)"}}>—</span>}</td>
                  <td style={{textAlign: "center", color: "var(--ink-3)"}}>{t.dependencies?.length || 0}</td>
                  <td style={{textAlign: "center", color: "var(--ink-3)"}}>{t.attachments?.length || 0}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// =========== МОДАЛКА: ПЕРЕГЛЯД ШАБЛОНУ ПРОЄКТУ ===========
function ProjectTemplateModal({ template, onClose, onCreate }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const allStages = [...window.DATA.STAGES, ...(window.DATA.CORRECTION_STAGES || [])];
  const stages = template.stageTemplateIds.map(id => window.getStageTemplate(id)).filter(Boolean);
  const totalTasks = stages.reduce((s, st) => s + st.taskTemplateIds.length, 0);
  const dir = window.DIRECTION_LABELS[template.direction];

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal">
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="template-icon" style={{width: 32, height: 32, fontSize: 16}}><window.Ico e={template.icon} /></div>
          <div>
            <div style={{fontSize: 14, fontWeight: 600}}>{template.name}</div>
            <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>{template.description}</div>
          </div>
          <div style={{marginLeft: "auto", display: "flex", gap: 8}}>
            <button className="btn">Дублювати</button>
            <button className="btn">Редагувати</button>
            <button className="btn btn-primary" onClick={onCreate}>Створити проєкт →</button>
          </div>
        </div>
        <div style={{flex: 1, overflowY: "auto", padding: "24px 32px"}}>
          <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
            <div className="kpi"><div className="kpi-label">Задач</div><div className="kpi-value">{totalTasks}</div></div>
            <div className="kpi"><div className="kpi-label">Етапів</div><div className="kpi-value">{stages.length}</div></div>
            <div className="kpi"><div className="kpi-label">Тривалість</div><div className="kpi-value">{template.estimatedDays}<span style={{fontSize: 14, color: "var(--ink-3)"}}>дн.</span></div></div>
            <div className="kpi"><div className="kpi-label">Напрямок</div><div className="kpi-value" style={{fontSize: 16, color: dir.color}}>{dir.label}</div></div>
          </div>

          {stages.map((st, i) => {
            const stage = allStages.find(s => s.id === st.stage);
            const tasks = st.taskTemplateIds.map(id => window.getTaskTemplate(id)).filter(Boolean);
            return (
              <section key={i} className="section">
                <div className="section-head">
                  <h2 className="section-h2">
                    <span style={{color: "var(--ink-3)", fontWeight: 500, marginRight: 8}}>Етап {i + 1}.</span>
                    {stage?.name || st.stage}
                    <span style={{color: "var(--ink-3)", fontWeight: 500, marginLeft: 12, fontSize: 13}}>· {st.name}</span>
                  </h2>
                  <span className="section-sub">{tasks.length} {window.plural(tasks.length, "задача", "задачі", "задач")}</span>
                </div>
                <table className="data-table compact-table">
                  <thead>
                    <tr>
                      <th style={{width: 40}}>№</th>
                      <th style={{width: 30}}></th>
                      <th>Задача</th>
                      <th style={{width: 80}}>Розділ</th>
                      <th>Виконавець</th>
                      <th className="num-col" style={{width: 80}}>Оцінка</th>
                      <th className="num-col" style={{width: 90}}>Дедлайн</th>
                    </tr>
                  </thead>
                  <tbody>
                    {tasks.map((t, j) => {
                      const r = window.ASSIGNEE_ROLE_LABELS[t.assigneeRole];
                      return (
                        <tr key={j}>
                          <td style={{color: "var(--ink-3)", fontFamily: "var(--font-mono)"}}>{j + 1}</td>
                          <td style={{textAlign: "center"}}><window.Ico e={t.icon} /></td>
                          <td><div className="cell-name">{t.title}</div></td>
                          <td><span className="doc-type">{t.section}</span></td>
                          <td>{r ? <span style={{fontSize: 12.5}}><window.Ico e={r.icon} /> {r.label}</span> : "—"}</td>
                          <td className="num-col">{t.estDays} дн</td>
                          <td className="num-col" style={{color: "var(--ink-3)", fontSize: 12}}>+{t.deadlineOffset} дн</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </section>
            );
          })}
        </div>
      </div>
    </>
  );
}

// =========== МОДАЛКА: ШАБЛОН ЕТАПУ ===========
function StageTemplateModal({ template, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const allStages = [...window.DATA.STAGES, ...(window.DATA.CORRECTION_STAGES || [])];
  const stage = allStages.find(s => s.id === template.stage);
  const tasks = template.taskTemplateIds.map(id => window.getTaskTemplate(id)).filter(Boolean);

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal">
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="template-icon" style={{width: 32, height: 32, fontSize: 16}}><window.Ico e={template.icon} /></div>
          <div>
            <div style={{fontSize: 14, fontWeight: 600}}>{template.name}</div>
            <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>Етап: {stage?.name || template.stage} · {template.description}</div>
          </div>
          <div style={{marginLeft: "auto", display: "flex", gap: 8}}>
            <button className="btn">Редагувати</button>
          </div>
        </div>
        <div style={{flex: 1, overflowY: "auto", padding: "24px 32px"}}>
          <table className="data-table compact-table">
            <thead>
              <tr>
                <th style={{width: 40}}>№</th>
                <th style={{width: 30}}></th>
                <th>Задача</th>
                <th style={{width: 80}}>Розділ</th>
                <th>Виконавець</th>
                <th className="num-col" style={{width: 80}}>Оцінка</th>
                <th className="num-col" style={{width: 90}}>Дедлайн</th>
              </tr>
            </thead>
            <tbody>
              {tasks.map((t, j) => {
                const r = window.ASSIGNEE_ROLE_LABELS[t.assigneeRole];
                return (
                  <tr key={j}>
                    <td style={{color: "var(--ink-3)", fontFamily: "var(--font-mono)"}}>{j + 1}</td>
                    <td style={{textAlign: "center"}}><window.Ico e={t.icon} /></td>
                    <td><div className="cell-name">{t.title}</div>
                      <div className="cell-sub">{t.description}</div>
                    </td>
                    <td><span className="doc-type">{t.section}</span></td>
                    <td>{r ? <span style={{fontSize: 12.5}}><window.Ico e={r.icon} /> {r.label}</span> : "—"}</td>
                    <td className="num-col">{t.estDays} дн</td>
                    <td className="num-col" style={{color: "var(--ink-3)", fontSize: 12}}>+{t.deadlineOffset} дн</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

// =========== МОДАЛКА: ШАБЛОН ЗАДАЧІ ===========
function TaskTemplateModal({ template, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const r = window.ASSIGNEE_ROLE_LABELS[template.assigneeRole];
  const deps = (template.dependencies || []).map(id => window.getTaskTemplate(id)).filter(Boolean);

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="drawer">
        <div className="drawer-head">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="drawer-title-wrap">
            <div style={{display: "flex", alignItems: "center", gap: 10, marginBottom: 6}}>
              <span style={{fontSize: 22}}><window.Ico e={template.icon} /></span>
              <span className="doc-type">{template.section}</span>
              {template.requiresSiteVisit && <span className="empl-chip" style={{display: "inline-flex", alignItems: "center", gap: 4}}><window.Ico name="car" size={12} /> виїзд на майданчик</span>}
            </div>
            <h2 className="drawer-title">{template.title}</h2>
            <div className="drawer-sub">{template.description}</div>
          </div>
        </div>
        <div className="drawer-body">
          <section className="section">
            <div className="kpi-row" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
              <div className="kpi"><div className="kpi-label">Тривалість</div><div className="kpi-value">{template.estDays}<span style={{fontSize: 14, color: "var(--ink-3)"}}>дн</span></div></div>
              <div className="kpi"><div className="kpi-label">Дедлайн</div><div className="kpi-value">+{template.deadlineOffset}<span style={{fontSize: 14, color: "var(--ink-3)"}}>дн</span></div></div>
              <div className="kpi"><div className="kpi-label">Виконавець</div><div className="kpi-value" style={{fontSize: 14}}>{r ? <span style={{display: "inline-flex", alignItems: "center", gap: 6}}><window.Ico e={r.icon} /> {r.label}</span> : "—"}</div></div>
            </div>
          </section>

          {template.subtasks && template.subtasks.length > 0 && (
            <section className="section">
              <div className="section-head">
                <h3 className="section-h2" style={{fontSize: 14}}>Чек-лист підзадач</h3>
                <span className="section-sub">{template.subtasks.length} {window.plural(template.subtasks.length, "пункт", "пункти", "пунктів")}</span>
              </div>
              <ul className="onb-steps">
                {template.subtasks.map((s, i) => (
                  <li key={i} className="onb-step">
                    <div className="onb-check"></div>
                    <span className="onb-step-label">{s.title}</span>
                  </li>
                ))}
              </ul>
            </section>
          )}

          {deps.length > 0 && (
            <section className="section">
              <div className="section-head"><h3 className="section-h2" style={{fontSize: 14}}>Залежності</h3></div>
              <div style={{display: "flex", flexDirection: "column", gap: 6}}>
                {deps.map(d => (
                  <div key={d.id} style={{display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", background: "var(--bg-sunken)", borderRadius: 6}}>
                    <span style={{fontSize: 16}}><window.Ico e={d.icon} /></span>
                    <span style={{flex: 1}}>{d.title}</span>
                    <span className="doc-type">{d.section}</span>
                  </div>
                ))}
              </div>
            </section>
          )}

          {template.attachments && template.attachments.length > 0 && (
            <section className="section">
              <div className="section-head"><h3 className="section-h2" style={{fontSize: 14}}>Прикріплені шаблони документів</h3></div>
              <div style={{display: "flex", flexDirection: "column", gap: 6}}>
                {template.attachments.map((a, i) => (
                  <div key={i} style={{display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: 6}}>
                    <span style={{fontSize: 18, color: "var(--ink-3)"}}><window.Ico name="paperclip" /></span>
                    <span style={{flex: 1, fontSize: 13}}>{a.name}</span>
                    <span className="empl-chip">{window.ATTACHMENT_TYPE_LABELS[a.type] || a.type}</span>
                  </div>
                ))}
              </div>
            </section>
          )}
        </div>
      </div>
    </>
  );
}

window.TemplatesPage = TemplatesPage;

// =========== ТАБ 4: HR / Команда (кадрові процеси) ===========
function HrTemplates({ templates, onView }) {
  const cats = window.HR_CATEGORY_LABELS || [{ key: "career", label: "Кадрові процеси" }];
  const renderCard = (t) => (
    <div key={t.id} className="template-card" onClick={() => onView(t)} style={{cursor: "pointer"}}>
      <div className="template-card-head">
        <div className="template-icon"><window.Ico e={t.icon} /></div>
        <span className="empl-chip" style={{borderColor: "var(--accent)", color: "var(--accent)"}}>HR</span>
      </div>
      <div className="template-name" style={{fontSize: 14}}>{t.name}</div>
      <div className="template-desc">{t.description}</div>
      <div className={`hr-tpl-effect ${t.category === "career" ? "" : "is-deadline"}`}>
        <window.Ico name={t.effectIcon || "trending"} size={13} /> {t.effect}
      </div>
      <div className="template-stats">
        <div><b>{t.taskTemplateIds.length}</b><span>{window.plural(t.taskTemplateIds.length, "задача", "задачі", "задач")}</span></div>
      </div>
    </div>
  );

  return (
    <div style={{display: "flex", flexDirection: "column", gap: 28}}>
      <div className="hint-box">
        <b>Кадрові процеси.</b> Кар'єрні переходи запускаються з картки людини у розділі «Команда»
        (архітектор → ГАП; інженер-проєктувальник СС1 → ІІ, СС2 → І, СС3 → провідний; надбавка за сертифікат).
        Решта процесів — прийняття, відпустки, відрядження, звільнення, кваліфікація — стандартні набори задач
        із дедлайнами та чек-листами під загальну систему оподаткування (ТОВ, платник ПДВ).
      </div>
      {cats.map(cat => {
        const list = templates.filter(t => (t.category || "career") === cat.key);
        if (list.length === 0) return null;
        return (
          <section key={cat.key} className="section">
            <div className="section-head">
              <h2 className="section-h2">{cat.label}</h2>
              <span className="section-sub">{list.length} {window.plural(list.length, "процес", "процеси", "процесів")}</span>
            </div>
            <div className="template-grid">
              {list.map(renderCard)}
            </div>
          </section>
        );
      })}
    </div>
  );
}

function HrTemplateModal({ template, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  const tasks = template.taskTemplateIds.map(id => window.getHrTaskTemplate(id)).filter(Boolean);

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal">
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="template-icon" style={{width: 32, height: 32, fontSize: 16}}><window.Ico e={template.icon} /></div>
          <div>
            <div style={{fontSize: 14, fontWeight: 600}}>{template.name}</div>
            <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>Кадровий процес · {tasks.length} {window.plural(tasks.length, "задача", "задачі", "задач")}</div>
          </div>
          <div style={{marginLeft: "auto", display: "flex", gap: 8}}>
            <button className="btn">Редагувати</button>
          </div>
        </div>
        <div style={{flex: 1, overflowY: "auto", padding: "24px 32px"}}>
          <div className="hr-tpl-meta">
            <div className="hr-tpl-meta-row"><span className="hr-tpl-meta-k">Тригер</span><span className="hr-tpl-meta-v">{template.trigger}</span></div>
            <div className="hr-tpl-meta-row"><span className="hr-tpl-meta-k">Ефект</span><span className="hr-tpl-meta-v" style={{color: "var(--accent)", fontWeight: 600}}>{template.effect}</span></div>
          </div>

          <section className="section">
            <div className="section-head">
              <h2 className="section-h2">Задачі-супровід</h2>
              <span className="section-sub">{tasks.length}</span>
            </div>
            <div style={{display: "flex", flexDirection: "column", gap: 10}}>
              {tasks.map((t, i) => {
                const r = window.ASSIGNEE_ROLE_LABELS[t.assigneeRole];
                return (
                  <div key={i} className="hr-task-card">
                    <div className="hr-task-head">
                      <span style={{fontSize: 18}}><window.Ico e={t.icon} /></span>
                      <div style={{flex: 1, minWidth: 0}}>
                        <div className="cell-name">{i + 1}. {t.title}</div>
                        <div className="cell-sub">{t.description}</div>
                      </div>
                      {r && <span className="empl-chip" style={{flexShrink: 0}}><window.Ico e={r.icon} /> {r.label}</span>}
                    </div>
                    {t.checklist && t.checklist.length > 0 && (
                      <ul className="onb-steps" style={{marginTop: 8}}>
                        {t.checklist.map((c, j) => (
                          <li key={j} className="onb-step"><div className="onb-check"></div><span className="onb-step-label">{c}</span></li>
                        ))}
                      </ul>
                    )}
                  </div>
                );
              })}
            </div>
          </section>
        </div>
      </div>
    </>
  );
}

// ============ ProjectTemplatePicker (для кнопки "+ Новий об'єкт") ============
function ProjectTemplatePicker({ onClose, onPick }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const templates = window.PROJECT_TEMPLATES;
  const dirs = window.DIRECTION_LABELS;

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal" style={{maxWidth: 760, inset: "auto", top: 80, bottom: 80, left: "50%", transform: "translateX(-50%)", width: "calc(100% - 64px)"}}>
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div>
            <div style={{fontSize: 14, fontWeight: 600}}>Створити об'єкт з шаблону</div>
            <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>Оберіть тип — задачі і етапи створяться автоматично</div>
          </div>
        </div>
        <div style={{flex: 1, overflowY: "auto", padding: "20px 24px"}}>
          <div style={{display: "flex", flexDirection: "column", gap: 8}}>
            {templates.map(t => {
              const dir = dirs[t.direction];
              const stageCount = t.stageTemplateIds.length;
              const taskCount = t.stageTemplateIds.reduce((sum, sid) => {
                const s = window.getStageTemplate(sid);
                return sum + (s ? s.taskTemplateIds.length : 0);
              }, 0);
              return (
                <button key={t.id} className="picker-row" onClick={() => onPick(t)}>
                  <div className="template-icon" style={{width: 44, height: 44, fontSize: 22, flexShrink: 0}}><window.Ico e={t.icon} /></div>
                  <div style={{flex: 1, minWidth: 0, textAlign: "left"}}>
                    <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 3, flexWrap: "wrap"}}>
                      <span style={{fontWeight: 600, fontSize: 14}}>{t.name}</span>
                      <span className="empl-chip" style={{borderColor: dir.color, color: dir.color}}>{dir.short}</span>
                      {t.gradeLabel && <span className="empl-chip">{t.gradeLabel}</span>}
                      {t.purpose && window.PURPOSE_LABELS[t.purpose] && <span className="empl-chip">{window.PURPOSE_LABELS[t.purpose].short}</span>}
                    </div>
                    <div style={{fontSize: 12.5, color: "var(--ink-3)"}}>{t.description}</div>
                    <div style={{fontSize: 11.5, color: "var(--ink-3)", marginTop: 4, display: "flex", gap: 10}}>
                      <span><b style={{color: "var(--ink)"}}>{taskCount}</b> задач</span>
                      <span>·</span>
                      <span><b style={{color: "var(--ink)"}}>{stageCount}</b> {window.plural(stageCount, "етап", "етапи", "етапів")}</span>
                      <span>·</span>
                      <span><b style={{color: "var(--ink)"}}>{t.estimatedDays}</b> {window.plural(t.estimatedDays, "день", "дні", "днів")}</span>
                    </div>
                  </div>
                  <span style={{color: "var(--ink-3)", fontSize: 18, flexShrink: 0}}>→</span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
}
window.ProjectTemplatePicker = ProjectTemplatePicker;