const TaskPanel = ({ task, onClose, onUpdate, onDelete, onEdit, canEdit, canDelete, role }) => {
  const [tab, setTab] = React.useState("detalle");
  const [comment, setComment] = React.useState("");
  const [postponeOpen, setPostponeOpen] = React.useState(false);

  // Reset tab if it's not valid for this task's area
  React.useEffect(() => {
    if (task && tab === "fotos" && task.area !== "mant") setTab("detalle");
  }, [task && task.area]);

  if (!task) return null;

  const toggleCheck = (cid) => {
    if (!canEdit) return;
    onUpdate({
      ...task,
      checklist: task.checklist.map(c => c.id === cid ? { ...c, done: !c.done } : c),
    });
  };

  const done = task.checklist.filter(c => c.done).length;
  const total = task.checklist.length;
  const assignee = STAFF_BY_ID[task.assignee];
  const creator = STAFF_BY_ID[task.createdBy];
  const overdue = task.status === "vencida";

  const handleProgress = () => {
    if (!canEdit) return;
    const next = task.status === "progreso" ? "terminada" : "progreso";
    onUpdate({ ...task, status: next });
  };

  const handlePostpone = () => {
    if (!canEdit) return;
    setPostponeOpen(true);
  };

  const confirmPostpone = (newIso) => {
    const adjusted = fmtISO(rollToBusinessDay(parseISO(newIso)));
    onUpdate({ ...task, due: adjusted, status: "aplazada" });
    setPostponeOpen(false);
  };

  return (
    <aside className="cdc-panel">
      <div className="cdc-panel__head">
        <button className="cdc-iconbtn" title="Expandir"><I.Expand size={16} /></button>
        {canEdit && onEdit && (
          <button
            className="cdc-iconbtn"
            title="Editar tarea"
            onClick={() => onEdit(task)}
          >
            <I.Edit size={15} />
          </button>
        )}
        {canDelete && (
          <button
            className="cdc-iconbtn"
            title="Eliminar tarea"
            style={{ color: "var(--cdc-overdue)" }}
            onClick={() => {
              const isRec = task.recurrence && task.recurrence !== "ninguna";
              const msg = isRec
                ? `¿Eliminar la tarea “${task.title}”?\n\nEs una tarea ${RECURRENCE_LABEL[task.recurrence].toLowerCase()}. Al eliminarla también dejarán de generarse las próximas ocurrencias.`
                : `¿Eliminar la tarea “${task.title}”?\n\nEsta acción no se puede deshacer.`;
              if (window.confirm(msg)) {
                onDelete && onDelete(task.id);
              }
            }}
          >
            <I.Trash size={15} />
          </button>
        )}
        <button className="cdc-iconbtn" onClick={onClose} title="Cerrar"><I.X size={18} /></button>
      </div>

      <div className="cdc-panel__title">{task.title}</div>

      <div className="cdc-panel__status-row">
        <StatusBadge status={task.status} />
        {overdue && (
          <span className="cdc-overdue-text">
            Venció {fmtShortDate(task.due)} {parseISO(task.due).getFullYear()}{task.dueTime ? ` a las ${task.dueTime}` : ""}
          </span>
        )}
        {!overdue && task.dueTime && (
          <span className="cdc-overdue-text">{fmtShortDate(task.due)} · {task.dueTime}</span>
        )}
        {!canEdit && (
          <span className="cdc-locked"><I.Lock size={11} /> Solo lectura</span>
        )}
      </div>

      <dl className="cdc-panel__facts">
        <dt><AreaIcon id={task.area} size={14} /> Área</dt>
        <dd>{AREA_BY_ID[task.area]?.label}</dd>

        <dt><I.Flag size={14} /> Prioridad</dt>
        <dd><Priority p={task.priority} /></dd>

        <dt><I.User size={14} /> Asignado a</dt>
        <dd><PersonChip id={task.assignee} /></dd>

        {task.location && (<>
          <dt><I.MapPin size={14} /> Ubicación</dt>
          <dd>{task.location}</dd>
        </>)}

        <dt><I.User size={14} /> Creada por</dt>
        <dd>
          <PersonChip id={task.createdBy} />
          <span style={{ color: "var(--cdc-ink-3)", fontSize: 12.5, marginLeft: 6 }}>
            {fmtShortDate(task.createdAt)} {parseISO(task.createdAt).getFullYear()}{task.createdAtTime ? `, ${task.createdAtTime}` : ""}
          </span>
        </dd>

        {task.recurrence && task.recurrence !== "ninguna" && (<>
          <dt><I.Repeat size={14} /> Recurrencia</dt>
          <dd style={{ color: "var(--cdc-ink-2)" }}>{RECURRENCE_LABEL[task.recurrence]}</dd>
        </>)}
      </dl>

      <div className="cdc-tabs">
        {[
          ["detalle", "Detalle"],
          ...(task.area === "mant" ? [["fotos", "Antes / Después"]] : []),
          ["progreso", "Progreso"],
          ["historial", "Historial"],
        ].map(([id, label]) => (
          <button key={id} className="cdc-tab" aria-selected={tab === id} onClick={() => setTab(id)}>{label}</button>
        ))}
      </div>

      <div className="cdc-panel__body">
        {tab === "detalle" && (
          <>
            <div>
              <div className="cdc-section-h">Descripción</div>
              <p className="cdc-p">{task.description || "Sin descripción."}</p>
            </div>

            {task.required && task.required.length > 0 && (
              <div>
                <div className="cdc-section-h">Acciones requeridas</div>
                <ul className="cdc-ul">
                  {task.required.map((r, i) => <li key={i}>{r}</li>)}
                </ul>
              </div>
            )}

            {task.notes && (
              <div>
                <div className="cdc-section-h">Notas</div>
                <p className="cdc-p">{task.notes}</p>
              </div>
            )}

            {total > 0 && (
              <div>
                <div className="cdc-section-h cdc-section-h--with-count">
                  <span>Checklist</span>
                  <span className="cdc-section-h__count">{done} / {total}</span>
                </div>
                <div className="cdc-checklist">
                  {task.checklist.map(c => (
                    <div key={c.id} className="cdc-checklist__item" data-done={c.done || undefined} onClick={() => toggleCheck(c.id)}>
                      <Circle checked={c.done} onClick={() => toggleCheck(c.id)} />
                      <span>{c.text}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            <div>
              <div className="cdc-section-h">Comentarios</div>
              <div className="cdc-comment">
                <Avatar id="mgonzalez" size="sm" />
                <input
                  placeholder="Escribe un comentario…"
                  value={comment}
                  onChange={(e) => setComment(e.target.value)}
                  disabled={!canEdit}
                />
                <span className="cdc-comment__actions">
                  <button><I.Paperclip size={15} /></button>
                  <button><I.Send size={15} /></button>
                </span>
              </div>
            </div>
          </>
        )}

        {tab === "fotos" && task.area === "mant" && (
          <BeforeAfterGallery task={task} canEdit={canEdit} onUpdate={onUpdate} />
        )}

        {tab === "progreso" && (
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="cdc-section-h">Progreso</div>
            <div style={{ background: "var(--cdc-bg-soft)", borderRadius: 10, padding: 14, border: "1px solid var(--cdc-border-soft)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <span style={{ fontSize: 13, color: "var(--cdc-ink-3)" }}>Checklist</span>
                <span style={{ fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{done}/{total}</span>
              </div>
              <div style={{ height: 8, background: "var(--cdc-cream-200)", borderRadius: 999, overflow: "hidden" }}>
                <div style={{ width: total ? `${(done/total)*100}%` : "0%", height: "100%", background: "var(--cdc-done)", transition: "width 0.3s" }} />
              </div>
            </div>
            <p className="cdc-p">El progreso se actualiza automáticamente conforme se completan los puntos del checklist.</p>
          </div>
        )}

        {tab === "historial" && (
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="cdc-section-h">Historial</div>
            {(() => {
              const entries = [];
              entries.push({
                who: task.createdBy,
                when: `${fmtShortDate(task.createdAt)}${task.createdAtTime ? `, ${task.createdAtTime}` : ""}`,
                what: "creó la tarea",
              });
              if (task.assignee && task.assignee !== task.createdBy) {
                entries.push({
                  who: task.createdBy,
                  when: `${fmtShortDate(task.createdAt)}${task.createdAtTime ? `, ${task.createdAtTime}` : ""}`,
                  what: `asignó a ${STAFF_BY_ID[task.assignee]?.name || task.assignee}`,
                });
              }
              (task.checklist || []).filter(c => c.done).forEach(c => {
                entries.push({
                  who: task.assignee,
                  when: "—",
                  what: `marcó "${c.text}"`,
                });
              });
              if (task.status === "terminada") {
                entries.push({ who: task.assignee, when: "—", what: "marcó la tarea como terminada" });
              }
              if (task.status === "progreso") {
                entries.push({ who: task.assignee, when: "—", what: "puso la tarea en progreso" });
              }
              if (task.status === "aplazada") {
                entries.push({ who: task.assignee, when: "—", what: `aplazó la tarea hasta ${fmtShortDate(task.due)}` });
              }
              return entries.map((h, i) => (
                <div key={i} style={{ display: "flex", gap: 10, fontSize: 13 }}>
                  <Avatar id={h.who} size="sm" />
                  <div>
                    <div><strong>{STAFF_BY_ID[h.who]?.name.split(" ")[0] || h.who}</strong> {h.what}</div>
                    <div style={{ color: "var(--cdc-ink-3)", fontSize: 11.5 }}>{h.when}</div>
                  </div>
                </div>
              ));
            })()}
          </div>
        )}
      </div>

      <div className="cdc-panel__actions">
        <button className="cdc-btn" onClick={handlePostpone} disabled={!canEdit} style={{ opacity: canEdit ? 1 : 0.5 }}>
          <I.Hourglass size={15} /> {task.status === "aplazada" ? "Reprogramar" : "Aplazar"}
        </button>
        <div className="cdc-btn--split">
          <button className="cdc-btn cdc-btn--primary cdc-btn--split-l" onClick={handleProgress} disabled={!canEdit} style={{ opacity: canEdit ? 1 : 0.5 }}>
            <I.Play size={14} /> {task.status === "progreso" ? "Marcar terminada" : "Marcar en progreso"}
          </button>
          <button className="cdc-btn cdc-btn--primary cdc-btn--split-r"><I.Chevron size={14} /></button>
        </div>
      </div>

      {postponeOpen && (
        <PostponeDialog
          task={task}
          onClose={() => setPostponeOpen(false)}
          onConfirm={confirmPostpone}
        />
      )}
    </aside>
  );
};

/* === Postpone dialog === */
const PostponeDialog = ({ task, onClose, onConfirm }) => {
  // Default proposal: next business day (or +7 for weekly tasks, etc.)
  const defaultDate = nextOccurrence(task.due, "diaria") || task.due;
  const [date, setDate] = React.useState(defaultDate);
  const picked = parseISO(date);
  const isBiz = isBusinessDay(picked);
  // For postponing, we use the default "back" direction (matches the rest of the system),
  // but when picked is BEFORE task.due (which would happen if back-rolled date equals or precedes the current due),
  // we instead show the next forward business day so the postpone is meaningful.
  const rolledBack = isBiz ? null : fmtISO(rollToBusinessDay(picked, "back"));
  const willRollTo = rolledBack;
  const reasons = [
    { id: "huesped",  label: "Huésped lo solicitó" },
    { id: "proveed",  label: "Falta material / proveedor no entregó" },
    { id: "clima",    label: "Clima" },
    { id: "personal", label: "Falta de personal" },
    { id: "otro",     label: "Otro" },
  ];
  const [reason, setReason] = React.useState("");

  // Quick options
  const quick = [
    { label: "Mañana",       iso: fmtISO(rollToBusinessDay(addDays(TODAY, 1))) },
    { label: "Pasado mañana",iso: fmtISO(rollToBusinessDay(addDays(TODAY, 2))) },
    { label: "+ 1 semana",   iso: fmtISO(rollToBusinessDay(addDays(parseISO(task.due), 7))) },
    { label: "+ 2 semanas",  iso: fmtISO(rollToBusinessDay(addDays(parseISO(task.due), 14))) },
  ];

  return (
    <div className="cdc-overlay" onClick={onClose} style={{ alignItems: "center", justifyContent: "center" }}>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "white", borderRadius: 14, width: 440, maxWidth: "92vw",
          boxShadow: "var(--cdc-shadow-lg)", overflow: "hidden",
        }}
      >
        <div style={{ padding: "16px 22px 4px" }}>
          <div className="cdc-drawer__title">{task.status === "aplazada" ? "Reprogramar tarea" : "Aplazar tarea"}</div>
          <div style={{ fontSize: 13, color: "var(--cdc-ink-3)", marginTop: 4, lineHeight: 1.45 }}>
            <strong style={{ color: "var(--cdc-ink-2)" }}>{task.title}</strong><br />
            Fecha actual: <strong style={{ color: "var(--cdc-ink-2)" }}>{fmtLongDate(task.due)}</strong>
          </div>
        </div>

        <div style={{ padding: "12px 22px", display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="cdc-field">
            <label>Nueva fecha</label>
            <input
              type="date"
              className="cdc-input"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              min={fmtISO(TODAY)}
            />
            {willRollTo && (
              <div className="cdc-helper" style={{ color: "var(--cdc-med)", marginTop: 4, display: "flex", alignItems: "center", gap: 6 }}>
                <I.AlertCircle size={12} />
                Esa fecha cae en {isWeekend(picked) ? "fin de semana" : "feriado"}. Se moverá automáticamente al día hábil anterior ({fmtLongDate(willRollTo)}).
              </div>
            )}
          </div>

          <div className="cdc-field">
            <label>Opciones rápidas</label>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {quick.map(q => (
                <button
                  key={q.iso}
                  type="button"
                  className="cdc-chip"
                  aria-pressed={date === q.iso}
                  onClick={() => setDate(q.iso)}
                >
                  {q.label} <span style={{ color: "var(--cdc-ink-4)", marginLeft: 4 }}>{fmtShortDate(q.iso)}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="cdc-field">
            <label>Motivo (opcional)</label>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {reasons.map(r => (
                <button
                  key={r.id}
                  type="button"
                  className="cdc-chip"
                  aria-pressed={reason === r.id}
                  onClick={() => setReason(r.id === reason ? "" : r.id)}
                >
                  {r.label}
                </button>
              ))}
            </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={() => onConfirm(date)}>
            <I.Hourglass size={14} /> {task.status === "aplazada" ? "Reprogramar" : "Aplazar"}
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TaskPanel });

/* === Before / After photo gallery for any task === */

const BeforeAfterGallery = ({ task, canEdit, onUpdate }) => {
  const [viewPhoto, setViewPhoto] = React.useState(null);
  const beforeInput = React.useRef(null);
  const afterInput = React.useRef(null);

  const before = task.photosBefore || [];
  const after  = task.photosAfter  || [];

  const addPhoto = (which, files) => {
    if (!canEdit) return;
    const promises = Array.from(files).map(f =>
      new Promise((ok) => {
        const r = new FileReader();
        r.onload = () => ok({ id: "p-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6), src: r.result, addedAt: TODAY_ISO });
        r.readAsDataURL(f);
      })
    );
    Promise.all(promises).then(items => {
      const arr = which === "before" ? before : after;
      const key = which === "before" ? "photosBefore" : "photosAfter";
      onUpdate({ ...task, [key]: [...arr, ...items] });
    });
  };

  const removePhoto = (which, id) => {
    if (!canEdit) return;
    if (!window.confirm("¿Eliminar esta foto?")) return;
    const arr = which === "before" ? before : after;
    const key = which === "before" ? "photosBefore" : "photosAfter";
    onUpdate({ ...task, [key]: arr.filter(p => p.id !== id) });
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <p className="cdc-p" style={{ fontSize: 12.5, color: "var(--cdc-ink-3)", margin: 0 }}>
        Sube fotos antes de iniciar la tarea y después de completarla para documentar el trabajo realizado.
      </p>

      <PhotoColumn
        label="Antes"
        photos={before}
        canEdit={canEdit}
        onUpload={() => beforeInput.current?.click()}
        onRemove={(id) => removePhoto("before", id)}
        onView={(p) => setViewPhoto(p.src)}
        emptyHint="Foto del estado inicial / problema reportado"
      />
      <input ref={beforeInput} type="file" accept="image/*" multiple style={{ display: "none" }}
        onChange={(e) => addPhoto("before", e.target.files)} />

      <PhotoColumn
        label="Después"
        photos={after}
        canEdit={canEdit}
        onUpload={() => afterInput.current?.click()}
        onRemove={(id) => removePhoto("after", id)}
        onView={(p) => setViewPhoto(p.src)}
        emptyHint="Foto del trabajo terminado"
      />
      <input ref={afterInput} type="file" accept="image/*" multiple style={{ display: "none" }}
        onChange={(e) => addPhoto("after", e.target.files)} />

      {viewPhoto && (
        <div className="cdc-overlay" onClick={() => setViewPhoto(null)} style={{ alignItems: "center", justifyContent: "center", zIndex: 100 }}>
          <img src={viewPhoto} alt="" style={{ maxWidth: "85vw", maxHeight: "85vh", borderRadius: 12, boxShadow: "var(--cdc-shadow-lg)" }} />
        </div>
      )}
    </div>
  );
};

const PhotoColumn = ({ label, photos, canEdit, onUpload, onRemove, onView, emptyHint }) => {
  const accent = label === "Antes" ? "var(--cdc-med)" : "var(--cdc-done)";
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 999, background: accent }} />
          <span className="cdc-section-h" style={{ marginBottom: 0 }}>{label}</span>
          <span style={{ fontSize: 12, color: "var(--cdc-ink-3)" }}>{photos.length} foto{photos.length === 1 ? "" : "s"}</span>
        </div>
        {canEdit && (
          <button className="cdc-chip" onClick={onUpload}>
            <I.Camera size={11} /> Subir
          </button>
        )}
      </div>
      {photos.length === 0 ? (
        <button
          onClick={canEdit ? onUpload : undefined}
          disabled={!canEdit}
          style={{
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8,
            width: "100%", padding: "22px 14px", borderRadius: 12,
            background: "var(--cdc-bg-soft)", border: "1px dashed var(--cdc-cream-300)",
            color: "var(--cdc-ink-3)", fontSize: 12.5,
            cursor: canEdit ? "pointer" : "default",
          }}
        >
          <I.Camera size={28} stroke={1.4} />
          <span>{emptyHint}</span>
          {canEdit && <span style={{ color: "var(--cdc-coral-deep)", fontWeight: 600 }}>Toca para subir</span>}
        </button>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: 8 }}>
          {photos.map(p => (
            <div key={p.id} style={{ position: "relative", borderRadius: 10, overflow: "hidden", border: "1px solid var(--cdc-border-soft)", aspectRatio: "1 / 1" }}>
              <button onClick={() => onView(p)} style={{ width: "100%", height: "100%", padding: 0, border: 0, cursor: "pointer", background: "var(--cdc-cream-100)" }}>
                <img src={p.src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </button>
              {canEdit && (
                <button
                  onClick={() => onRemove(p.id)}
                  title="Eliminar foto"
                  style={{
                    position: "absolute", top: 4, right: 4,
                    width: 24, height: 24, borderRadius: 999,
                    background: "rgba(0,0,0,0.55)", color: "white",
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}
                >
                  <I.Trash size={11} stroke={2} />
                </button>
              )}
              <button
                onClick={(e) => { e.stopPropagation(); downloadPhoto(p.src, `${label.toLowerCase()}-${p.id}.jpg`); }}
                title="Descargar foto"
                style={{
                  position: "absolute", bottom: 4, right: 4,
                  width: 24, height: 24, borderRadius: 999,
                  background: "rgba(0,0,0,0.55)", color: "white",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}
              >
                <I.Download size={11} stroke={2} />
              </button>
            </div>
          ))}
          {canEdit && (
            <button
              onClick={onUpload}
              style={{
                aspectRatio: "1 / 1", borderRadius: 10,
                background: "var(--cdc-bg-soft)", border: "1px dashed var(--cdc-cream-300)",
                color: "var(--cdc-ink-3)",
                display: "flex", alignItems: "center", justifyContent: "center", gap: 4, flexDirection: "column", fontSize: 11.5,
              }}
            >
              <I.Plus size={20} />
              <span>Otra</span>
            </button>
          )}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { BeforeAfterGallery, PhotoColumn });