// Dashboard — boards grid + empty + skeleton
const BOARD_COLORS = ['#e11d48','#7c3aed','#0891b2','#16a34a','#ea580c','#db2777'];

const BoardCard = ({ name, color, count, onClick }) => (
  <div className="card" onClick={onClick} style={{
    cursor:'pointer', overflow:'hidden', transition:'border .12s, box-shadow .12s',
    display:'flex', flexDirection:'column'
  }} onMouseEnter={e=>e.currentTarget.style.borderColor='hsl(var(--ring) / .4)'}
     onMouseLeave={e=>e.currentTarget.style.borderColor='var(--border-c)'}>
    <div style={{height:72, background:color, opacity:.85}}/>
    <div style={{padding:'14px 16px'}}>
      <div style={{fontSize:14, fontWeight:600, marginBottom:4}}>{name}</div>
      <div className="muted" style={{fontSize:12}}>{count} lists</div>
    </div>
  </div>
);

const SkeletonCard = () => (
  <div className="card" style={{overflow:'hidden'}}>
    <div className="skel" style={{height:72, borderRadius:0}}/>
    <div style={{padding:'14px 16px'}}>
      <div className="skel" style={{height:14, width:'60%', marginBottom:8}}/>
      <div className="skel" style={{height:10, width:'30%'}}/>
    </div>
  </div>
);

const NewBoardDialog = ({ onClose, onCreate }) => {
  const [name, setName] = React.useState('');
  const [color, setColor] = React.useState(BOARD_COLORS[0]);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} className="modal" style={{maxWidth:420, padding:24}}>
        <div className="h2" style={{marginBottom:6}}>Create board</div>
        <div className="muted" style={{fontSize:14, marginBottom:20}}>Name your board and pick a color.</div>
        <div style={{marginBottom:16}}>
          <label className="label">Board title</label>
          <input className="input" placeholder="e.g. Product Roadmap" autoFocus value={name} onChange={e=>setName(e.target.value)}/>
        </div>
        <div style={{marginBottom:24}}>
          <label className="label">Color</label>
          <div className="row" style={{gap:8, flexWrap:'wrap'}}>
            {BOARD_COLORS.map(c=>(
              <button key={c} type="button" onClick={()=>setColor(c)} style={{
                width:32, height:32, borderRadius:6, background:c,
                border: color===c ? '2px solid var(--fg)' : '1px solid var(--border-c)', cursor:'pointer'
              }}/>
            ))}
          </div>
        </div>
        <div className="row between">
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" disabled={!name.trim()} onClick={()=>{ onCreate?.({name,color}); onClose(); }}>Create board</button>
        </div>
      </div>
    </div>
  );
};

const Dashboard = ({ empty, loading, onOpenBoard }) => {
  const [showNew, setShowNew] = React.useState(false);
  const boards = [
    { name:'Product Roadmap', color:'#7c3aed', count:8 },
    { name:'Marketing Q2', color:'#16a34a', count:5 },
    { name:'Design System', color:'#ea580c', count:6 },
    { name:'Engineering', color:'#0891b2', count:4 },
    { name:'Hiring Pipeline', color:'#db2777', count:3 },
  ];

  return (
    <div className="content">
      <div className="row between" style={{marginBottom:24}}>
        <div>
          <div className="h1">Your boards</div>
          <div className="muted" style={{fontSize:14, marginTop:4}}>{empty ? 'No boards yet' : `${boards.length} boards`}</div>
        </div>
        {!empty && <button className="btn btn-primary" onClick={()=>setShowNew(true)}><Icon name="plus" size={14}/> New board</button>}
      </div>

      {loading ? (
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(240px, 1fr))', gap:16}}>
          {Array.from({length:6}).map((_,i)=> <SkeletonCard key={i}/>)}
        </div>
      ) : empty ? (
        <div className="card" style={{padding:'56px 24px', textAlign:'center', borderStyle:'dashed'}}>
          <div style={{display:'inline-flex', padding:14, borderRadius:999, background:'hsl(var(--muted))', marginBottom:16, color:'var(--muted-fg)'}}>
            <Icon name="board" size={24}/>
          </div>
          <div className="h2" style={{marginBottom:6}}>No boards yet</div>
          <div className="muted" style={{fontSize:14, marginBottom:20, maxWidth:340, marginLeft:'auto', marginRight:'auto'}}>
            Create your first board to start organizing tasks with lists and cards.
          </div>
          <button className="btn btn-primary" onClick={()=>setShowNew(true)}><Icon name="plus" size={14}/> Create your first board</button>
        </div>
      ) : (
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(240px, 1fr))', gap:16}}>
          {boards.map(b=> <BoardCard key={b.name} {...b} onClick={onOpenBoard}/>)}
          <button onClick={()=>setShowNew(true)} className="card" style={{
            border:'1px dashed var(--border-c)', background:'transparent',
            padding:'40px 16px', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
            gap:8, color:'var(--muted-fg)', cursor:'pointer', minHeight:158
          }}>
            <Icon name="plus" size={20}/>
            <span style={{fontSize:14, fontWeight:500}}>New board</span>
          </button>
        </div>
      )}

      {showNew && <NewBoardDialog onClose={()=>setShowNew(false)}/>}
    </div>
  );
};

Object.assign(window, { Dashboard });