// Kanban board screen — shadcn/ui aesthetic
const sampleData = {
  lists: [
    { id:'backlog', title:'Backlog', cards:[
      { id:1, title:'Research competitor onboarding flows', labels:[{c:'#0891b2',t:'Research'}], due:'May 12', members:['L','M'], comments:2 },
      { id:2, title:'User interviews — round 2', labels:[{c:'#7c3aed',t:'Discovery'}], members:['L'], comments:5 },
      { id:3, title:'Define MVP feature set for billing', labels:[{c:'#ea580c',t:'Product'}], members:['M','K'] },
    ]},
    { id:'todo', title:'To Do', cards:[
      { id:4, title:'Design empty states for all screens', labels:[{c:'#7c3aed',t:'Design'}], due:'May 09', members:['L'], comments:3 },
      { id:5, title:'Set up auth provider integration', labels:[{c:'#0891b2',t:'Backend'},{c:'#e11d48',t:'P0'}], members:['K'] },
    ]},
    { id:'doing', title:'In Progress', cards:[
      { id:6, title:'Build Kanban drag-and-drop interactions', labels:[{c:'#7c3aed',t:'Design'},{c:'#16a34a',t:'Frontend'}], due:'May 15', dueState:'soon', members:['L','M','K'], comments:8 },
      { id:7, title:'Implement real-time card updates', labels:[{c:'#0891b2',t:'Backend'}], members:['M'], comments:2 },
      { id:8, title:'Refactor board state management', labels:[{c:'#ea580c',t:'Tech debt'}], members:['K'] },
    ]},
    { id:'review', title:'Review', cards:[
      { id:9, title:'Marketing site copy revisions', labels:[{c:'#db2777',t:'Marketing'}], due:'May 08', dueState:'overdue', members:['L'], comments:4 },
      { id:10, title:'API rate limiting docs', members:['M'] },
    ]},
    { id:'done', title:'Done', cards:[
      { id:11, title:'Set up project repo & CI', labels:[{c:'#16a34a',t:'DevOps'}], members:['K'], dueState:'done' },
      { id:12, title:'Initial design tokens & color palette', labels:[{c:'#7c3aed',t:'Design'}], members:['L'], comments:1, dueState:'done' },
      { id:13, title:'Architecture decision record', members:['M'], dueState:'done' },
    ]},
  ],
};

const dueStyle = (s) => {
  if (s==='overdue') return { color:'hsl(var(--destructive))', bg:'hsl(var(--destructive) / .12)' };
  if (s==='soon')    return { color:'#b45309', bg:'#fef3c7' };
  if (s==='done')    return { color:'#15803d', bg:'#dcfce7' };
  return { color:'var(--muted-fg)', bg:'transparent' };
};

const TaskCard = ({ card, onOpen }) => (
  <div className="task" onClick={onOpen}>
    {card.labels && (
      <div className="task-labels">
        {card.labels.map((l,i)=>(
          <span key={i} style={{height:18, padding:'0 8px', borderRadius:999, fontSize:11, fontWeight:600, background:l.c+'22', color:l.c, display:'inline-flex', alignItems:'center'}}>{l.t}</span>
        ))}
      </div>
    )}
    <div className="task-title">{card.title}</div>
    <div className="task-meta">
      <div className="task-icons">
        {card.due && (() => {
          const ds = dueStyle(card.dueState);
          return <span style={{padding:'2px 6px', borderRadius:4, background:ds.bg, color:ds.color}}><Icon name="clock" size={11}/> {card.due}</span>;
        })()}
        {card.comments && <span><Icon name="msg" size={11}/> {card.comments}</span>}
      </div>
      {card.members && (
        <div className="avatar-stack">
          {card.members.slice(0,3).map((m,i)=> <Avatar key={i} name={m} size={22}/>)}
        </div>
      )}
    </div>
  </div>
);

const AddCardForm = ({ onCancel }) => (
  <div style={{display:'flex',flexDirection:'column',gap:6}}>
    <textarea className="textarea" autoFocus placeholder="Enter a title for this card…" style={{minHeight:60, fontSize:14}}/>
    <div className="row" style={{gap:6}}>
      <button className="btn btn-primary btn-sm">Add card</button>
      <button className="btn btn-ghost btn-sm" onClick={onCancel}><Icon name="close" size={13}/></button>
    </div>
  </div>
);

