/* ===== Kanban board (team member's own tasks) ===== */
const { useState: useStateK } = React;

function KanbanBoard({ tasks, currentUser, members, onMove, onOpenTask, onAddTask, schedules, submissions, onSubmitReport, onAddSchedule, onEditSchedule }) {
  const [filterMine, setFilterMine] = useStateK(true);
  const [dragId, setDragId] = useStateK(null);
  const [overCol, setOverCol] = useStateK(null);

  const me = MEMBER_MAP[currentUser];
  const visible = tasks.filter(t => !filterMine || t.assignee === currentUser);

  const byStatus = (sid) => visible.filter(t => t.status === sid);
  const myTotal = tasks.filter(t => t.assignee === currentUser).length;
  const myDone = tasks.filter(t => t.assignee === currentUser && t.status === "done").length;
  const pct = myTotal ? Math.round((myDone / myTotal) * 100) : 0;

  const handleDrop = (sid) => {
    if (dragId) onMove(dragId, sid);
    setDragId(null); setOverCol(null);
  };

  return (
    <div className="animate-pop">
      {/* board header */}
      <div style={kbStyles.header}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <Avatar member={me} size={52} ring />
          <div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-.3px" }}>
              บอร์ดของ {me.nick} <span style={{ color: "var(--ink-3)", fontWeight: 600, fontSize: 16 }}>· {me.role}</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6 }}>
              <div style={{ width: 150 }}><ProgressBar value={pct} color="var(--done)" height={7} /></div>
              <span style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 600 }}>
                เสร็จ {myDone}/{myTotal} งาน ({pct}%)
              </span>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <div style={kbStyles.toggle}>
            <button onClick={() => setFilterMine(true)}  style={kbStyles.tog(filterMine)}>งานของฉัน</button>
            <button onClick={() => setFilterMine(false)} style={kbStyles.tog(!filterMine)}>ทั้งทีม</button>
          </div>
          <button className="btn btn-primary" onClick={() => onAddTask(currentUser)}>
            <PlusIcon /> เพิ่มงาน
          </button>
        </div>
      </div>

      {/* recurring reports to submit */}
      <ReportPanel currentUser={currentUser} schedules={schedules} submissions={submissions} onSubmit={onSubmitReport}
        onAddSchedule={onAddSchedule} onEditSchedule={onEditSchedule} />

      {/* columns */}
      <div style={kbStyles.cols} className="scroll kb-cols">
        {STATUSES.map(s => {
          const items = byStatus(s.id);
          const isOver = overCol === s.id;
          return (
            <div key={s.id}
              onDragOver={(e) => { e.preventDefault(); setOverCol(s.id); }}
              onDragLeave={(e) => { if (e.currentTarget === e.target) setOverCol(null); }}
              onDrop={() => handleDrop(s.id)}
              style={{
                ...kbStyles.col,
                background: isOver ? s.soft : "var(--surface-soft)",
                outline: isOver ? "2px dashed " + s.color : "2px dashed transparent",
              }}>
              <div style={kbStyles.colHead}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span className="dot" style={{ background: s.color, width: 9, height: 9 }}></span>
                  <span style={{ fontWeight: 700, fontSize: 14.5, whiteSpace: "nowrap" }}>{s.label}</span>
                  <span style={{ fontSize: 12, color: "var(--ink-3)" }}>{s.th}</span>
                </div>
                <span style={kbStyles.count}>{items.length}</span>
              </div>

              <div style={kbStyles.colBody} className="scroll">
                {items.map(t => (
                  <KanbanCard key={t.id} task={t} member={MEMBER_MAP[t.assignee]}
                    dragging={dragId === t.id}
                    onDragStart={() => setDragId(t.id)}
                    onDragEnd={() => { setDragId(null); setOverCol(null); }}
                    onClick={() => onOpenTask(t)} />
                ))}
                {items.length === 0 && (
                  <div style={kbStyles.empty}>{isOver ? "วางที่นี่" : "ยังไม่มีงาน"}</div>
                )}
                <button className="hov-add" style={kbStyles.addCard} onClick={() => onAddTask(filterMine ? currentUser : null, s.id)}>
                  <PlusIcon /> เพิ่มงาน
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function KanbanCard({ task, member, dragging, onDragStart, onDragEnd, onClick }) {
  const done = task.status === "done";
  const p = PRIORITY_MAP[task.priority];
  return (
    <div draggable className="hov-card"
      onDragStart={onDragStart} onDragEnd={onDragEnd} onClick={onClick}
      style={{
        ...kbStyles.card,
        opacity: dragging ? .4 : 1,
        borderLeft: "3px solid " + p.color,
      }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "flex-start" }}>
        <div style={{ fontWeight: 600, fontSize: 14.5, lineHeight: 1.35, color: "var(--ink)" }}>{task.title}</div>
        <PriorityBadge priority={task.priority} mini />
      </div>
      {task.desc && <div style={kbStyles.desc}>{task.desc}</div>}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 4 }}>
        <DeadlineChip dateStr={task.deadline} done={done} />
        <Avatar member={member} size={26} />
      </div>
    </div>
  );
}

const kbStyles = {
  header: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap", margin: "26px 0 20px" },
  toggle: { display: "flex", gap: 3, background: "#dde6f5", padding: 3, borderRadius: 11 },
  tog: (on) => ({
    border: 0, background: on ? "var(--surface)" : "transparent", color: on ? "var(--primary)" : "var(--ink-2)",
    padding: "8px 14px", borderRadius: 8, fontWeight: 600, fontSize: 13.5, boxShadow: on ? "var(--shadow-sm)" : "none",
  }),
  cols: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, alignItems: "start" },
  col: { borderRadius: 16, padding: 12, minHeight: 420, transition: "background .15s" },
  colHead: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "4px 6px 12px" },
  count: { fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)", background: "var(--surface)", borderRadius: 20, padding: "2px 9px", boxShadow: "var(--shadow-sm)" },
  colBody: { display: "flex", flexDirection: "column", gap: 10 },
  card: {
    background: "var(--surface)", borderRadius: 13, padding: "13px 14px", boxShadow: "var(--shadow-sm)",
    display: "flex", flexDirection: "column", gap: 9, cursor: "grab", transition: "box-shadow .15s, transform .1s",
    border: "1px solid var(--line-soft)",
  },
  desc: { fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.45, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" },
  empty: { textAlign: "center", color: "var(--ink-3)", fontSize: 13, padding: "18px 0", border: "1.5px dashed var(--line)", borderRadius: 11 },
  addCard: {
    display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
    border: "1.5px dashed var(--line)", background: "transparent", color: "var(--ink-3)",
    borderRadius: 11, padding: "9px", fontWeight: 600, fontSize: 13, transition: ".12s", whiteSpace: "nowrap",
  },
};

Object.assign(window, { KanbanBoard });