const TEAM = ["Elad", "Almog", "Rave", "Adi", "Kobi"];
const TEAM_HUE = { Elad: 220, Almog: 280, Rave: 150, Adi: 30, Kobi: 340 };

const KCOLS = [
  { id: "backlog",     label: "Backlog",     color: "#94a3b8" },
  { id: "todo",        label: "To Do",       color: "#3b82f6" },
  { id: "in_progress", label: "In Progress", color: "#f97316" },
  { id: "done",        label: "Done",        color: "#22c55e" },
];

const PRIORITY_COLOR = { high: "#ef4444", medium: "#f59e0b", low: "#22c55e" };

function memberColor(name) {
  const h = TEAM_HUE[name];
  return h != null ? `hsl(${h},60%,50%)` : "#94a3b8";
}

function MemberAvatar({ name, size = 26, onClick, active, dimmed, tooltip }) {
  if (!name) return null;
  const [hovered, setHovered] = React.useState(false);
  return (
    <div style={{ position: "relative", flexShrink: 0 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div
        onClick={onClick}
        style={{
          width: size, height: size, borderRadius: "50%",
          background: memberColor(name), color: "white",
          fontSize: size * 0.38, fontWeight: 700,
          display: "flex", alignItems: "center", justifyContent: "center",
          letterSpacing: "-.02em",
          cursor: onClick ? "pointer" : "default",
          boxShadow: active
            ? `0 0 0 3px white, 0 0 0 5px ${memberColor(name)}`
            : "0 1px 3px rgba(0,0,0,.15)",
          opacity: dimmed ? 0.3 : 1,
          transition: "opacity .15s, box-shadow .15s, transform .1s",
          transform: hovered && onClick ? "scale(1.1)" : "scale(1)",
        }}
      >
        {name.slice(0, 2).toUpperCase()}
      </div>
      {/* Tooltip */}
      {hovered && tooltip && (
        <div style={{
          position: "absolute", bottom: "calc(100% + 8px)", left: "50%",
          transform: "translateX(-50%)",
          background: "var(--ink)", color: "white",
          fontSize: 11, fontWeight: 500, whiteSpace: "nowrap",
          padding: "4px 9px", borderRadius: 6,
          pointerEvents: "none", zIndex: 100,
          boxShadow: "0 2px 8px rgba(0,0,0,.2)",
        }}>
          {tooltip}
          <div style={{
            position: "absolute", top: "100%", left: "50%",
            transform: "translateX(-50%)",
            border: "4px solid transparent",
            borderTopColor: "var(--ink)",
          }}/>
        </div>
      )}
    </div>
  );
}

function KanbanCard({ task, onEdit, isDragging, onDragStart, onDragEnd }) {
  const pc = PRIORITY_COLOR[task.priority];

  return (
    <div
      draggable
      onDragStart={e => {
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("taskId", task.id);
        // Delay fade so browser captures the full-opacity version as ghost image
        setTimeout(() => onDragStart(task.id), 0);
      }}
      onDragEnd={() => onDragEnd()}
      onClick={() => onEdit(task)}
      style={{
        background: "var(--bg-elev)",
        border: "1.5px solid var(--border-2)",
        borderRadius: 10,
        padding: "12px 14px",
        cursor: "grab",
        userSelect: "none",
        position: "relative",
        boxShadow: "0 1px 4px rgba(0,0,0,.07), 0 0 0 0 transparent",
        opacity: isDragging ? 0.35 : 1,
        transition: "opacity .15s, box-shadow .12s, transform .1s",
        transform: isDragging ? "scale(0.98)" : "scale(1)",
      }}
    >
      {/* Coloured left-edge priority strip */}
      {pc && (
        <div style={{
          position: "absolute", left: 0, top: 8, bottom: 8,
          width: 3, borderRadius: "0 2px 2px 0", background: pc,
        }}/>
      )}

      {/* Title + avatar row */}
      <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 13, lineHeight: 1.4, color: "var(--ink)" }}>
            {task.title}
          </div>
          {task.description && (
            <div style={{
              fontSize: 11.5, color: "var(--ink-3)", marginTop: 5, lineHeight: 1.5,
              display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
            }}>
              {task.description}
            </div>
          )}
        </div>
        <MemberAvatar name={task.assignee} size={26}/>
      </div>

      {/* Footer: name · priority · date */}
      <div style={{ display: "flex", alignItems: "center", marginTop: 10, gap: 6 }}>
        {task.assignee && (
          <span style={{ fontSize: 11, color: memberColor(task.assignee), fontWeight: 600 }}>
            {task.assignee}
          </span>
        )}
        <div style={{ flex: 1 }}/>
        {pc && task.priority !== "none" && (
          <span style={{
            fontSize: 10, color: pc, fontWeight: 600, textTransform: "capitalize",
            background: pc + "1a", padding: "2px 7px", borderRadius: 20,
          }}>
            {task.priority}
          </span>
        )}
        <span style={{ fontSize: 10, color: "var(--ink-4)" }}>{fmtRelative(task.createdAt)}</span>
      </div>
    </div>
  );
}

