/* Tab: Planning — dos listas de tareas (Álvaro a la izquierda, José a la derecha).
   Compartido por todo el equipo (no depende de quién tenga la sesión iniciada):
   crear tareas, marcarlas como completadas, y asignarles fecha y canal de YouTube. */

const PLANNING_PEOPLE = [
  { id: "alvaro", label: "Álvaro" },
  { id: "jose", label: "José" },
];

function PlanningChannelChip({ ch, size = 16 }) {
  if (!ch) return null;
  const src = ch.logo || ch.avatarUrl || null;
  return (
    <span style={{
      width: size, height: size, borderRadius: 4, background: ch.tint,
      display: "grid", placeItems: "center", fontSize: size * 0.45, fontWeight: 700, color: "#00000099",
      overflow: "hidden", flex: `0 0 ${size}px`,
    }}>
      {src ? <img src={src} style={{ width: "100%", height: "100%", objectFit: "cover" }}/> : ch.initials}
    </span>
  );
}

function _planningFmtDate(iso) {
  if (!iso) return null;
  const d = new Date(iso + "T00:00:00");
  if (isNaN(d.getTime())) return null;
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const diffDays = Math.round((d - today) / 86400000);
  if (diffDays === 0) return "Hoy";
  if (diffDays === 1) return "Mañana";
  if (diffDays === -1) return "Ayer";
  return d.toLocaleDateString("es-ES", { day: "2-digit", month: "short" });
}

const PLANNING_BUCKETS = [
  { id: "past", label: "Pasado" },
  { id: "today", label: "Hoy" },
  { id: "tomorrow", label: "Mañana" },
  { id: "future", label: "En futuro" },
  { id: "none", label: "Sin fecha" },
];

function _planningBucket(task) {
  if (!task.due_date) return "none";
  const d = new Date(task.due_date + "T00:00:00");
  if (isNaN(d.getTime())) return "none";
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const diffDays = Math.round((d - today) / 86400000);
  if (diffDays < 0) return "past";
  if (diffDays === 0) return "today";
  if (diffDays === 1) return "tomorrow";
  return "future";
}

