/* TeamBoard — Kanban partagé entre Clarens, Kevin et Carly.
   Tasks are seeded from TASKS but reactive via localStorage so the 3 cofounders
   see the same state across tabs and (best-effort) cross-device. */

const TEAM_BOARD_KEY = "kcc_team_board_v1";
const TEAM_BOARD_EVT = "kcc:team-board-change";

function loadTasks() {
  try {
    const raw = localStorage.getItem(TEAM_BOARD_KEY);
    if (raw) {
      const parsed = JSON.parse(raw);
      if (Array.isArray(parsed) && parsed.length) return parsed;
    }
  } catch (_) {}
  return TASKS.map(t => ({ ...t }));
}

function saveTasks(list) {
  try {
    localStorage.setItem(TEAM_BOARD_KEY, JSON.stringify(list));
    window.dispatchEvent(new CustomEvent(TEAM_BOARD_EVT, { detail: list }));
    fetch("/api/sync/prefs", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ key: "team_board", value: list }),
    }).catch(() => {});
  } catch (_) {}
}

function useTeamBoard() {
  const { useState, useEffect } = React;
  const [tasks, setTasks] = useState(loadTasks);
  useEffect(() => {
    const onStorage = (e) => {
      if (e.key === TEAM_BOARD_KEY && e.newValue) {
        try { setTasks(JSON.parse(e.newValue)); } catch (_) {}
      }
    };
    const onLocal = (e) => { if (Array.isArray(e.detail)) setTasks(e.detail); };
    window.addEventListener("storage", onStorage);
    window.addEventListener(TEAM_BOARD_EVT, onLocal);
    return () => {
      window.removeEventListener("storage", onStorage);
      window.removeEventListener(TEAM_BOARD_EVT, onLocal);
    };
  }, []);

  const update = (next) => { setTasks(next); saveTasks(next); };
  const moveTask = (id, status) => update(tasks.map(t => t.id === id ? { ...t, status } : t));
  const reassignTask = (id, assignee) => update(tasks.map(t => t.id === id ? { ...t, assignee } : t));
  const togglePrio = (id) => {
    const order = ["basse", "moyenne", "haute"];
    update(tasks.map(t => t.id === id ? { ...t, prio: order[(order.indexOf(t.prio) + 1) % order.length] } : t));
  };
  const addTask = (data) => {
    const id = "t-" + Date.now().toString(36);
    const fresh = { id, status: "todo", prio: "moyenne", ...data };
    update([fresh, ...tasks]);
    try {
      fetch("/api/sync", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ col: "tasks", items: [fresh] }),
      }).catch(() => {});
    } catch (_) {}
  };
  const removeTask = async (id) => {
    const task = tasks.find(t => t.id === id);
    if (!task) return;
    if (!window.confirm(`Mettre "${task.title}" à la corbeille ?`)) return;
    try {
      if (window.KCCTrash?.send) await window.KCCTrash.send("tasks", task);
    } catch (_) {}
    update(tasks.filter(t => t.id !== id));
  };
  const updateTask = (id, patch) => update(tasks.map(t => t.id === id ? { ...t, ...patch } : t));

  return { tasks, moveTask, reassignTask, togglePrio, addTask, removeTask, updateTask };
}

const PRIO_COLORS = {
  haute:   { bg: "oklch(0.68 0.21 24 / 0.12)",  fg: "var(--red)" },
  moyenne: { bg: "oklch(0.78 0.15 75 / 0.12)",  fg: "var(--amber)" },
  basse:   { bg: "oklch(0.6 0.012 250 / 0.12)", fg: "var(--text-dim)" },
};