function KanbanColumn({ col, tasks, onAdd, onEdit, onDrop, draggingId, onDragStart, onDragEnd }) {
  const [over, setOver] = React.useState(false);
  // Show placeholder only when dragging a card from a DIFFERENT column into this one
  const showPlaceholder = over && draggingId && !tasks.find(t => t.id === draggingId);

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {/* Column header */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 2px", marginBottom: 10 }}>
        <div style={{ width: 10, height: 10, borderRadius: 3, background: col.color, flexShrink: 0 }}/>
        <span style={{ fontWeight: 700, fontSize: 13, color: "var(--ink)" }}>{col.label}</span>
        <span style={{
          fontSize: 11, color: "var(--ink-4)", background: "var(--bg-soft)",
          border: "1px solid var(--border)", padding: "0 7px", borderRadius: 20,
        }}>{tasks.length}</span>
        <div style={{ flex: 1 }}/>
        <button className="btn ghost icon sm" style={{ opacity: 0.55 }} title="Add task" onClick={() => onAdd(col.id)}>
          <Icon.plus size={14}/>
        </button>
      </div>

      {/* Column body — droppable zone */}
      <div
        onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setOver(true); }}
        onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setOver(false); }}
        onDrop={e => { e.preventDefault(); setOver(false); onDrop(e.dataTransfer.getData("taskId"), col.id); }}
        style={{
          background: over ? col.color + "0d" : "var(--bg-soft)",
          border: `1.5px solid ${over ? col.color + "55" : "var(--border)"}`,
          borderRadius: 12, padding: 10, minHeight: 220,
          display: "flex", flexDirection: "column", gap: 8,
          transition: "background .12s, border-color .12s",
        }}
      >
        {tasks.map(t => (
          <KanbanCard
            key={t.id} task={t} onEdit={onEdit}
            isDragging={draggingId === t.id}
            onDragStart={onDragStart}
            onDragEnd={onDragEnd}
          />
        ))}

        {/* Drop placeholder shown when hovering with a foreign card */}
        {showPlaceholder && (
          <div style={{
            border: `2px dashed ${col.color}`,
            borderRadius: 10, height: 64,
            background: col.color + "12",
          }}/>
        )}

        {/* Empty state */}
        {tasks.length === 0 && !showPlaceholder && (
          <div
            onClick={() => onAdd(col.id)}
            style={{
              flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--ink-4)", fontSize: 12, cursor: "pointer",
              minHeight: 80,
            }}
          >
            + Add task
          </div>
        )}
      </div>
    </div>
  );
}