function PlanningTaskRow({ task, channels, onToggle, onDelete, onUpdate }) {
  const [menuOpen, setMenuOpen] = React.useState(null); // "channel" | "date" | null
  const ch = channels.find((c) => c.id === task.channel_id) || null;
  const dateLabel = _planningFmtDate(task.due_date);
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const isOverdue = !task.completed && task.due_date && new Date(task.due_date + "T00:00:00") < today;

  React.useEffect(() => {
    if (!menuOpen) return;
    function onDocClick() { setMenuOpen(null); }
    document.addEventListener("click", onDocClick);
    return () => document.removeEventListener("click", onDocClick);
  }, [menuOpen]);

  return (
    <div className="row" style={{
      gap: 8, padding: "8px 10px", borderRadius: 8,
      background: "var(--bg-card-2)", border: "1px solid var(--border)",
      opacity: task.completed ? 0.55 : 1,
    }}>
      <input type="checkbox" checked={!!task.completed} onChange={() => onToggle(task)}
        style={{ width: 15, height: 15, flexShrink: 0, cursor: "pointer", marginTop: 1 }}/>
      <div className="grow" style={{ minWidth: 0 }}>
        <div style={{
          fontSize: 12.5, color: "var(--text)",
          textDecoration: task.completed ? "line-through" : "none",
          wordBreak: "break-word",
        }}>{task.title}</div>
        <div className="row" style={{ gap: 6, marginTop: 5, flexWrap: "wrap" }}>
          <span style={{ position: "relative" }}>
            <button onClick={(e) => { e.stopPropagation(); setMenuOpen(menuOpen === "channel" ? null : "channel"); }}
              style={{
                display: "inline-flex", alignItems: "center", gap: 5, cursor: "pointer",
                background: "var(--bg-3)", border: "1px solid var(--border)", borderRadius: 999,
                padding: ch ? "2px 8px 2px 4px" : "2px 8px", fontSize: 10.5, color: "var(--text-3)",
              }}>
              {ch ? <><PlanningChannelChip ch={ch}/> {ch.name}</> : "Sin canal"}
            </button>
            {menuOpen === "channel" && (
              <div className="card-options" onClick={(e) => e.stopPropagation()} style={{
                left: 0, top: 24, minWidth: 180, maxHeight: 240, overflowY: "auto", padding: 4,
              }}>
                <button onClick={() => { onUpdate(task, { channel_id: "" }); setMenuOpen(null); }} style={{
                  width: "100%", background: "transparent", border: "none", color: "var(--text-3)",
                  fontSize: 12, padding: "7px 9px", borderRadius: 7, cursor: "pointer", textAlign: "left",
                }}>Sin canal</button>
                {channels.map((c) => (
                  <button key={c.id} onClick={() => { onUpdate(task, { channel_id: c.id }); setMenuOpen(null); }} style={{
                    width: "100%", background: "transparent", border: "none", color: "var(--text)",
                    fontSize: 12, padding: "7px 9px", borderRadius: 7, cursor: "pointer",
                    display: "flex", alignItems: "center", gap: 8, textAlign: "left",
                  }}>
                    <PlanningChannelChip ch={c}/> {c.name}
                  </button>
                ))}
              </div>
            )}
          </span>
          <span style={{ position: "relative" }}>
            <button onClick={(e) => { e.stopPropagation(); setMenuOpen(menuOpen === "date" ? null : "date"); }}
              style={{
                display: "inline-flex", alignItems: "center", gap: 4, cursor: "pointer",
                background: "var(--bg-3)", border: "1px solid var(--border)", borderRadius: 999,
                padding: "2px 8px", fontSize: 10.5, color: isOverdue ? "#f87171" : "var(--text-3)",
              }}>
              <IconClock size={10}/> {dateLabel || "Sin fecha"}
            </button>
            {menuOpen === "date" && (
              <div className="card-options" onClick={(e) => e.stopPropagation()} style={{
                left: 0, top: 24, padding: 8, minWidth: 170,
              }}>
                <input type="date" className="input" style={{ fontSize: 12, padding: "5px 7px" }}
                  value={task.due_date || ""}
                  onChange={(e) => { onUpdate(task, { due_date: e.target.value }); setMenuOpen(null); }}/>
                {task.due_date && (
                  <button className="btn btn-ghost" style={{ width: "100%", marginTop: 6, fontSize: 11.5, justifyContent: "center" }}
                    onClick={() => { onUpdate(task, { due_date: "" }); setMenuOpen(null); }}>
                    Quitar fecha
                  </button>
                )}
              </div>
            )}
          </span>
        </div>
      </div>
      <button className="icon-btn" style={{ width: 24, height: 24, flexShrink: 0 }}
        title="Eliminar tarea" onClick={() => onDelete(task)}>
        <IconTrash size={12}/>
      </button>
    </div>
  );
}

