// Innovation — Kanban board for ideas. Each idea has a title + tier (S–F).

const IDEA_TIERS = ['S', 'A', 'B', 'C', 'D', 'F'];
const TIER_TONE = { S: 'orange', A: 'green', B: 'blue', C: 'amber', D: 'neutral', F: 'red' };

function TierChip({ tier, size = 'md' }) {
  return <span className={`tier-chip tier-${tier} ${size === 'lg' ? 'lg' : ''}`}>{tier}</span>;
}

function Innovation() {
  const D = window.HitcentsData;
  const [ideas, setIdeas] = useState(D.IDEAS);
  const [drag, setDrag] = useState(null);
  const [hoverCol, setHoverCol] = useState(null);
  const [open, setOpen] = useState(null);
  const [filter, setFilter] = useState('all');

  function move(id, col) {
    setIdeas(s => s.map(i => i.id === id ? { ...i, col } : i));
  }

  const filtered = filter === 'all' ? ideas : ideas.filter(i => i.tier === filter);

  return (
    <div data-screen-label="Innovation">
      <div className="page-head">
        <div>
          <h1>Innovation</h1>
          <div className="sub">{ideas.length} ideas in play · {ideas.filter(i => i.col === 'building').length} actively building · {ideas.filter(i => i.col === 'shipped').length} shipped</div>
        </div>
        <div className="row gap-2">
          <Button variant="primary" icon="plus" onClick={() => setOpen({ id: '_new', title: '', col: 'parking', tier: 'B', owner: 'e1', tags: [], desc: '' })}>New idea</Button>
        </div>
      </div>

      <div className="toolbar">
        <div className="row gap-2">
          <span className="muted" style={{ fontSize: 12.5 }}>Tier:</span>
          <button onClick={() => setFilter('all')}
                  className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : 'btn-ghost'}`}>All</button>
          {IDEA_TIERS.map(t => (
            <button key={t} onClick={() => setFilter(t)}
                    className={`btn btn-sm ${filter === t ? 'btn-primary' : 'btn-ghost'}`}
                    style={{ minWidth: 30, justifyContent: 'center' }}>{t}</button>
          ))}
        </div>
      </div>

      <div className="kanban">
        {D.IDEA_COLS.map(col => {
          const cards = filtered.filter(i => i.col === col.id);
          const isHover = hoverCol === col.id;
          return (
            <div key={col.id}
                 className={`kanban-col ${isHover ? 'drop-target' : ''}`}
                 onDragOver={e => { e.preventDefault(); setHoverCol(col.id); }}
                 onDragLeave={() => setHoverCol(h => h === col.id ? null : h)}
                 onDrop={() => { if (drag) move(drag, col.id); setDrag(null); setHoverCol(null); }}>
              <div className="kanban-col-h">
                <div className="row gap-2">
                  <strong>{col.name}</strong>
                  <span className="dim mono" style={{ fontSize: 11 }}>{cards.length}</span>
                </div>
                <button className="icon-btn" style={{ width: 22, height: 22 }} title="Add idea"
                        onClick={() => setOpen({ id: '_new', title: '', col: col.id, tier: 'B', owner: 'e1', tags: [], desc: '' })}><Icon name="plus" size={12} /></button>
              </div>
              {cards.map(idea => {
                const o = getEmployee(idea.owner);
                return (
                  <div key={idea.id}
                       className={`kanban-card ${drag === idea.id ? 'dragging' : ''}`}
                       draggable
                       onDragStart={() => setDrag(idea.id)}
                       onDragEnd={() => { setDrag(null); setHoverCol(null); }}
                       onClick={() => setOpen(idea)}>
                    <div className="row gap-2" style={{ alignItems: 'flex-start' }}>
                      <TierChip tier={idea.tier} />
                      <div style={{ flex: 1, fontWeight: 500, fontSize: 13, lineHeight: 1.35 }}>{idea.title}</div>
                      <Avatar person={o} size={20} />
                    </div>
                  </div>
                );
              })}
              {cards.length === 0 && <div className="dim" style={{ fontSize: 11, padding: 12, textAlign: 'center' }}>Drop ideas here</div>}
            </div>
          );
        })}
      </div>

      <Drawer open={!!open} onClose={() => setOpen(null)} title={open?.id === '_new' ? 'New idea' : 'Idea'} width={520}>
        {open && <IdeaDetail idea={open} onUpdate={(next) => { setIdeas(s => s.some(i => i.id === next.id) ? s.map(i => i.id === next.id ? next : i) : [...s, next]); setOpen(next); }} />}
      </Drawer>
    </div>
  );
}

function IdeaDetail({ idea, onUpdate }) {
  const D = window.HitcentsData;
  const o = getEmployee(idea.owner);
  const isNew = idea.id === '_new';
  const [title, setTitle] = useState(idea.title);

  function commit(patch) {
    const id = isNew ? `i${Date.now().toString(36)}` : idea.id;
    onUpdate({ ...idea, id, title, ...patch });
  }

  return (
    <div>
      {isNew ? (
        <input
          className="idea-title-input"
          autoFocus
          placeholder="Name your idea…"
          value={title}
          onChange={e => setTitle(e.target.value)}
          onBlur={() => title.trim() && commit({})} />
      ) : (
        <h2 style={{ margin: '0 0 14px', fontSize: 20, fontWeight: 600 }}>{idea.title || 'Untitled idea'}</h2>
      )}

      <SectionTitle>Idea tier</SectionTitle>
      <div className="row gap-2" style={{ flexWrap: 'wrap' }}>
        {IDEA_TIERS.map(t => (
          <button key={t}
                  onClick={() => commit({ tier: t })}
                  className={`tier-pick ${idea.tier === t ? 'active' : ''}`}>
            <TierChip tier={t} />
          </button>
        ))}
      </div>

      <SectionTitle>Stage</SectionTitle>
      <div className="row gap-2" style={{ flexWrap: 'wrap' }}>
        {D.IDEA_COLS.map(c => (
          <button key={c.id}
                  onClick={() => commit({ col: c.id })}
                  className={`btn btn-sm ${c.id === idea.col ? 'btn-primary' : 'btn-secondary'}`}>
            {c.name}
          </button>
        ))}
      </div>

      {idea.tags && idea.tags.length > 0 && (
        <>
          <SectionTitle>Tags</SectionTitle>
          <div className="row gap-2" style={{ flexWrap: 'wrap' }}>
            {idea.tags.map(t => <Badge key={t} tone="orange">#{t}</Badge>)}
          </div>
        </>
      )}

      {idea.desc && (
        <>
          <SectionTitle>Notes</SectionTitle>
          <p style={{ marginTop: 0, fontSize: 13.5, lineHeight: 1.55 }}>{idea.desc}</p>
        </>
      )}

      <SectionTitle>Champion</SectionTitle>
      <div className="row gap-2"><Avatar person={o} size={28} /><div><div style={{ fontSize: 13, fontWeight: 500 }}>{o?.name}</div><div className="dim" style={{ fontSize: 11.5 }}>{o?.title}</div></div></div>
    </div>
  );
}

window.Innovation = Innovation;