(() => {
const { Card, TaskCard, Badge, Button, IconButton, Chip, Input, Select, Icon } = window.TaskFlowDesignSystem_dd53c2;

const COLUMNS = [
  { id: "todo", label: "To Do", dot: "var(--neutral-400)" },
  { id: "in_progress", label: "In Progress", dot: "var(--mint-500)" },
  { id: "on_verification", label: "On Verification", dot: "var(--gold-500)" },
  { id: "revision", label: "Need Revision", dot: "var(--coral-500)" },
  { id: "done", label: "Done", dot: "var(--leaf-500)" },
];

function TaskBoard({ onOpenAdd, onSelectTask, tasks = TASKS, onComment, onEdit, onDelete, commentCount, onProjectComment, onEditProject, onDeleteProject, range }) {
  const bp = useBreakpoint();
  const [owner, setOwner] = React.useState(0);
  const [q, setQ] = React.useState("");
  const [cat, setCat] = React.useState("all");
  const [prio, setPrio] = React.useState("all");
  const [stat, setStat] = React.useState("all");
  const [limit, setLimit] = React.useState(15); // kartu per kolom — sisanya dimuat saat diminta
  const inPeriod = React.useMemo(() => (range ? tasks.filter((t) => inRange(t.assigned, range.from, range.to)) : tasks), [tasks, range && range.from, range && range.to]);
  const term = q.trim().toLowerCase();
  const visible = React.useMemo(() => inPeriod.filter((t) => (owner ? t.user === owner : true))
    .filter((t) => (term ? `${t.type} ${t.project || ""} ${userById(t.user).name}`.toLowerCase().includes(term) : true))
    .filter((t) => (cat === "all" ? true : t.category === cat))
    .filter((t) => (prio === "all" ? true : t.priority === prio))
    .filter((t) => (stat === "all" ? true : stat === "late" ? isOverdue(t.target, t.done) && t.status !== "done" : t.status === stat)),
    [inPeriod, owner, term, cat, prio, stat]);
  const filtering = !!term || cat !== "all" || prio !== "all" || stat !== "all" || owner !== 0;
  const cats = [...new Set(inPeriod.map((x) => x.category))];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ display: "flex", gap: 10, overflowX: "auto", paddingBottom: 2 }}>
        <Chip label="Semua User" icon="users" count={inPeriod.length} active={owner === 0} onClick={() => setOwner(0)} />
        {USERS.map((u) => (
          <Chip key={u.id} label={u.name} icon="user" count={inPeriod.filter((t) => t.user === u.id).length}
            active={owner === u.id} onClick={() => setOwner(u.id)} />
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: bp === "mobile" ? "1fr" : bp === "tablet" ? "1fr 1fr" : "minmax(220px,1.6fr) repeat(3,minmax(0,1fr)) auto", gap: 10, alignItems: "center" }}>
        <Input icon="search" value={q} placeholder="Cari judul task, project, atau nama user…" onChange={(e) => setQ(e.target.value)} />
        <Select value={cat} onChange={(e) => setCat(e.target.value)} options={[{ value: "all", label: "Semua kategori" }, ...cats.map((c) => ({ value: c, label: c }))]} />
        <Select value={prio} onChange={(e) => setPrio(e.target.value)} options={[{ value: "all", label: "Semua prioritas" }, { value: "High", label: "High" }, { value: "Medium", label: "Medium" }, { value: "Low", label: "Low" }]} />
        <Select value={stat} onChange={(e) => setStat(e.target.value)} options={[{ value: "all", label: "Semua status" }, ...COLUMNS.map((c) => ({ value: c.id, label: c.label })), { value: "late", label: "Terlambat" }]} />
        {filtering && <Button variant="ghost" size="sm" iconLeft="x" onClick={() => { setQ(""); setCat("all"); setPrio("all"); setStat("all"); setOwner(0); }}>Reset</Button>}
      </div>
      {filtering && (
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, font: "var(--text-caption)", color: "var(--text-muted)" }}>
          <Icon name="filter" size={13} color="var(--text-faint)" />{visible.length} dari {inPeriod.length} task cocok dengan filter.
        </span>
      )}
      {onProjectComment && <ProjectPanel tasks={inPeriod} onComment={onProjectComment} onEditProject={onEditProject} onDeleteProject={onDeleteProject} commentCount={commentCount ? (p) => commentCount({ kind: "project", id: p.name }) : () => 0} />}
      <div style={{ display: bp === "desktop" ? "grid" : "flex", gridTemplateColumns: "repeat(5,minmax(0,1fr))", gap: 14, alignItems: "flex-start", overflowX: bp === "desktop" ? "visible" : "auto", paddingBottom: bp === "desktop" ? 0 : 6 }}>
        {COLUMNS.map((col) => {
          const all = visible.filter((t) => t.status === col.id);
          const items = all.slice(0, limit);
          return (
            <div key={col.id} style={{ display: "flex", flexDirection: "column", gap: 12, background: "var(--surface-glass-sunken)", backdropFilter: "var(--blur-glass)", WebkitBackdropFilter: "var(--blur-glass)", border: "1px solid var(--border-glass)", borderRadius: "var(--radius-xl)", padding: 14, boxShadow: "var(--shadow-glass)", minWidth: bp === "desktop" ? 0 : 268, flex: bp === "desktop" ? undefined : "0 0 auto" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: col.dot }} />
                <span style={{ font: "var(--text-h3)", color: "var(--text-strong)" }}>{col.label}</span>
                <Badge tone="neutral">{items.length}</Badge>
                <span style={{ marginLeft: "auto", display: "flex", gap: 4 }}>
                  <IconButton icon="plus" size="sm" variant="ghost" onClick={onOpenAdd} />
                  <IconButton icon="ellipsis" size="sm" variant="ghost" />
                </span>
              </div>
              {items.map((t) => (
                <TaskCard key={t.id} title={t.type} priority={t.priority} category={t.category}
                  progress={t.progress} progressLabel={checklistLabel(t)} dueDate={t.target} comments={t.comments}
                  badge={t.repeat && t.repeat !== "none" ? REPEAT_LABEL[t.repeat] : undefined}
                  signNote={t.signature ? "Sudah TTD" : t.needSign ? "Perlu TTD" : undefined}
                  assignees={[{ name: userById(t.user).name, src: avatarOf(t.user) }]} projectName={t.project}
                  comments={commentCount ? commentCount({ kind: "task", id: t.id }) : t.comments}
                  onClick={() => onSelectTask(t)}
                  onComment={onComment ? () => onComment(t) : undefined}
                  onEdit={onEdit ? () => onEdit(t) : undefined}
                  onDelete={onDelete ? () => onDelete(t) : undefined} />
              ))}
              {all.length > items.length && (
                <Button variant="ghost" size="sm" iconLeft="chevron-down" fullWidth onClick={() => setLimit((n) => n + 25)}>
                  Tampilkan {all.length - items.length} lagi
                </Button>
              )}
              {items.length === 0 && (
                <div style={{ padding: "22px 0", textAlign: "center", font: "var(--text-caption)", color: "var(--text-faint)" }}>Tidak ada task</div>
              )}
              <Button variant="ghost" size="sm" iconLeft="plus" fullWidth onClick={onOpenAdd}>Tambah task</Button>
            </div>
          );
        })}
      </div>
    </div>
  );
}
Object.assign(window, { TaskBoard });

})();