// picker.jsx — Document type picker with 3 visual variants
// Variant: 'grid' (default), 'featured', 'list'

const { useState: usePickerState, useEffect: usePickerEffect } = React;

function DocPickerStep({ pickerStyle, onSelect, onBack }) {
  const [selectedId, setSelectedId] = usePickerState(null);
  const [search, setSearch] = usePickerState('');

  usePickerEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [pickerStyle, search]);

  const filtered = window.DOC_CATEGORIES.map(cat => ({
    ...cat,
    items: cat.items.filter(d => !search || (d.name + ' ' + d.desc).toLowerCase().includes(search.toLowerCase()))
  })).filter(c => c.items.length);

  return (
    <div className="canvas-pad fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow-sm">Step 02 · Pick a document</div>
          <h2 style={{marginTop:6}}>What are we drafting today?</h2>
        </div>
        <div className="right">
          <div className="field-shell has-icon" style={{width:280}}>
            <i className="field-icon" data-lucide="search"></i>
            <input className="field" placeholder="Search documents…" value={search} onChange={e => setSearch(e.target.value)} />
          </div>
        </div>
      </div>

      {filtered.map((cat, ci) => (
        <div key={cat.id} className={`fade-in-d${Math.min(ci+1,3)}`} style={{marginBottom: 28}}>
          <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 12}}>
            <div className="eyebrow-sm" style={{color:'var(--ink-500)'}}>{cat.label}</div>
            <div style={{fontSize: 11.5, color:'var(--ink-500)', fontFamily:'var(--font-mono)'}}>
              {cat.items.length} {cat.items.length === 1 ? 'document' : 'documents'}
            </div>
          </div>

          {pickerStyle === 'grid' && (
            <div className="picker-grid">
              {cat.items.map(d => (
                <PickerCard key={d.id} doc={d} selected={selectedId === d.id} onClick={() => d.status !== 'soon' && setSelectedId(d.id)} />
              ))}
            </div>
          )}

          {pickerStyle === 'featured' && (
            <div className="picker-featured">
              {cat.items.map((d, i) => (
                <PickerCard key={d.id} doc={d} featured={i === 0 && cat.items.length === 3} selected={selectedId === d.id} onClick={() => d.status !== 'soon' && setSelectedId(d.id)} />
              ))}
            </div>
          )}

          {pickerStyle === 'list' && (
            <div className="picker-list">
              {cat.items.map(d => (
                <PickerListItem key={d.id} doc={d} selected={selectedId === d.id} onClick={() => d.status !== 'soon' && setSelectedId(d.id)} />
              ))}
            </div>
          )}
        </div>
      ))}

      <div className="action-bar">
        <div className="left">
          <button className="btn btn-ghost" onClick={onBack}>
            <i data-lucide="arrow-left"></i> Back
          </button>
          <div className="status">
            <i data-lucide="shield-check" style={{color:'var(--success)'}}></i>
            All templates use CEG-approved legal language
          </div>
        </div>
        <div className="right">
          <button className="btn btn-accent btn-lg" disabled={!selectedId} onClick={() => onSelect(selectedId)}>
            Continue with {selectedId ? window.DOC_BY_ID[selectedId].short : 'selection'} <i data-lucide="arrow-right"></i>
          </button>
        </div>
      </div>
    </div>
  );
}

function PickerCard({ doc, selected, featured, onClick }) {
  const disabled = doc.status === 'soon';
  return (
    <div
      className={`picker-card ${selected ? 'is-selected' : ''} ${featured ? 'featured' : ''} ${disabled ? 'is-disabled' : ''}`}
      onClick={onClick}
    >
      <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:10}}>
        <div className="icon-wrap"><i data-lucide={doc.icon}></i></div>
        <StatusChip status={doc.status} />
      </div>
      <h4>{doc.name}</h4>
      <div className="foot">
        <span style={{display:'flex', alignItems:'center', gap:5}}>
          <i data-lucide="clock" style={{width:12, height:12, strokeWidth:1.75}}></i>
          {doc.estTime}
        </span>
        <span style={{display:'flex', alignItems:'center', gap:5}}>
          {doc.approver === 'Jeff' ? 'Routes to Jeff' : 'Routes to Halie'}
          <i data-lucide="arrow-right" style={{width:12, height:12, strokeWidth:2}}></i>
        </span>
      </div>
    </div>
  );
}

function PickerListItem({ doc, selected, onClick }) {
  const disabled = doc.status === 'soon';
  return (
    <div className={`picker-list-item ${selected ? 'is-selected' : ''} ${disabled ? 'is-disabled' : ''}`} onClick={onClick}>
      <div className="icon-wrap"><i data-lucide={doc.icon}></i></div>
      <div>
        <div className="ttl">{doc.name}</div>
        <div className="meta" style={{marginTop:3}}>
          {doc.approver === 'Jeff' ? 'Routes to Jeff' : 'Routes to Halie'}
        </div>
      </div>
      <div className="desc"></div>
      <StatusChip status={doc.status} />
      <span style={{fontSize: 11.5, color:'var(--ink-500)', fontFamily:'var(--font-mono)'}}>
        {doc.estTime}
      </span>
      <i className="arrow lucide" data-lucide="chevron-right" style={{width:18, height:18}}></i>
    </div>
  );
}

function StatusChip({ status }) {
  const map = {
    live: { label: 'Approved', cls: 'live' },
    beta: { label: 'Beta', cls: 'beta' },
    soon: { label: 'Coming soon', cls: 'soon' },
  };
  const cfg = map[status] || map.live;
  return (
    <span className={`chip ${cfg.cls}`}>
      {status !== 'soon' && <span className="dot"></span>}
      {cfg.label}
    </span>
  );
}

Object.assign(window, { DocPickerStep, PickerCard, PickerListItem, StatusChip });