const TaskCard = ({ task, onMove, onReassign, onTogglePrio, onRemove, onUpdate }) => {
  const u = USERS.find(x => x.id === task.assignee) || USERS[0];
  const prioStyle = PRIO_COLORS[task.prio] || PRIO_COLORS.moyenne;
  return (
    <div
      className="card"
      draggable
      onDragStart={(e) => e.dataTransfer.setData("text/plain", task.id)}
      style={{ padding: 12, cursor: "grab" }}
    >
      <div className="between" style={{ alignItems: "flex-start", gap: 8 }}>
        <div style={{ fontSize: 12.5, fontWeight: 550, lineHeight: 1.35, flex: 1 }}>
          <EditableField value={task.title} onSave={(v) => onUpdate?.(task.id, { title: v })} width="100%"/>
        </div>
        <button
          className="icon-btn"
          title="Supprimer"
          onClick={() => onRemove(task.id)}
          style={{ width: 22, height: 22, opacity: 0.5 }}
        >
          <Icon name="x" size={11} />
        </button>
      </div>
      <div className="row" style={{ marginTop: 10, justifyContent: "space-between" }}>
        <div className="row" style={{ gap: 6 }}>
          <button
            onClick={() => onTogglePrio(task.id)}
            title="Cycle priorité"
            style={{
              padding: "2px 8px", borderRadius: 999, border: "none", cursor: "pointer",
              background: prioStyle.bg, color: prioStyle.fg, fontSize: 10.5,
              fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em",
            }}
          >
            {task.prio}
          </button>
          <span className="mono" style={{ fontSize: 10.5, color: "var(--text-faint)" }}>
            <Icon name="calendar" size={10} style={{ verticalAlign: "-1px", marginRight: 2 }} />
            <EditableField value={task.due} onSave={(v) => onUpdate?.(task.id, { due: v })} width={90}/>
          </span>
        </div>
        <div className="row" style={{ gap: 2 }}>
          {USERS.map(member => (
            <button
              key={member.id}
              onClick={() => onReassign(task.id, member.id)}
              title={`Réassigner à ${member.name}`}
              style={{
                width: 22, height: 22, borderRadius: 999, border: 0,
                background: "transparent", padding: 0, cursor: "pointer",
                opacity: member.id === u.id ? 1 : 0.3,
                boxShadow: member.id === u.id ? "0 0 0 2px var(--accent)" : "none",
                transition: "opacity 120ms, box-shadow 120ms",
              }}
            >
              <Avatar user={member.id} size="sm" />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

const NewTaskRow = ({ onAdd }) => {
  const [me] = useCurrentUser();
  const [title, setTitle] = useState("");
  const [assignee, setAssignee] = useState(me.id);
  const [due, setDue] = useState("");

  const submit = (e) => {
    e.preventDefault();
    if (!title.trim()) return;
    onAdd({ title: title.trim(), assignee, due: due || "—" });
    setTitle(""); setDue("");
  };

  return (
    <form onSubmit={submit} className="card" style={{ padding: 10, marginBottom: 12 }}>
      <div className="row" style={{ gap: 8 }}>
        <div className="input" style={{ flex: 1 }}>
          <Icon name="plus" size={12} style={{ marginRight: 6, color: "var(--text-dim)" }} />
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Nouvelle tâche…"
            style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)" }}
          />
        </div>
        <select
          value={assignee}
          onChange={(e) => setAssignee(e.target.value)}
          className="input"
          style={{ width: 130, fontSize: 12 }}
        >
          {USERS.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
        </select>
        <div className="input" style={{ width: 110 }}>
          <Icon name="calendar" size={12} style={{ marginRight: 6, color: "var(--text-dim)" }} />
          <input
            value={due}
            onChange={(e) => setDue(e.target.value)}
            placeholder="ex: 15 mai"
            style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)", fontSize: 12 }}
          />
        </div>
        <button type="submit" className="btn" data-variant="primary" style={{ height: 32 }}>
          Ajouter
        </button>
      </div>
    </form>
  );
};

const TeamBoard = () => {
  const board = useTeamBoard();
  const [me] = useCurrentUser();
  const [filter, setFilter] = useState("all"); // all | mine

  const visibleTasks = board.tasks.filter(t => filter === "all" || t.assignee === me.id);

  const counts = {};
  TASK_STATUSES.forEach(s => { counts[s.id] = visibleTasks.filter(t => t.status === s.id).length; });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">TeamBoard</div>
          <div className="page-sub">
            {board.tasks.length} tâches · partagées entre {USERS.map(u => u.name).join(", ")} ·
            sync localStorage + cross-device (best-effort)
          </div>
        </div>
        <div className="row" style={{ gap: 6 }}>
          <button
            className="btn"
            data-variant={filter === "all" ? "primary" : "ghost"}
            onClick={() => setFilter("all")}
          >
            Toutes · {board.tasks.length}
          </button>
          <button
            className="btn"
            data-variant={filter === "mine" ? "primary" : "ghost"}
            onClick={() => setFilter("mine")}
          >
            <Avatar user={me.id} size="sm" /> Les miennes · {board.tasks.filter(t => t.assignee === me.id).length}
          </button>
        </div>
      </div>

      <NewTaskRow onAdd={board.addTask} />

      <div
        className="grid"
        style={{ gridTemplateColumns: `repeat(${TASK_STATUSES.length}, 1fr)`, gap: 12, alignItems: "stretch" }}
      >
        {TASK_STATUSES.map(col => (
          <div
            key={col.id}
            onDragOver={(e) => e.preventDefault()}
            onDrop={(e) => {
              const id = e.dataTransfer.getData("text/plain");
              if (id) board.moveTask(id, col.id);
            }}
            style={{
              background: "var(--bg-1)",
              border: "1px solid var(--border-subtle)",
              borderRadius: 10,
              padding: 10,
              minHeight: 320,
            }}
          >
            <div className="between" style={{ marginBottom: 10 }}>
              <div className="row" style={{ gap: 6 }}>
                <Badge tone={col.tone} dot>{col.label}</Badge>
              </div>
              <span className="mono" style={{ fontSize: 11, color: "var(--text-faint)" }}>
                {counts[col.id] || 0}
              </span>
            </div>
            <div className="stack" style={{ gap: 8 }}>
              {visibleTasks.filter(t => t.status === col.id).map(task => (
                <TaskCard
                  key={task.id}
                  task={task}
                  onMove={board.moveTask}
                  onReassign={board.reassignTask}
                  onTogglePrio={board.togglePrio}
                  onRemove={board.removeTask}
                  onUpdate={board.updateTask}
                />
              ))}
              {visibleTasks.filter(t => t.status === col.id).length === 0 && (
                <div
                  style={{
                    padding: "20px 10px", textAlign: "center", color: "var(--text-faint)",
                    fontSize: 11.5, border: "1px dashed var(--border-subtle)", borderRadius: 8,
                  }}
                >
                  Glissez une tâche ici
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.TeamBoard = TeamBoard;