function PlanningColumn({ person, tasks, channels, onCreate, onToggle, onDelete, onUpdate }) {
  const [title, setTitle] = React.useState("");
  const [channelId, setChannelId] = React.useState("");
  const [dueDate, setDueDate] = React.useState("");
  const [creating, setCreating] = React.useState(false);

  const pending = tasks.filter((t) => !t.completed);

  async function submit(e) {
    e.preventDefault();
    if (!title.trim() || creating) return;
    setCreating(true);
    await onCreate({ assignee: person.id, title: title.trim(), channel_id: channelId || null, due_date: dueDate || null });
    setTitle(""); setChannelId(""); setDueDate("");
    setCreating(false);
  }

  return (
    <div className="card card-pad" style={{ flex: "1 1 380px", minWidth: 320 }}>
      <div className="row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
        <h3 className="card-title" style={{ margin: 0 }}>{person.label}</h3>
        <span style={{ fontSize: 11.5, color: "var(--text-4)" }}>
          {pending.length} pendiente{pending.length !== 1 ? "s" : ""}
        </span>
      </div>

      <form onSubmit={submit} className="col" style={{ gap: 8, marginBottom: 16 }}>
        <input className="input" value={title} onChange={(e) => setTitle(e.target.value)}
          placeholder={`Nueva tarea para ${person.label}…`} style={{ fontSize: 13 }}/>
        <div className="row" style={{ gap: 8 }}>
          <select className="input" value={channelId} onChange={(e) => setChannelId(e.target.value)}
            style={{ flex: 1, fontSize: 12.5 }}>
            <option value="">Sin canal</option>
            {channels.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
          <input type="date" className="input" value={dueDate} onChange={(e) => setDueDate(e.target.value)}
            style={{ flex: 1, fontSize: 12.5 }}/>
          <button type="submit" className="btn btn-primary" disabled={!title.trim() || creating} style={{ flexShrink: 0, padding: "7px 12px" }}>
            <IconPlus size={13}/>
          </button>
        </div>
      </form>

      <div className="col" style={{ gap: 6 }}>
        {tasks.length === 0 && (
          <div style={{ fontSize: 12.5, color: "var(--text-4)", textAlign: "center", padding: "16px 0" }}>
            Sin tareas todavía.
          </div>
        )}
        {PLANNING_BUCKETS.map((bucket, i) => {
          const bucketTasks = tasks.filter((t) => _planningBucket(t) === bucket.id);
          if (bucketTasks.length === 0) return null;
          return (
            <React.Fragment key={bucket.id}>
              <div style={{
                fontSize: 10.5, color: bucket.id === "past" ? "#f87171" : "var(--text-4)",
                fontWeight: 700, letterSpacing: "0.06em",
                textTransform: "uppercase", marginTop: i === 0 ? 0 : 10, marginBottom: 2,
              }}>
                {bucket.label} ({bucketTasks.length})
              </div>
              {bucketTasks.map((t) => (
                <PlanningTaskRow key={t.id} task={t} channels={channels} onToggle={onToggle} onDelete={onDelete} onUpdate={onUpdate}/>
              ))}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

function PlanningTab({ channels }) {
  const [tasks, setTasks] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const activeChannels = (channels || []).filter((c) => c.active !== false);

  function loadTasks() {
    fetch("/api/planning/tasks", { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => setTasks(d.tasks || []))
      .catch(() => {})
      .finally(() => setLoading(false));
  }
  React.useEffect(() => { loadTasks(); }, []);

  async function createTask(payload) {
    try {
      const r = await fetch("/api/planning/tasks", {
        method: "POST", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const d = await r.json();
      if (r.ok && d.success) setTasks((prev) => [...prev, d.task]);
    } catch { /* ignore */ }
  }

  async function toggleTask(task) {
    const nextCompleted = !task.completed;
    setTasks((prev) => prev.map((t) => t.id === task.id ? { ...t, completed: nextCompleted } : t));
    try {
      await fetch(`/api/planning/tasks/${task.id}`, {
        method: "PUT", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ completed: nextCompleted }),
      });
    } catch { /* ignore */ }
  }

  async function updateTask(task, patch) {
    setTasks((prev) => prev.map((t) => t.id === task.id ? { ...t, ...patch } : t));
    try {
      await fetch(`/api/planning/tasks/${task.id}`, {
        method: "PUT", credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(patch),
      });
    } catch { /* ignore */ }
  }

  async function deleteTask(task) {
    setTasks((prev) => prev.filter((t) => t.id !== task.id));
    try {
      await fetch(`/api/planning/tasks/${task.id}`, { method: "DELETE", credentials: "same-origin" });
    } catch { /* ignore */ }
  }

  return (
    <div className="tab-enter">
      {loading ? (
        <div style={{ textAlign: "center", padding: 60, color: "var(--text-3)" }}>Cargando…</div>
      ) : (
        <div className="row" style={{ gap: 16, alignItems: "flex-start", flexWrap: "wrap" }}>
          {PLANNING_PEOPLE.map((person) => (
            <PlanningColumn key={person.id} person={person}
              tasks={tasks.filter((t) => t.assignee === person.id)}
              channels={activeChannels}
              onCreate={createTask} onToggle={toggleTask} onDelete={deleteTask} onUpdate={updateTask}/>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PlanningTab });