// ─────────────────────────────────────────────────────────────
// TASK DETAIL — full workspace: comments, checklist, screenshots, activity
// ─────────────────────────────────────────────────────────────
function TaskDetail({ taskId, profile, projects, profiles, clients, projectEditors = [], refresh, onClose }) {
  const { Modal, Btn, StatusBadge, PriorityBadge, Select, Input, Avatar, Spinner } = window.PUI;
  const P = window.PORTAL;
  const isAdmin = profile.role === "admin";
  const isClient = profile.role === "client";
  const isEditor = profile.role === "editor";

  const [task, setTask] = React.useState(null);
  const [comments, setComments] = React.useState([]);
  const [checklist, setChecklist] = React.useState([]);
  const [shots, setShots] = React.useState([]);
  const [activity, setActivity] = React.useState([]);
  const [tab, setTab] = React.useState("comments");
  const [msg, setMsg] = React.useState("");
  const [newItem, setNewItem] = React.useState("");
  const [editOpen, setEditOpen] = React.useState(false);
  const [uploading, setUploading] = React.useState(false);
  const bottomRef = React.useRef(null);

  const loadAll = React.useCallback(async () => {
    const [t, c, r, s, a] = await Promise.all([
      sb.from("tasks").select("*").eq("id", taskId).single(),
      sb.from("comments").select("*, author:profiles(full_name, avatar_url)").eq("task_id", taskId).order("created_at"),
      sb.from("revision_items").select("*").eq("task_id", taskId).order("position").order("created_at"),
      sb.from("screenshots").select("*, uploader:profiles(full_name)").eq("task_id", taskId).order("created_at", { ascending: false }),
      sb.from("activity_logs").select("*, actor:profiles(full_name)").eq("task_id", taskId).order("created_at", { ascending: false }),
    ]);
    setTask(t.data); setComments(c.data || []); setChecklist(r.data || []);
    setShots(s.data || []); setActivity(a.data || []);
  }, [taskId]);

  React.useEffect(() => {
    loadAll();
    const ch = sb.channel("task-" + taskId)
      .on("postgres_changes", { event: "INSERT", schema: "public", table: "comments", filter: "task_id=eq." + taskId },
        async (payload) => {
          const { data: author } = await sb.from("profiles").select("full_name, avatar_url").eq("id", payload.new.author_id).single();
          setComments(prev => prev.some(c => c.id === payload.new.id) ? prev : [...prev, { ...payload.new, author }]);
        })
      .subscribe();
    return () => sb.removeChannel(ch);
  }, [taskId, loadAll]);

  if (!task) return <Modal open onClose={onClose} width={760}><div style={{ textAlign: "center", padding: 40 }}><Spinner size={24} /></div></Modal>;

  const project = projects.find(p => p.id === task.project_id);
  const editorName = profiles.find(p => p.id === task.assigned_editor)?.full_name || "Unassigned";
  const creatorName = profiles.find(p => p.id === task.created_by)?.full_name || "—";

  const afterChange = async () => { await loadAll(); refresh(); };

  // ── Status change (role-aware) ──
  const setStatus = async (status) => {
    await sb.from("tasks").update({ status }).eq("id", task.id);
    const label = P.statusOf(status).label;
    await window.logActivity(task.id, profile.id, "changed status to " + label);
    const type = status === "completed" ? "task_completed" : status === "revision_requested" ? "revision_requested" : "status_changed";
    await window.emitEvent(type, { task, project, actor: profile,
      title: (profile.full_name || "Someone") + (status === "completed" ? " completed" : status === "revision_requested" ? " requested revisions on" : " moved") + " “" + task.title + "”" + (type === "status_changed" ? " → " + label : "") });
    afterChange();
  };

  const setPriority = async (priority) => {
    await sb.from("tasks").update({ priority }).eq("id", task.id);
    await window.logActivity(task.id, profile.id, "set priority to " + P.priorityOf(priority).label);
    afterChange();
  };

  // ── Comments ──
  const sendComment = async () => {
    if (!msg.trim()) return;
    const text = msg.trim(); setMsg("");
    await sb.from("comments").insert({ task_id: task.id, author_id: profile.id, message: text });
    await window.logActivity(task.id, profile.id, "commented");
    await window.emitEvent("new_comment", { task, project, actor: profile,
      title: (profile.full_name || "Someone") + " commented on “" + task.title + "”", body: text.slice(0, 80) });
    setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: "smooth" }), 150);
  };

  // ── Checklist ──
  const addItem = async () => {
    if (!newItem.trim()) return;
    await sb.from("revision_items").insert({ task_id: task.id, item: newItem.trim(), created_by: profile.id, position: checklist.length });
    setNewItem(""); afterChange();
  };
  const toggleItem = async (it) => {
    await sb.from("revision_items").update({ done: !it.done }).eq("id", it.id);
    if (!it.done) await window.logActivity(task.id, profile.id, "checked off “" + it.item + "”");
    afterChange();
  };
  const removeItem = async (it) => { await sb.from("revision_items").delete().eq("id", it.id); afterChange(); };

  // ── Screenshots ──
  const uploadShot = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (!file.type.startsWith("image/")) return alert("Images only — videos stay in Google Drive.");
    if (file.size > 5 * 1024 * 1024) return alert("Max 5MB per image.");
    setUploading(true);
    try {
      const path = task.id + "/" + Date.now() + "-" + file.name.replace(/[^a-zA-Z0-9.\-_]/g, "_");
      const { error } = await sb.storage.from("screenshots").upload(path, file);
      if (error) throw error;
      const { data: pub } = sb.storage.from("screenshots").getPublicUrl(path);
      await sb.from("screenshots").insert({ task_id: task.id, uploader_id: profile.id, url: pub.publicUrl, storage_path: path });
      await window.logActivity(task.id, profile.id, "uploaded a screenshot");
      afterChange();
    } catch (err) { alert("Upload failed: " + err.message); }
    setUploading(false);
    e.target.value = "";
  };

  const tabBtn = (id, label, count) => (
    <button onClick={() => setTab(id)} style={{
      padding: "9px 16px", borderRadius: 9, fontSize: 13, fontWeight: 700, border: "none", cursor: "pointer",
      fontFamily: "var(--font-sans)",
      background: tab === id ? "rgba(251,208,40,0.1)" : "transparent",
      color: tab === id ? "var(--gold-400)" : "var(--text-tertiary)",
    }}>{label}{count > 0 ? " · " + count : ""}</button>
  );

  const canEditTask = isAdmin || (isClient && task.created_by === profile.id);

  return (
    <Modal open onClose={onClose} width={780}>
      {/* Header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 14 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 12, color: "var(--text-tertiary)", marginBottom: 6 }}>{project?.name || "—"} · Created by {creatorName} · Updated {P.timeAgo(task.updated_at)}</div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.15 }}>{task.title}</h3>
        </div>
        <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
          {canEditTask && <Btn variant="secondary" size="sm" onClick={() => setEditOpen(true)}>✎ Edit</Btn>}
          <button onClick={onClose} style={{ width: 36, height: 36, borderRadius: 9, border: "1px solid var(--border-default)", background: "transparent", color: "var(--text-secondary)", cursor: "pointer", fontSize: 16 }}>×</button>
        </div>
      </div>

      {/* Meta row */}
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center", margin: "18px 0" }}>
        <StatusBadge status={task.status} />
        <PriorityBadge priority={task.priority} />
        <span style={{ fontSize: 12, color: "var(--text-tertiary)" }}>Due {task.due_date ? P.fmtDate(task.due_date) : "—"}</span>
        <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--text-secondary)" }}>
          <Avatar name={editorName} size={22} /> {editorName}
        </span>
      </div>

      {/* Role actions */}
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 18 }}>
        {(isEditor || isAdmin) && task.status !== "in_progress" && task.status !== "completed" &&
          <Btn size="sm" variant="secondary" onClick={() => setStatus("in_progress")}>▶ Start Working</Btn>}
        {(isEditor || isAdmin) && task.status === "in_progress" &&
          <Btn size="sm" onClick={() => setStatus("awaiting_review")}>Submit for Review</Btn>}
        {(isClient || isAdmin) && task.status === "awaiting_review" && (
          <React.Fragment>
            <Btn size="sm" onClick={() => setStatus("completed")}>✓ Approve</Btn>
            <Btn size="sm" variant="secondary" onClick={() => { setStatus("revision_requested"); setTab("checklist"); }}>↺ Request Revisions</Btn>
          </React.Fragment>
        )}
        {(isEditor || isAdmin) && task.status === "revision_requested" &&
          <Btn size="sm" onClick={() => setStatus("awaiting_review")}>Resubmit for Review</Btn>}
        {isAdmin && task.status === "completed" &&
          <Btn size="sm" variant="secondary" onClick={() => setStatus("in_progress")}>Reopen</Btn>}
        {(isClient || isAdmin) && (
          <Select value={task.priority} onChange={e => setPriority(e.target.value)} style={{ width: "auto", padding: "7px 10px", fontSize: 12 }}>
            {P.PRIORITIES.map(p => <option key={p.id} value={p.id}>{p.label} priority</option>)}
          </Select>
        )}
      </div>

      {/* Description */}
      {task.description && (
        <div style={{ background: "var(--surface-inset)", borderRadius: 12, padding: 16, fontSize: 14, lineHeight: 1.65, color: "var(--text-secondary)", marginBottom: 14, whiteSpace: "pre-wrap" }}>{task.description}</div>
      )}

      {/* Drive + reference links */}
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 20 }}>
        {task.drive_folder_url && (
          <a href={task.drive_folder_url} target="_blank" rel="noreferrer" style={{
            display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 10,
            background: "rgba(251,208,40,0.08)", border: "1px solid rgba(251,208,40,0.35)",
            color: "var(--gold-400)", fontSize: 13, fontWeight: 700, textDecoration: "none",
          }}>
            <svg width="15" height="15" viewBox="0 0 87.3 78" fill="currentColor"><path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0-1.2 4.5h27.5z"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.5l5.85 11.5z"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"/></svg>
            Open Drive Folder
          </a>
        )}
        {(task.reference_links || []).map((l, i) => (
          <a key={i} href={l.startsWith("http") ? l : "https://" + l} target="_blank" rel="noreferrer" style={{
            display: "inline-flex", alignItems: "center", gap: 6, padding: "10px 14px", borderRadius: 10,
            border: "1px solid var(--border-default)", color: "var(--text-secondary)", fontSize: 12, fontWeight: 600, textDecoration: "none",
          }}>↗ Reference {i + 1}</a>
        ))}
      </div>

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border-subtle)", paddingBottom: 10, marginBottom: 16 }}>
        {tabBtn("comments", "Comments", comments.length)}
        {tabBtn("checklist", "Revision Checklist", checklist.length)}
        {tabBtn("screenshots", "Screenshots", shots.length)}
        {tabBtn("activity", "Activity", 0)}
      </div>

      {/* COMMENTS */}
      {tab === "comments" && (
        <div>
          <div style={{ maxHeight: 300, overflowY: "auto", display: "flex", flexDirection: "column", gap: 14, marginBottom: 16 }}>
            {comments.length === 0 && <div style={{ fontSize: 13, color: "var(--text-tertiary)", textAlign: "center", padding: 24 }}>No comments yet. Start the conversation.</div>}
            {comments.map(c => (
              <div key={c.id} style={{ display: "flex", gap: 12 }}>
                <Avatar name={c.author?.full_name || "?"} url={c.author?.avatar_url} size={32} />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ display: "flex", gap: 8, alignItems: "baseline" }}>
                    <span style={{ fontSize: 13, fontWeight: 700, color: "var(--text-primary)" }}>{c.author?.full_name || "Unknown"}</span>
                    <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{P.fmtTime(c.created_at)}</span>
                  </div>
                  <div style={{ fontSize: 14, color: "var(--text-secondary)", lineHeight: 1.6, marginTop: 3, whiteSpace: "pre-wrap" }}>{c.message}</div>
                </div>
              </div>
            ))}
            <div ref={bottomRef} />
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <Input placeholder="Write a comment…" value={msg} onChange={e => setMsg(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendComment(); } }} />
            <Btn onClick={sendComment}>Send</Btn>
          </div>
        </div>
      )}

      {/* CHECKLIST */}
      {tab === "checklist" && (
        <div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 14 }}>
            {checklist.length === 0 && <div style={{ fontSize: 13, color: "var(--text-tertiary)", textAlign: "center", padding: 20 }}>No revision items. Add specific, checkable changes below.</div>}
            {checklist.map(it => (
              <div key={it.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 14px", borderRadius: 10, background: "var(--surface-inset)", border: "1px solid var(--border-subtle)" }}>
                <span onClick={() => toggleItem(it)} style={{
                  width: 20, height: 20, borderRadius: 6, flexShrink: 0, cursor: "pointer",
                  border: "1.5px solid " + (it.done ? "var(--gold-500)" : "var(--border-default)"),
                  background: it.done ? "var(--gold-500)" : "transparent",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>{it.done && <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#08080A" strokeWidth="3.5"><path d="M20 6L9 17l-5-5"/></svg>}</span>
                <span style={{ flex: 1, fontSize: 14, color: it.done ? "var(--text-tertiary)" : "var(--text-secondary)", textDecoration: it.done ? "line-through" : "none" }}>{it.item}</span>
                {(isAdmin || isClient) && <button onClick={() => removeItem(it)} style={{ background: "none", border: "none", color: "var(--text-tertiary)", cursor: "pointer", fontSize: 14 }}>✕</button>}
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <Input placeholder="e.g. Fix subtitle at 01:24" value={newItem} onChange={e => setNewItem(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter") addItem(); }} />
            <Btn variant="secondary" onClick={addItem}>Add</Btn>
          </div>
        </div>
      )}

      {/* SCREENSHOTS */}
      {tab === "screenshots" && (
        <div>
          <label style={{
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8,
            padding: 26, borderRadius: 12, border: "1.5px dashed var(--border-default)",
            color: "var(--text-tertiary)", fontSize: 13, cursor: "pointer", marginBottom: 16,
          }}>
            {uploading ? <Spinner /> : <span style={{ fontSize: 22, color: "var(--gold-400)" }}>＋</span>}
            {uploading ? "Uploading…" : "Upload a screenshot or reference image (max 5MB)"}
            <span style={{ fontSize: 11 }}>Videos stay in Google Drive — images only.</span>
            <input type="file" accept="image/*" onChange={uploadShot} style={{ display: "none" }} disabled={uploading} />
          </label>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
            {shots.map(s => (
              <a key={s.id} href={s.url} target="_blank" rel="noreferrer" style={{ display: "block", borderRadius: 10, overflow: "hidden", border: "1px solid var(--border-subtle)", position: "relative" }}>
                <img src={s.url} alt="" style={{ width: "100%", height: 110, objectFit: "cover", display: "block" }} />
                <div style={{ padding: "6px 9px", fontSize: 10, color: "var(--text-tertiary)", background: "var(--surface-inset)" }}>{s.uploader?.full_name || ""} · {P.timeAgo(s.created_at)}</div>
              </a>
            ))}
          </div>
        </div>
      )}

      {/* ACTIVITY */}
      {tab === "activity" && (
        <div style={{ display: "flex", flexDirection: "column", gap: 0, maxHeight: 320, overflowY: "auto" }}>
          {activity.length === 0 && <div style={{ fontSize: 13, color: "var(--text-tertiary)", textAlign: "center", padding: 20 }}>No activity recorded.</div>}
          {activity.map(a => (
            <div key={a.id} style={{ display: "flex", gap: 12, padding: "11px 4px", borderBottom: "1px solid var(--border-subtle)" }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--gold-500)", flexShrink: 0, marginTop: 6 }} />
              <div>
                <span style={{ fontSize: 13, color: "var(--text-secondary)" }}>
                  <strong style={{ color: "var(--text-primary)" }}>{a.actor?.full_name || "Someone"}</strong> {a.action}
                </span>
                <div style={{ fontSize: 11, color: "var(--text-tertiary)", marginTop: 2 }}>{P.fmtTime(a.created_at)}</div>
              </div>
            </div>
          ))}
        </div>
      )}

      {editOpen && (
        <TaskModal profile={profile} projects={projects} profiles={profiles}
          projectEditors={projectEditors} clients={clients} task={task}
          onClose={() => setEditOpen(false)}
          onSaved={() => { setEditOpen(false); afterChange(); }} />
      )}
    </Modal>
  );
}
window.TaskDetail = TaskDetail;