// app/screens/Kanban.jsx — full kanban with 5 columns (including tamamlandı).

function KanbanScreen({ data, onOpenBrief, onStatusChange }) {
  const cols = [
    { id: "yeni",        label: "Yeni",        Ic: I.Inbox,  accent: "var(--ink-3)" },
    { id: "calisiliyor", label: "Çalışılıyor", Ic: I.Pencil, accent: "var(--info)" },
    { id: "incelemede",  label: "İncelemede",  Ic: I.User,   accent: "var(--warning)" },
    { id: "blokeli",     label: "Blokeli",     Ic: I.Warn,   accent: "var(--danger)" },
    { id: "tamamlandi",  label: "Tamamlandı",  Ic: I.Check,  accent: "var(--success)" }
  ];

  // for the Tamamlandı column we use completed[]; map to active brief shape (lightly)
  const completedAsBriefs = data.completed.slice(0, 8).map(c => ({
    id: c.id, no: c.no, marka: c.marka, brand: c.brand, baslik: c.baslik,
    lead: c.lead, contributors: [], reviewer: null,
    durum: "tamamlandi",
    deadline: c.bitis, acilma: c.basla,
    deltaH: 0, priority: { code:"grn", label:"DÜŞÜK", color:"var(--prio-green)" }, revision: c.revision
  }));

  return (
    <div className="bn-tab-in">
      <PageHead
        title="Kanban"
        subtitle="durum bazlı kolonlar · drag yerine status menüsü"
        actions={<>
          <Button kind="ghost" size="sm" icon={<I.Filter size={13}/>}>Filtrele</Button>
        </>}
      />

      <div style={{
        display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap: 12,
        minHeight: 540, overflowX:"auto"
      }}>
        {cols.map(col => {
          const items = col.id === "tamamlandi" ? completedAsBriefs : data.briefs.filter(b => b.durum === col.id);
          return (
            <div key={col.id} style={{
              background:"var(--surface-sub)", border:"1px solid var(--line)",
              borderRadius: 10, padding: 10,
              display:"flex", flexDirection:"column", gap: 8,
              minWidth: 230
            }}>
              <div style={{
                display:"flex", alignItems:"center", justifyContent:"space-between",
                padding:"4px 6px 10px", borderBottom:"1px solid var(--line)", marginBottom: 4
              }}>
                <span style={{display:"inline-flex", alignItems:"center", gap:8, font:"600 13px/1 var(--font-sans)", color:"var(--ink-2)"}}>
                  <span style={{width:8, height:8, borderRadius:999, background: col.accent}}/>
                  <col.Ic size={13}/> {col.label}
                </span>
                <span style={{
                  font:"500 11px/1 var(--font-mono)", color:"var(--ink-4)",
                  padding:"3px 6px", background:"var(--surface)", borderRadius: 4, border:"1px solid var(--line)"
                }}>{items.length}</span>
              </div>
              <div style={{display:"flex", flexDirection:"column", gap: 8, flex:1, overflowY:"auto", maxHeight: "60vh"}}>
                {items.map(b => <KanbanCard key={b.id} brief={b} onClick={() => onOpenBrief(b)}/>)}
                {items.length === 0 && (
                  <div style={{padding: 20, textAlign:"center", color:"var(--ink-4)", font:"400 12px/1.4 var(--font-sans)"}}>
                    boş.
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function KanbanCard({ brief, onClick }) {
  return (
    <button onClick={onClick} style={{
      display:"flex", flexDirection:"column", gap: 8, padding: 10,
      background:"var(--surface)", border:"1px solid var(--line)", borderRadius: 8,
      cursor:"pointer", textAlign:"left", color:"var(--ink)"
    }}>
      <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap: 6}}>
        <BrandChip brand={brief.brand} size="sm"/>
        <span style={{font:"500 11px/1 var(--font-mono)", color:"var(--ink-4)"}}>#{brief.no}</span>
      </div>
      <div style={{font:"500 13px/1.35 var(--font-sans)", color:"var(--ink)"}}>{brief.baslik}</div>
      <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap: 6, marginTop: 2}}>
        {brief.priority && <PriorityBadge p={brief.priority} deltaH={brief.deltaH || 0} compact/>}
        <span style={{display:"inline-flex"}}>
          <Avatar user={brief.lead} size={20}/>
          {brief.contributors && brief.contributors.length > 0 && (
            <span style={{marginLeft: -6}}><AvatarStack users={brief.contributors} max={2} size={18}/></span>
          )}
        </span>
      </div>
    </button>
  );
}

window.KanbanScreen = KanbanScreen;
window.KanbanCard = KanbanCard;