function TaskModal({ open, task, defaultStatus, onClose, onSave, onDelete }) {
  const [form, setForm] = React.useState({});
  const [saving, setSaving] = React.useState(false);

  React.useEffect(() => {
    if (open) setForm(task
      ? { title: "", description: "", assignee: "", priority: "medium", status: "todo", ...task }
      : { title: "", description: "", assignee: "", priority: "medium", status: defaultStatus || "todo" }
    );
  }, [open, task?.id, defaultStatus]);

  if (!open) return null;

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

  async function submit() {
    if (!form.title.trim()) return;
    setSaving(true);
    await onSave(form);
    setSaving(false);
    onClose();
  }

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose}/>
      <div className="drawer" style={{ width: 460, maxWidth: "90vw" }}>
        <header>
          <div style={{ fontWeight: 600 }}>{task ? "Edit task" : "New task"}</div>
          <div className="spacer"/>
          {task && (
            <button className="btn ghost sm" style={{ color: "var(--red)", marginRight: 8 }}
              onClick={() => { onDelete(task.id); onClose(); }}>
              Delete
            </button>
          )}
          <button className="btn ghost icon sm" onClick={onClose}><Icon.close size={14}/></button>
        </header>

        <div className="body" style={{ padding: "20px 24px", display: "flex", flexDirection: "column", gap: 14 }}>
          <div>
            <label style={{ fontSize: 12, fontWeight: 500, display: "block", marginBottom: 5 }}>Title *</label>
            <input autoFocus value={form.title || ""} onChange={e => set("title", e.target.value)}
              onKeyDown={e => e.key === "Enter" && submit()}
              placeholder="What needs to be done?"
              style={{ width: "100%", padding: "8px 10px", borderRadius: 7, border: "1px solid var(--border)", background: "var(--bg-elev)", color: "var(--ink)", fontSize: 13, boxSizing: "border-box" }}/>
          </div>
          <div>
            <label style={{ fontSize: 12, fontWeight: 500, display: "block", marginBottom: 5 }}>Description</label>
            <textarea value={form.description || ""} onChange={e => set("description", e.target.value)}
              placeholder="Optional details…" rows={3}
              style={{ width: "100%", padding: "8px 10px", borderRadius: 7, border: "1px solid var(--border)", background: "var(--bg-elev)", color: "var(--ink)", fontSize: 13, lineHeight: 1.5, resize: "vertical", boxSizing: "border-box" }}/>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <label style={{ fontSize: 12, fontWeight: 500, display: "block", marginBottom: 5 }}>Assignee</label>
              <select value={form.assignee || ""} onChange={e => set("assignee", e.target.value)}
                style={{ width: "100%", padding: "7px 10px", borderRadius: 7, border: "1px solid var(--border)", background: "var(--bg-elev)", color: "var(--ink)", fontSize: 13 }}>
                <option value="">Unassigned</option>
                {TEAM.map(m => <option key={m} value={m}>{m}</option>)}
              </select>
            </div>
            <div>
              <label style={{ fontSize: 12, fontWeight: 500, display: "block", marginBottom: 5 }}>Priority</label>
              <select value={form.priority || "medium"} onChange={e => set("priority", e.target.value)}
                style={{ width: "100%", padding: "7px 10px", borderRadius: 7, border: "1px solid var(--border)", background: "var(--bg-elev)", color: "var(--ink)", fontSize: 13 }}>
                <option value="low">🟢 Low</option>
                <option value="medium">🟡 Medium</option>
                <option value="high">🔴 High</option>
              </select>
            </div>
          </div>
          <div>
            <label style={{ fontSize: 12, fontWeight: 500, display: "block", marginBottom: 8 }}>Column</label>
            <div style={{ display: "flex", gap: 8 }}>
              {KCOLS.map(c => (
                <button key={c.id} onClick={() => set("status", c.id)} style={{
                  flex: 1, padding: "7px 4px", borderRadius: 7, cursor: "pointer",
                  border: `2px solid ${form.status === c.id ? c.color : "var(--border)"}`,
                  background: form.status === c.id ? c.color + "15" : "transparent",
                  color: form.status === c.id ? c.color : "var(--ink-4)",
                  fontSize: 11, fontWeight: form.status === c.id ? 700 : 400,
                }}>{c.label}</button>
              ))}
            </div>
          </div>
        </div>

        <footer style={{ padding: "12px 24px", borderTop: "1px solid var(--border)", display: "flex", gap: 8, justifyContent: "flex-end" }}>
          <button className="btn sm" onClick={onClose}>Cancel</button>
          <button className="btn primary sm" onClick={submit} disabled={saving || !form.title?.trim()}>
            {saving ? "Saving…" : task ? "Save changes" : "Create task"}
          </button>
        </footer>
      </div>
    </>
  );
}

