// create-project-modal.jsx — модалка створення проєкту з шаблону

function CreateProjectModal({ template, onClose, onCreated }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  // Авто-код: УКП-2026-XX (NN+1 від останнього)
  const objects = window.DATA.OBJECTS || [];
  const year = new Date().getFullYear();
  const maxNum = objects.reduce((m, o) => {
    const match = o.code && o.code.match(/(\d+)$/);
    return match ? Math.max(m, parseInt(match[1], 10)) : m;
  }, 0);
  const autoCode = `УКП-${year}-${String(maxNum + 1).padStart(2, "0")}`;

  const clients = window.DATA.CLIENTS || [];
  const team = window.DATA.TEAM || [];

  const isDesign = template.direction === "design";
  // Чи має шаблон етап експертизи (схема намірів — не має)
  const hasExpertise = template.stageTemplateIds.some(id => {
    const st = window.getStageTemplate(id);
    return st && st.stage === "expertise";
  });

  const [form, setForm] = React.useState({
    code: autoCode,
    name: "",
    clientId: clients[0]?.id || "",
    clientNew: "",
    address: "",
    deadline: "",
    contract: "",
    gipId: team.find(t => t.role && t.role.includes("ГІП"))?.id || team[0]?.id || "",
    grade: template.objectGrade || (isDesign ? "СС2" : ""),
    expertiseScope: template.expertiseScope || (isDesign && hasExpertise ? "full" : ""),
    teamIds: team.find(t => t.role && t.role.includes("ГІП")) ? [team.find(t => t.role && t.role.includes("ГІП")).id] : [],
  });

  const update = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

  // Підрахунок задач
  const stages = template.stageTemplateIds.map(id => window.getStageTemplate(id)).filter(Boolean);
  const totalTasks = stages.reduce((s, st) => s + st.taskTemplateIds.length, 0);

  const canSubmit = form.name.trim().length > 0 && (form.clientId || form.clientNew.trim().length > 0) && form.deadline;

  const onSubmit = () => {
    if (!canSubmit) return;
    const newObj = window.createObjectFromTemplate(template, form);
    onCreated && onCreated(newObj.id);
  };

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal" style={{maxWidth: 920, inset: "auto", top: 32, bottom: 32, left: "50%", transform: "translateX(-50%)", width: "calc(100% - 64px)"}}>
        <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}}>Створити проєкт з шаблону</div>
            <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>{template.name}</div>
          </div>
          <div style={{marginLeft: "auto", display: "flex", gap: 8}}>
            <button className="btn" onClick={onClose}>Скасувати</button>
            <button className="btn btn-primary" disabled={!canSubmit} onClick={onSubmit} style={!canSubmit ? {opacity: 0.5, pointerEvents: "none"} : {}}>
              Створити проєкт і {totalTasks} {window.plural(totalTasks, "задачу", "задачі", "задач")}
            </button>
          </div>
        </div>

        <div style={{flex: 1, overflowY: "auto", padding: "24px 32px"}}>
          <div className="cp-grid">
            <div className="cp-row">
              <label className="cp-label">Код об'єкта</label>
              <input className="cp-input" type="text" value={form.code} onChange={(e) => update("code", e.target.value)} />
              <div className="cp-hint">Авто-генерується. Можна змінити.</div>
            </div>

            <div className="cp-row cp-row-full">
              <label className="cp-label">Назва об'єкта <span className="cp-required">*</span></label>
              <input className="cp-input" type="text" value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="Напр.: ЖК «Подільський», Школа №14" autoFocus />
            </div>

            <div className="cp-row">
              <label className="cp-label">Замовник <span className="cp-required">*</span></label>
              <select className="cp-input" value={form.clientId} onChange={(e) => update("clientId", e.target.value)}>
                <option value="">— Новий замовник —</option>
                {clients.map(c => (
                  <option key={c.id} value={c.id}>{c.name}</option>
                ))}
              </select>
              {!form.clientId && (
                <input className="cp-input" type="text" value={form.clientNew} onChange={(e) => update("clientNew", e.target.value)}
                  placeholder="Назва нового замовника" style={{marginTop: 6}} />
              )}
            </div>

            <div className="cp-row">
              <label className="cp-label">Адреса</label>
              <input className="cp-input" type="text" value={form.address} onChange={(e) => update("address", e.target.value)} placeholder="Київ, Подільський р-н" />
            </div>

            <div className="cp-row">
              <label className="cp-label">Дедлайн <span className="cp-required">*</span></label>
              <input className="cp-input" type="date" value={form.deadline} onChange={(e) => update("deadline", e.target.value)} />
            </div>

            <div className="cp-row">
              <label className="cp-label">Сума контракту</label>
              <input className="cp-input" type="text" value={form.contract} onChange={(e) => update("contract", e.target.value)} placeholder="Напр.: 8.4 млн ₴" />
            </div>

            {isDesign && (
              <>
                <div className="cp-row">
                  <label className="cp-label">Клас наслідків</label>
                  <select className="cp-input" value={form.grade} onChange={(e) => update("grade", e.target.value)}>
                    <option value="СС1">СС1</option>
                    <option value="СС2">СС2</option>
                    <option value="СС3">СС3</option>
                  </select>
                </div>
                {hasExpertise && (
                  <div className="cp-row cp-row-full">
                    <label className="cp-label">Обсяг експертизи</label>
                    <select className="cp-input" value={form.expertiseScope} onChange={(e) => update("expertiseScope", e.target.value)}>
                      <option value="estimate">Кошторис (СС1, прості умови)</option>
                      <option value="strength">МОС + кошторис (СС1, складні техногенні умови — сейсмічність, зсуви, підтоплення)</option>
                      <option value="full">Комплексна (СС2 / СС3 і складні СС1)</option>
                    </select>
                  </div>
                )}
              </>
            )}

            <div className="cp-row cp-row-full">
              <label className="cp-label">ГІП (відповідальний)</label>
              <div className="cp-team-grid">
                {team.map(p => (
                  <label key={p.id} className={`cp-team-chip ${form.gipId === p.id ? "is-selected" : ""}`}>
                    <input type="radio" name="gip" value={p.id} checked={form.gipId === p.id}
                      onChange={() => update("gipId", p.id)} />
                    <span className="empl-chip">{p.initials}</span>
                    <span style={{flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{p.name}</span>
                    <span style={{fontSize: 11, color: "var(--ink-3)"}}>{p.role}</span>
                  </label>
                ))}
              </div>
            </div>

            <div className="cp-row cp-row-full">
              <label className="cp-label">Команда (хто бере участь)</label>
              <div className="cp-team-grid">
                {team.map(p => {
                  const isOn = form.teamIds.includes(p.id);
                  return (
                    <label key={p.id} className={`cp-team-chip ${isOn ? "is-selected" : ""}`}>
                      <input type="checkbox" checked={isOn} onChange={(e) => {
                        const next = e.target.checked
                          ? [...form.teamIds, p.id]
                          : form.teamIds.filter(id => id !== p.id);
                        update("teamIds", next);
                      }} />
                      <span className="empl-chip">{p.initials}</span>
                      <span style={{flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{p.name}</span>
                      <span style={{fontSize: 11, color: "var(--ink-3)"}}>{p.role}</span>
                    </label>
                  );
                })}
              </div>
            </div>
          </div>

          <section className="section" style={{marginTop: 28}}>
            <div className="section-head">
              <h3 className="section-h2" style={{fontSize: 14}}>Що буде створено</h3>
              <span className="section-sub">{stages.length} {window.plural(stages.length, "етап", "етапи", "етапів")} · {totalTasks} {window.plural(totalTasks, "задача", "задачі", "задач")}</span>
            </div>
            <div className="cp-summary">
              {stages.map((st, i) => (
                <div key={i} className="cp-summary-stage">
                  <div className="cp-summary-stage-head">
                    <span style={{fontSize: 18}}><window.Ico e={st.icon} /></span>
                    <span style={{fontWeight: 600, flex: 1}}>{st.name}</span>
                    <span style={{color: "var(--ink-3)", fontSize: 12}}>{st.taskTemplateIds.length} {window.plural(st.taskTemplateIds.length, "задача", "задачі", "задач")}</span>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>
    </>
  );
}

// ===================================================================
// CREATE OBJECT FROM TEMPLATE  — мутує window.DATA + сповіщає React
// ===================================================================
window.createObjectFromTemplate = function(template, form) {
  // 1) Створюємо об'єкт
  const newId = "obj-" + Math.random().toString(36).slice(2, 8);

  // Знаходимо/створюємо клієнта
  let clientName = "";
  if (form.clientId) {
    const c = window.DATA.CLIENTS.find(c => c.id === form.clientId);
    clientName = c ? c.name : form.clientId;
  } else if (form.clientNew) {
    clientName = form.clientNew;
    // Додаємо нового клієнта
    const newClient = {
      id: "c-" + Math.random().toString(36).slice(2, 6),
      name: form.clientNew,
      short: form.clientNew,
    };
    window.DATA.CLIENTS = [newClient, ...window.DATA.CLIENTS];
  }

  // Підрахунок plan: задачі по кожному етапу
  const plan = {};
  // Підбираємо stage template для експертизи відповідно до обраного користувачем обсягу
  const expertiseStageMap = {
    estimate: "stp-expertise-estimate-only",
    strength: "stp-expertise-strength",
    full:     "stp-expertise-full",
  };
  const desiredExpertiseStage = expertiseStageMap[form.expertiseScope];
  const stageTplIds = template.stageTemplateIds.map(id => {
    const st = window.getStageTemplate(id);
    if (st && st.stage === "expertise" && desiredExpertiseStage && desiredExpertiseStage !== id) {
      return desiredExpertiseStage;
    }
    return id;
  });
  const stages = stageTplIds.map(id => window.getStageTemplate(id)).filter(Boolean);
  stages.forEach(st => {
    plan[st.stage] = (plan[st.stage] || 0) + st.taskTemplateIds.length;
  });

  // Дедлайн у форматі "ДД.ММ"
  let deadlineLabel = form.deadline;
  if (form.deadline) {
    const d = new Date(form.deadline);
    if (!isNaN(d.getTime())) {
      deadlineLabel = String(d.getDate()).padStart(2, "0") + "." + String(d.getMonth() + 1).padStart(2, "0");
    }
  }

  const newObj = {
    id: newId,
    code: form.code,
    name: form.name,
    client: clientName,
    address: form.address,
    grade: form.grade || undefined,
    expertiseScope: form.expertiseScope || undefined,
    activeStage: stages[0]?.stage || "project",
    revision: "Ред. 1",
    deadline: deadlineLabel,
    contract: form.contract,
    team: Array.from(new Set([form.gipId, ...(form.teamIds || [])].filter(Boolean))),
    plan,
    createdFromTemplate: template.id,
    createdAt: new Date().toISOString(),
  };

  // 2) Створюємо задачі
  const tasks = [];
  stages.forEach(st => {
    st.taskTemplateIds.forEach((ttId, idx) => {
      const tt = window.getTaskTemplate(ttId);
      if (!tt) return;
      // Призначення: якщо роль gip → беремо ГІПа з форми
      let assignee = null;
      if (tt.assigneeRole === "gip") assignee = form.gipId;
      // інакше null — поки не призначено

      tasks.push({
        id: "t-" + Math.random().toString(36).slice(2, 8),
        title: tt.title,
        obj: newId,
        stage: st.stage,
        assignee: assignee,
        section: tt.section,
        estimate: tt.estDays + " дн",
        status: "todo",
        templateTaskId: tt.id,
        templateStageId: st.id,
        deadlineOffset: tt.deadlineOffset,
        subtasks: tt.subtasks ? tt.subtasks.map(s => ({ title: s.title, done: false })) : undefined,
      });
    });
  });

  // 3) Мутуємо глобальні дані
  window.DATA.OBJECTS = [newObj, ...window.DATA.OBJECTS];
  // Для геттера getObject (якщо є мапа) — оновити при наступному читанні

  // 4) Викликаємо хук React, щоб app пере-рендерився
  if (window.__erpStore) {
    window.__erpStore.addObject(newObj, tasks);
  }

  return newObj;
};

window.CreateProjectModal = CreateProjectModal;