/* Kanban — based on full-version/src/sections/apps/kanban/Board
   - Column: minWidth 250, bg secondary.lighter, border 1px divider, radius 4
   - Item: white card, border 1px divider, padding 8px, subtitle1 title + MoreOutlined menu
   - User Story badge: ClusterOutlined icon + caption "User Story #N"
*/

function KanbanScreen() {
  const initial = [
    {
      id: "c1", title: "To do", color: "#1677ff",
      items: [
        { id: "i1", title: "Add new property", story: "USR-21" },
        { id: "i2", title: "Move admin panel to /admin route", story: "USR-21" },
        { id: "i3", title: "Reduce onboarding length", story: null },
      ],
    },
    {
      id: "c2", title: "In Progress", color: "#faad14",
      items: [
        { id: "i4", title: "Update kanban drag visuals", story: "USR-18" },
        { id: "i5", title: "Add invoice CSV export", story: "USR-18" },
      ],
    },
    {
      id: "c3", title: "In Review", color: "#722ed1",
      items: [
        { id: "i6", title: "Refresh dashboard hero gradient", story: "USR-12" },
      ],
    },
    {
      id: "c4", title: "Done", color: "#52c41a",
      items: [
        { id: "i7", title: "Move to MUI v9", story: "USR-09" },
        { id: "i8", title: "Public Sans webfont swap", story: "USR-09" },
        { id: "i9", title: "Migrate to Next.js 16", story: null },
        { id: "i10", title: "TanStack table v8 upgrade", story: null },
      ],
    },
  ];
  const [columns, setColumns] = React.useState(initial);
  const [dragging, setDragging] = React.useState(null);

  const onDragStart = (colIdx, itemIdx) => setDragging({ colIdx, itemIdx });

  const onDrop = (targetCol) => {
    if (!dragging) return;
    const next = columns.map(c => ({ ...c, items: [...c.items] }));
    const [moved] = next[dragging.colIdx].items.splice(dragging.itemIdx, 1);
    next[targetCol].items.push(moved);
    setColumns(next);
    setDragging(null);
  };

  return (
    <>
      <div className="crumbs">
        <a>Home</a><span className="sep">/</span>
        <a>Apps</a><span className="sep">/</span>
        <span className="cur">Kanban</span>
      </div>
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"6px 0 20px"}}>
        <h1 className="page-title" style={{margin:0}}>Board</h1>
        <div style={{display:"flex",gap:8}}>
          <Button type="default" size="md" icon={<Icon.Filter size={14}/>}>Filter</Button>
          <Button type="primary" size="md" icon={<Icon.Plus size={14}/>}>Add Column</Button>
        </div>
      </div>

      <div style={{display:"flex",gap:16,overflowX:"auto",paddingBottom:24,minHeight:560}}>
        {columns.map((col, colIdx) => (
          <div key={col.id}
               onDragOver={e => e.preventDefault()}
               onDrop={() => onDrop(colIdx)}
               style={{minWidth:280,maxWidth:280,background:"#fafafa",border:"1px solid #f0f0f0",borderRadius:4,padding:"10px 12px 14px",display:"flex",flexDirection:"column",gap:10,alignSelf:"flex-start"}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 4px 8px"}}>
              <div style={{display:"flex",alignItems:"center",gap:8}}>
                <span style={{width:8,height:8,borderRadius:"50%",background:col.color}}/>
                <span style={{font:"600 14px/22px var(--font-sans)",color:"#262626"}}>{col.title}</span>
                <span style={{fontSize:12,color:"#8c8c8c",background:"#fff",border:"1px solid #f0f0f0",borderRadius:10,padding:"0 6px"}}>{col.items.length}</span>
              </div>
              <Button type="text" size="sm" icon={<Icon.X size={14}/>}/>
            </div>

            {col.items.map((it, i) => (
              <div key={it.id}
                   draggable
                   onDragStart={() => onDragStart(colIdx, i)}
                   style={{background:"#fff",border:"1px solid #f0f0f0",borderRadius:4,padding:"10px 12px",cursor:"grab",userSelect:"none"}}>
                <div style={{display:"flex",justifyContent:"space-between",gap:8,alignItems:"flex-start"}}>
                  <div style={{font:"600 14px/22px var(--font-sans)",color:"#262626",flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{it.title}</div>
                  <span style={{color:"#8c8c8c",cursor:"pointer",letterSpacing:2,fontSize:14,marginTop:-2}}>···</span>
                </div>
                {it.story && (
                  <div style={{display:"inline-flex",alignItems:"center",gap:4,marginTop:6,color:"#0958d9"}}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M19 7h-3V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2H5a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm-9-2h4v2h-4z"/></svg>
                    <span style={{fontSize:12,lineHeight:"16px",textDecoration:"underline",textDecorationColor:"transparent",cursor:"pointer"}}>User Story #{it.story}</span>
                  </div>
                )}
              </div>
            ))}

            <button style={{background:"transparent",border:"1px dashed #d9d9d9",borderRadius:4,padding:"8px",color:"#8c8c8c",font:"400 13px/20px var(--font-sans)",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",gap:6}}>
              <Icon.Plus size={12}/> Add Item
            </button>
          </div>
        ))}
      </div>
    </>
  );
}

window.KanbanScreen = KanbanScreen;