/* === Task creation/edit drawer === */

const TaskForm = ({ open, onClose, onSave, areaDefault, role, user, editTask }) => {
  const [form, setForm] = React.useState(null);
  const isEdit = !!editTask;

  React.useEffect(() => {
    if (open) {
      if (editTask) {
        setForm({
          title:       editTask.title,
          area:        editTask.area,
          assignee:    editTask.assignee,
          due:         editTask.due,
          dueTime:     editTask.dueTime || "",
          priority:    editTask.priority,
          description: editTask.description || "",
          location:    editTask.location || "",
          recurrence:  editTask.recurrence || "ninguna",
          checklist:   editTask.checklist ? editTask.checklist.map(c => ({ ...c })) : [],
          notes:       editTask.notes || "",
        });
      } else {
        setForm({
          title: "",
          area: areaDefault || (user.area || "mant"),
          assignee: user.id,
          due: TODAY_ISO,
          dueTime: "",
          priority: "media",
          description: "",
          location: "",
          recurrence: "ninguna",
          checklist: [],
          notes: "",
        });
      }
    }
  }, [open, areaDefault, editTask]);

  if (!open || !form) return null;

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

  const updateChecklist = (i, patch) => {
    setForm(f => ({ ...f, checklist: f.checklist.map((c, idx) => idx === i ? { ...c, ...patch } : c) }));
  };
  const removeChecklistItem = (i) => {
    setForm(f => ({ ...f, checklist: f.checklist.filter((_, idx) => idx !== i) }));
  };
  const addChecklistItem = () => {
    setForm(f => ({ ...f, checklist: [...f.checklist, { id: "c-" + Date.now(), text: "", done: false }] }));
  };

  // Show recurrence preview
  const recPreview = form.recurrence !== "ninguna"
    ? `Próxima ocurrencia: ${fmtLongDate(nextOccurrence(form.due, form.recurrence))}`
    : null;

  const dueDate = parseISO(form.due);
  const isDueBusiness = isBusinessDay(dueDate);
  const isDaily = form.recurrence === "diaria";
  const dueHint = !isDueBusiness
    ? `Esa fecha cae en ${isWeekend(dueDate) ? "fin de semana" : "feriado"}. Si activas recurrencia, las próximas ocurrencias se moverán al día hábil ${isDaily ? "siguiente" : "anterior"}.`
    : null;

  const eligibleAssignees = STAFF.filter(s =>
    !s.area || s.area === form.area || s.role === "admin" || s.role === "gerente"
  );

  const save = () => {
    if (!form.title.trim()) return;
    if (isEdit) {
      // Preserve metadata, replace editable fields
      onSave({
        ...editTask,
        title: form.title.trim(),
        area: form.area,
        assignee: form.assignee,
        due: form.due,
        dueTime: form.dueTime,
        priority: form.priority,
        description: form.description,
        location: form.location,
        recurrence: form.recurrence !== "ninguna" ? form.recurrence : undefined,
        checklist: form.checklist.filter(c => c.text.trim()),
        notes: form.notes,
      });
    } else {
      onSave({
        id: "t-" + Date.now(),
        title: form.title.trim(),
        area: form.area,
        assignee: form.assignee,
        due: form.due,
        dueTime: form.dueTime,
        priority: form.priority,
        status: "pendiente",
        description: form.description,
        location: form.location,
        recurrence: form.recurrence !== "ninguna" ? form.recurrence : undefined,
        checklist: form.checklist.filter(c => c.text.trim()),
        comments: [],
        attachments: 0,
        required: [],
        notes: form.notes,
        createdAt: TODAY_ISO,
        createdBy: user.id,
      });
    }
  };

  return (
    <div className="cdc-overlay" onClick={onClose}>
      <div className="cdc-drawer" onClick={(e) => e.stopPropagation()}>
        <div className="cdc-drawer__head">
          <div className="cdc-drawer__title">{isEdit ? "Editar tarea" : "Nueva tarea"}</div>
          <button className="cdc-iconbtn" onClick={onClose}><I.X size={18} /></button>
        </div>

        <div className="cdc-drawer__body">
          <div className="cdc-field">
            <label>Título</label>
            <input
              className="cdc-input"
              value={form.title}
              onChange={(e) => update("title", e.target.value)}
              placeholder="Ej. Cambio de filtros de alberca"
              autoFocus
            />
          </div>

          <div className="cdc-row-2">
            <div className="cdc-field">
              <label>Área</label>
              <select className="cdc-select" value={form.area} onChange={(e) => update("area", e.target.value)}>
                {AREAS.filter(a => !a.system).map(a => (
                  <option key={a.id} value={a.id}>{a.label}</option>
                ))}
              </select>
            </div>
            <div className="cdc-field">
              <label>Asignar a</label>
              <select className="cdc-select" value={form.assignee} onChange={(e) => update("assignee", e.target.value)}>
                {eligibleAssignees.map(s => (
                  <option key={s.id} value={s.id}>{s.name} — {s.title}</option>
                ))}
              </select>
            </div>
          </div>

          <div className="cdc-row-3">
            <div className="cdc-field">
              <label>Vence</label>
              <input type="date" className="cdc-input" value={form.due} onChange={(e) => update("due", e.target.value)} />
            </div>
            <div className="cdc-field">
              <label>Hora</label>
              <input type="time" className="cdc-input" value={form.dueTime} onChange={(e) => update("dueTime", e.target.value)} />
            </div>
            <div className="cdc-field">
              <label>Prioridad</label>
              <select className="cdc-select" value={form.priority} onChange={(e) => update("priority", e.target.value)}>
                <option value="alta">Alta</option>
                <option value="media">Media</option>
                <option value="baja">Baja</option>
              </select>
            </div>
          </div>

          <div className="cdc-field">
            <label>Ubicación</label>
            <input
              className="cdc-input"
              value={form.location}
              onChange={(e) => update("location", e.target.value)}
              placeholder="Suite 3, Cuarto de máquinas…"
            />
          </div>

          <div className="cdc-field">
            <label>Descripción</label>
            <textarea
              className="cdc-textarea"
              value={form.description}
              onChange={(e) => update("description", e.target.value)}
              placeholder="Contexto, acciones requeridas…"
            />
          </div>

          <div className="cdc-field">
            <label>Checklist <span style={{ color: "var(--cdc-ink-4)", fontWeight: 500, letterSpacing: 0, textTransform: "none" }}>(opcional · puntos a completar)</span></label>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {form.checklist.map((c, i) => (
                <div key={c.id} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <Circle checked={c.done} onClick={() => updateChecklist(i, { done: !c.done })} />
                  <input
                    className="cdc-input"
                    value={c.text}
                    onChange={(e) => updateChecklist(i, { text: e.target.value })}
                    placeholder="Punto del checklist"
                    style={{ flex: 1 }}
                  />
                  <button className="cdc-iconbtn" onClick={() => removeChecklistItem(i)} type="button" title="Quitar">
                    <I.Trash size={14} />
                  </button>
                </div>
              ))}
              <button type="button" className="cdc-chip" onClick={addChecklistItem} style={{ alignSelf: "flex-start" }}>
                <I.Plus size={12} /> Agregar punto
              </button>
            </div>
          </div>

          <div className="cdc-field">
            <label>Notas adicionales</label>
            <textarea
              className="cdc-textarea"
              value={form.notes}
              onChange={(e) => update("notes", e.target.value)}
              placeholder="Notas internas, contexto adicional…"
              style={{ minHeight: 60 }}
            />
          </div>

          <div className="cdc-field">
            <label>Recurrencia</label>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {[
                ["ninguna",    "No se repite"],
                ["diaria",     "Diaria"],
                ["semanal",    "Semanal"],
                ["quincenal",  "Quincenal"],
                ["mensual",    "Mensual"],
                ["trimestral", "Trimestral"],
                ["anual",      "Anual"],
              ].map(([k, lbl]) => (
                <button
                  key={k}
                  type="button"
                  className="cdc-chip"
                  aria-pressed={form.recurrence === k}
                  onClick={() => update("recurrence", k)}
                >
                  <I.Repeat size={12} /> {lbl}
                </button>
              ))}
            </div>
            {(recPreview || dueHint) && (
              <div className="cdc-helper" style={{ marginTop: 6, lineHeight: 1.5 }}>
                {recPreview && (
                  <div style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--cdc-sea-deep)" }}>
                    <I.Calendar size={12} /> {recPreview}
                  </div>
                )}
                {dueHint && (
                  <div style={{ color: "var(--cdc-med)", marginTop: 4 }}>{dueHint}</div>
                )}
                {form.recurrence !== "ninguna" && (
                  <div style={{ color: "var(--cdc-ink-3)", marginTop: 4 }}>
                    {form.recurrence === "diaria"
                      ? "Las próximas ocurrencias se ajustan al siguiente día hábil (saltan fines de semana y feriados nacionales)."
                      : "Las próximas ocurrencias se ajustan al día hábil anterior (p.ej. si cae sábado se programa viernes)."}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        <div className="cdc-panel__actions" style={{ position: "static", borderTop: "1px solid var(--cdc-border-soft)" }}>
          <button className="cdc-btn" onClick={onClose}>Cancelar</button>
          <button className="cdc-btn cdc-btn--primary" onClick={save} disabled={!form.title.trim()}>
            {isEdit ? <><I.Check size={14} /> Guardar cambios</> : <><I.Plus size={14} /> Crear tarea</>}
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TaskForm });