function PageKanban() {
  const [tasks, setTasks]           = React.useState([]);
  const [loading, setLoading]       = React.useState(true);
  const [error, setError]           = React.useState(null);
  const [draggingId, setDraggingId] = React.useState(null);
  const [modal, setModal]           = React.useState({ open: false, task: null, defaultStatus: "todo" });
  const [filterMembers, setFilterMembers] = React.useState(new Set()); // empty = show all

  function toggleMember(name) {
    setFilterMembers(prev => {
      const next = new Set(prev);
      if (next.has(name)) next.delete(name);
      else next.add(name);
      return next;
    });
  }

  React.useEffect(() => {
    const db = window.__db; const fs = window.__fs;
    if (!db || !fs) { setLoading(false); setError("Firestore not initialized"); return; }
    const q = fs.query(fs.collection(db, "adminKanban"), fs.orderBy("createdAt", "asc"));
    const unsub = fs.onSnapshot(q, snap => {
      setTasks(snap.docs.map(d => ({
        id: d.id, ...d.data(),
        createdAt: d.data().createdAt?.toDate?.()?.toISOString() ?? null,
      })));
      setLoading(false);
    }, err => { setError(err.message); setLoading(false); });
    return unsub;
  }, []);

  async function handleSave(form) {
    const db = window.__db; const fs = window.__fs;
    const { id, createdAt, ...rest } = form;
    if (id) await fs.updateDoc(fs.doc(db, "adminKanban", id), { ...rest, updatedAt: fs.serverTimestamp() });
    else     await fs.addDoc(fs.collection(db, "adminKanban"), { ...rest, createdAt: fs.serverTimestamp(), updatedAt: fs.serverTimestamp() });
  }

  async function handleDelete(id) {
    const db = window.__db; const fs = window.__fs;
    await fs.deleteDoc(fs.doc(db, "adminKanban", id));
  }

  async function handleDrop(taskId, newStatus) {
    if (!taskId) return;
    setDraggingId(null);
    const db = window.__db; const fs = window.__fs;
    await fs.updateDoc(fs.doc(db, "adminKanban", taskId), { status: newStatus, updatedAt: fs.serverTimestamp() });
  }

  const visibleTasks = filterMembers.size === 0
    ? tasks
    : tasks.filter(t => filterMembers.has(t.assignee));

  const byCol = id => visibleTasks.filter(t => (t.status || "backlog") === id);

  return (
    <>
      <TaskModal
        open={modal.open} task={modal.task} defaultStatus={modal.defaultStatus}
        onClose={() => setModal(m => ({ ...m, open: false }))}
        onSave={handleSave} onDelete={handleDelete}
      />

      <div className="page-header">
        <div>
          <h1>Team Board</h1>
          <div className="sub">
            {filterMembers.size > 0
              ? `Showing ${visibleTasks.length} of ${tasks.length} tasks · filtered by ${[...filterMembers].join(", ")}`
              : `${tasks.length} task${tasks.length !== 1 ? "s" : ""} · real-time sync`}
          </div>
        </div>
        <div className="actions" style={{ alignItems: "center" }}>
          {filterMembers.size > 0 && (
            <button className="btn ghost sm" style={{ fontSize: 11, color: "var(--ink-3)" }}
              onClick={() => setFilterMembers(new Set())}>
              Clear filter
            </button>
          )}
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            {TEAM.map(m => {
              const active = filterMembers.has(m);
              const dimmed = filterMembers.size > 0 && !active;
              return (
                <MemberAvatar key={m} name={m} size={32}
                  active={active}
                  dimmed={dimmed}
                  onClick={() => toggleMember(m)}
                  tooltip={active ? `${m} · click to hide` : `${m} · click to filter`}
                />
              );
            })}
          </div>
          <button className="btn primary sm" onClick={() => setModal({ open: true, task: null, defaultStatus: "todo" })}>
            <Icon.plus size={12}/> New task
          </button>
        </div>
      </div>

      {error && (
        <div style={{ background: "#fef2f2", border: "1px solid #fca5a5", borderRadius: 10, padding: "12px 16px", marginBottom: 20, color: "#dc2626", fontSize: 13 }}>
          {error}
        </div>
      )}

      {loading ? (
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "60px 0", justifyContent: "center", color: "var(--ink-4)" }}>
          <Icon.rotate size={16} style={{ animation: "spin 1s linear infinite" }}/>
          <span style={{ fontSize: 13 }}>Loading board…</span>
        </div>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, alignItems: "start" }}>
          {KCOLS.map(col => (
            <KanbanColumn
              key={col.id} col={col} tasks={byCol(col.id)}
              draggingId={draggingId}
              onDragStart={id => setDraggingId(id)}
              onDragEnd={() => setDraggingId(null)}
              onAdd={status => setModal({ open: true, task: null, defaultStatus: status })}
              onEdit={task => setModal({ open: true, task, defaultStatus: task.status })}
              onDrop={handleDrop}
            />
          ))}
        </div>
      )}
    </>
  );
}

window.PageKanban = PageKanban;