// new-task-modal.jsx — модальне вікно створення задачі вручну

function NewTaskModal({ onClose, onCreate, preset, onSwitchToVisit }) {
  const objects = window.DATA.OBJECTS || [];
  const team = window.DATA.TEAM || [];
  const days = window.WEEK_DAYS || [];
  const catalog = (window.PM && window.PM.SECTION_CATALOG) || {};
  const sectionOptions = ["ГІП", ...Object.keys(catalog), "ТД"];

  const [form, setForm] = React.useState({
    title: "",
    kind: (preset && preset.objId) ? "object" : "object", // "object" | "admin"
    objId: (preset && preset.objId) || "",
    section: "ГІП",
    assignees: [],
    day: (days.find(d => d.isToday) || days[0] || {}).day || (window.TODAY ? window.TODAY.day : ""),
    time: "",
    est: "",
    status: (preset && preset.status) || "todo",
    note: "",
    checklist: [],
  });
  const [clInput, setClInput] = React.useState("");
  const update = (k, v) => setForm(prev => ({ ...prev, [k]: v }));
  const setKind = (kind) => setForm(prev => ({ ...prev, kind, objId: kind === "admin" ? "" : prev.objId }));
  const toggleAssignee = (id) => setForm(prev => ({
    ...prev,
    assignees: prev.assignees.includes(id) ? prev.assignees.filter(x => x !== id) : [...prev.assignees, id],
  }));
  const addClItem = () => {
    const v = clInput.trim();
    if (!v) return;
    setForm(prev => ({ ...prev, checklist: [...prev.checklist, v] }));
    setClInput("");
  };
  const removeClItem = (i) => setForm(prev => ({ ...prev, checklist: prev.checklist.filter((_, idx) => idx !== i) }));

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

  const selObj = form.objId ? objects.find(o => o.id === form.objId) : null;
  const isObject = form.kind === "object";
  const canSubmit = form.title.trim().length > 0 && (!isObject || !!form.objId);

  const submit = () => {
    if (!canSubmit) return;
    const task = {
      id: "t-" + Math.random().toString(36).slice(2, 8),
      title: form.title.trim(),
      obj: isObject ? (form.objId || null) : null,
      stage: isObject && selObj ? (selObj.activeStage || "project") : null,
      assignee: form.assignees[0] || null,
      assignees: form.assignees.length ? form.assignees : null,
      section: isObject ? (form.section || null) : "АДМ",
      day: form.day,
      status: form.status,
      subs: form.checklist.map(t => ({ t, done: false })),
    };
    if (form.time.trim()) task.time = form.time.trim();
    if (form.est.trim()) task.est = form.est.trim();
    if (form.note.trim()) task.note = form.note.trim();
    onCreate && onCreate(task);
  };

  const statusOpts = [
    { id: "todo", label: "Заплановано" },
    { id: "live", label: "У роботі" },
  ];

  return (
    <>
      <style>{`
        .nt-cl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
        .nt-cl-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--bg-sunken);
          border: 1px solid var(--line); border-radius: 8px; }
        .nt-cl-box { width: 15px; height: 15px; border: 1.5px solid var(--line-strong); border-radius: 4px; flex: none; }
        .nt-cl-text { flex: 1 1 auto; font-size: 13px; color: var(--ink); text-wrap: pretty; }
        .nt-cl-del { background: none; border: none; color: var(--ink-3); cursor: pointer; display: flex; padding: 2px; border-radius: 5px; flex: none; }
        .nt-cl-del:hover { color: var(--late); background: var(--late-bg); }
        .nt-cl-add { display: flex; gap: 8px; align-items: center; }
        .nt-cl-add .cp-input { flex: 1 1 auto; }
        .nt-cl-add .btn { white-space: nowrap; flex: none; }
      `}</style>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal nt-modal" style={{maxWidth: 600, inset: "auto", top: 40, bottom: "auto", maxHeight: "calc(100vh - 80px)", left: "50%", transform: "translateX(-50%)", width: "calc(100% - 48px)"}}>
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="nt-head-icon"><window.Ico name="clipboard" /></div>
          <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: "22px 28px"}}>
          <div className="cp-grid">
            <div className="cp-row cp-row-full">
              <label className="cp-label">Тип задачі</label>
              <div className="nt-kind">
                <button type="button" className={`nt-kind-card ${isObject ? "is-active" : ""}`} onClick={() => setKind("object")}>
                  <window.Ico name="construction" size={18} />
                  <div className="nt-kind-txt">
                    <div className="nt-kind-name">По об'єкту</div>
                    <div className="nt-kind-sub">Проєктна / будівельна</div>
                  </div>
                </button>
                <button type="button" className={`nt-kind-card ${!isObject ? "is-active" : ""}`} onClick={() => setKind("admin")}>
                  <window.Ico name="briefcase" size={18} />
                  <div className="nt-kind-txt">
                    <div className="nt-kind-name">Адміністративна</div>
                    <div className="nt-kind-sub">Без прив'язки до об'єкта</div>
                  </div>
                </button>
                <button type="button" className="nt-kind-card" onClick={() => onSwitchToVisit && onSwitchToVisit()}>
                  <window.Ico name="mapPin" size={18} />
                  <div className="nt-kind-txt">
                    <div className="nt-kind-name">Виїзд</div>
                    <div className="nt-kind-sub">На об'єкт · з комплектом</div>
                  </div>
                </button>
              </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.title} autoFocus
                onChange={(e) => update("title", e.target.value)}
                onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) submit(); }}
                placeholder={isObject ? "Напр.: Розрахунок плит перекриття, Узгодження з ДСНС" : "Напр.: Підготувати авансовий звіт, Замовити КЕП" } />
            </div>

            {isObject && <div className="cp-row">
              <label className="cp-label">Об'єкт <span className="cp-required">*</span></label>
              <select className="cp-input" value={form.objId} onChange={(e) => update("objId", e.target.value)}>
                <option value="">— Оберіть об'єкт —</option>
                {objects.map(o => (
                  <option key={o.id} value={o.id}>{o.code} · {o.name}</option>
                ))}
              </select>
            </div>}

            {isObject && <div className="cp-row">
              <label className="cp-label">Розділ</label>
              <select className="cp-input" value={form.section} onChange={(e) => update("section", e.target.value)}>
                {sectionOptions.map(s => (
                  <option key={s} value={s}>{s}{catalog[s] ? " — " + catalog[s] : ""}</option>
                ))}
              </select>
            </div>}

            <div className="cp-row cp-row-full">
              <label className="cp-label">Виконавці {form.assignees.length > 0 && <span className="nt-count">{form.assignees.length}</span>}</label>
              <div className="nt-people">
                {team.map(p => {
                  const on = form.assignees.includes(p.id);
                  return (
                    <button key={p.id} type="button" className={`nt-person ${on ? "is-on" : ""}`} onClick={() => toggleAssignee(p.id)}>
                      <span className="team-avatar nt-person-av">{p.initials}</span>
                      <span className="nt-person-name">{p.name}</span>
                      {p.role && <span className="nt-person-role">{p.role}</span>}
                      {on && <span className="nt-person-check"><window.Ico name="check" size={14} /></span>}
                    </button>
                  );
                })}
              </div>
              <div className="nt-hint">Можна обрати кількох. Перший — відповідальний.</div>
            </div>

            <div className="cp-row">
              <label className="cp-label">День у плані</label>
              <select className="cp-input" value={form.day} onChange={(e) => update("day", e.target.value)}>
                {days.map(d => (
                  <option key={d.day} value={d.day}>{d.name}, {d.day} трав.{d.isToday ? " — сьогодні" : ""}</option>
                ))}
              </select>
              <div className="nt-hint">День у тижневому розкладі (не дедлайн)</div>
            </div>

            <div className="cp-row">
              <label className="cp-label">Час (необов'язково)</label>
              <input className="cp-input" type="text" value={form.time} onChange={(e) => update("time", e.target.value)}
                placeholder="напр.: 10:30 — 12:00" />
            </div>

            <div className="cp-row">
              <label className="cp-label">Оцінка (необов'язково)</label>
              <input className="cp-input" type="text" value={form.est} onChange={(e) => update("est", e.target.value)}
                placeholder="напр.: 2 год" />
            </div>

            <div className="cp-row cp-row-full">
              <label className="cp-label">Статус</label>
              <div className="nt-seg">
                {statusOpts.map(s => (
                  <button key={s.id} type="button"
                    className={`nt-seg-item ${form.status === s.id ? "is-active" : ""}`}
                    onClick={() => update("status", s.id)}>
                    {s.label}
                  </button>
                ))}
              </div>
            </div>

            <div className="cp-row cp-row-full">
              <label className="cp-label">Чек-ліст {form.checklist.length > 0 && <span className="nt-count">{form.checklist.length}</span>}</label>
              {form.checklist.length > 0 && (
                <div className="nt-cl-list">
                  {form.checklist.map((item, i) => (
                    <div className="nt-cl-item" key={i}>
                      <span className="nt-cl-box"></span>
                      <span className="nt-cl-text">{item}</span>
                      <button type="button" className="nt-cl-del" onClick={() => removeClItem(i)} aria-label="Прибрати пункт"><window.Icon.X /></button>
                    </div>
                  ))}
                </div>
              )}
              <div className="nt-cl-add">
                <input className="cp-input" type="text" value={clInput}
                  onChange={(e) => setClInput(e.target.value)}
                  onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addClItem(); } }}
                  placeholder="Додати пункт чек-листа…" />
                <button type="button" className="btn btn-sm" onClick={addClItem} disabled={!clInput.trim()}
                  style={!clInput.trim() ? { opacity: 0.5, pointerEvents: "none" } : {}}>
                  <window.Icon.Plus /> Додати
                </button>
              </div>
              <div className="nt-hint">Прості пункти-галочки. Enter — додати наступний. Підзадачі з виконавцями додаються у картці задачі.</div>
            </div>

            <div className="cp-row cp-row-full">
              <label className="cp-label">Нотатка (необов'язково)</label>
              <textarea className="cp-input nt-textarea" value={form.note} onChange={(e) => update("note", e.target.value)}
                rows={3} placeholder="Контекст, посилання, деталі…" />
            </div>
          </div>
        </div>

        <div className="nt-foot">
          <button className="btn" onClick={onClose}>Скасувати</button>
          <button className="btn btn-primary" disabled={!canSubmit} onClick={submit}
            style={!canSubmit ? {opacity: 0.5, pointerEvents: "none"} : {}}>
            Створити задачу
          </button>
        </div>
      </div>
    </>
  );
}

window.NewTaskModal = NewTaskModal;