const ListColumn = ({ list, onOpenCard }) => {
  const [adding, setAdding] = React.useState(false);
  return (
    <div className="list-col">
      <div className="list-header">
        <div className="list-title">{list.title} <span className="list-count">{list.cards.length}</span></div>
        <button className="btn btn-ghost btn-icon btn-sm" onClick={()=>setAdding(true)}><Icon name="plus" size={14}/></button>
      </div>
      <div className="list-cards">
        {list.cards.map(c => <TaskCard key={c.id} card={c} onOpen={()=>onOpenCard(c)}/>)}
        {adding && <AddCardForm onCancel={()=>setAdding(false)}/>}
      </div>
      {!adding && (
        <button className="btn btn-ghost btn-sm" style={{justifyContent:'flex-start', color:'var(--muted-fg)'}} onClick={()=>setAdding(true)}>
          <Icon name="plus" size={13}/> Add card
        </button>
      )}
    </div>
  );
};

const ActivitySidebar = ({ onClose }) => (
  <aside style={{width:320, borderLeft:'1px solid var(--border-c)', background:'var(--bg)', overflow:'auto', padding:'16px 18px', flexShrink:0}}>
    <div className="row between" style={{marginBottom:14}}>
      <div className="h3">Activity</div>
      <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><Icon name="close" size={14}/></button>
    </div>
    <div style={{display:'flex',flexDirection:'column',gap:14}}>
      {[
        { who:'Linh Tran', a:'L', action:'moved', target:'Build Kanban drag-and-drop', from:'To Do', to:'In Progress', when:'2h ago'},
        { who:'Minh Vu',   a:'M', action:'commented on', target:'Build Kanban drag-and-drop', when:'2h ago'},
        { who:'An Pham',   a:'A', action:'created', target:'Implement real-time updates', when:'1d ago'},
        { who:'Linh Tran', a:'L', action:'added', target:'Khanh Le to the board', when:'2d ago'},
        { who:'Minh Vu',   a:'M', action:'completed', target:'Set up project repo & CI', when:'3d ago'},
      ].map((act,i)=>(
        <div key={i} className="row" style={{gap:10, alignItems:'flex-start'}}>
          <Avatar name={act.a} size={26}/>
          <div style={{flex:1, fontSize:13, lineHeight:1.5, color:'var(--muted-fg)'}}>
            <span style={{color:'var(--fg)', fontWeight:500}}>{act.who}</span> {act.action}{' '}
            <span style={{color:'var(--fg)'}}>{act.target}</span>
            {act.from && <> from <span style={{color:'var(--fg)'}}>{act.from}</span> to <span style={{color:'var(--fg)'}}>{act.to}</span></>}
            <div style={{fontSize:12, marginTop:2, color:'var(--muted-fg)'}}>{act.when}</div>
          </div>
        </div>
      ))}
    </div>
  </aside>
);

const BoardScreen = ({ onOpenCard }) => {
  const [showActivity, setShowActivity] = React.useState(false);
  return (
    <div style={{display:'flex',flexDirection:'column', height:'calc(100vh - 56px)'}}>
      <div style={{padding:'12px 24px', borderBottom:'1px solid var(--border-c)', display:'flex',alignItems:'center',justifyContent:'space-between'}}>
        <div className="row" style={{gap:12}}>
          <div style={{width:18,height:18,borderRadius:4,background:'#7c3aed'}}/>
          <div className="h2">Product Roadmap</div>
          <span className="badge badge-outline">5 lists · 13 cards</span>
        </div>
        <div className="row" style={{gap:8}}>
          <div className="avatar-stack">
            <Avatar name="L" size={26}/><Avatar name="M" size={26}/><Avatar name="K" size={26}/><Avatar name="A" size={26}/>
            <div className="avatar" style={{width:26,height:26,fontSize:11, background:'hsl(var(--muted))', color:'var(--muted-fg)'}}>+2</div>
          </div>
          <button className="btn btn-outline btn-sm"><Icon name="users" size={13}/> Share</button>
          <button className={`btn btn-sm ${showActivity?'btn-secondary':'btn-ghost'}`} onClick={()=>setShowActivity(s=>!s)}>
            <Icon name="clock" size={13}/> Activity
          </button>
        </div>
      </div>

      <div style={{display:'flex', flex:1, minHeight:0}}>
        <div className="board-canvas" style={{flex:1}}>
          {sampleData.lists.map(list => <ListColumn key={list.id} list={list} onOpenCard={onOpenCard}/>)}
          <button className="list-col" style={{borderStyle:'dashed', justifyContent:'center', alignItems:'center', minHeight:60, cursor:'pointer', color:'var(--muted-fg)', background:'transparent'}}>
            <span className="row" style={{gap:6}}><Icon name="plus" size={14}/> Add list</span>
          </button>
        </div>
        {showActivity && <ActivitySidebar onClose={()=>setShowActivity(false)}/>}
      </div>
    </div>
  );
};

window.BoardScreen = BoardScreen;