/* CRM pipeline — cards drifting between columns. */
const { useState: useStateCrm, useEffect: useEffectCrm } = React;

const initial = {
  new:       [{ id: 'a', name: 'Rohit S.', amt: '₹12k', src: 'WA' }, { id: 'b', name: 'Kavya T.', amt: '₹9k', src: 'Insta' }],
  qualified: [{ id: 'c', name: 'Anand R.', amt: '₹24k', src: 'Web' }],
  won:       [{ id: 'd', name: 'Priya M.', amt: '₹18k', src: 'WA' }],
};

function CRMStage() {
  const [state, setState] = useStateCrm(initial);
  useEffectCrm(() => {
    let step = 0;
    const t = setInterval(() => {
      setState(prev => {
        const next = { new: [...prev.new], qualified: [...prev.qualified], won: [...prev.won] };
        if (step % 3 === 0 && next.new.length > 0) {
          const c = next.new.shift(); next.qualified.push(c);
        } else if (step % 3 === 1 && next.qualified.length > 0) {
          const c = next.qualified.shift(); next.won.push(c);
        } else {
          // reset
          return { new: [...initial.new], qualified: [...initial.qualified], won: [...initial.won] };
        }
        return next;
      });
      step += 1;
    }, 1300);
    return () => clearInterval(t);
  }, []);

  const cols = [
    { key: 'new', label: 'New', items: state.new, count: state.new.length, tint: 'slate' },
    { key: 'qualified', label: 'Qualified', items: state.qualified, count: state.qualified.length, tint: 'warm' },
    { key: 'won', label: 'Won', items: state.won, count: state.won.length, tint: 'accent' },
  ];

  return (
    <div className="crm-stage">
      <div className="crm-cols">
        {cols.map(c => (
          <div key={c.key} className={`crm-col ${c.tint}`}>
            <div className="crm-head">
              <span>{c.label}</span>
              <span className="crm-count">{c.count}</span>
            </div>
            <div className="crm-list">
              {c.items.map(it => (
                <div key={it.id} className="crm-card">
                  <div className="crm-name">{it.name}</div>
                  <div className="crm-meta">
                    <span className="crm-amt">{it.amt}</span>
                    <span className={`crm-src ${it.src.toLowerCase()}`}>{it.src}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <style>{`
        .crm-stage { width: 100%; height: 100%; padding: 14px; font-family: var(--f-sans); }
        .crm-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; height: 100%; }
        .crm-col { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
        html.dark .crm-col { background: var(--paper-3); }
        .crm-col.accent { background: var(--accent-soft); border-color: var(--accent); }
        html.dark .crm-col.accent { background: #0f3323; border-color: var(--accent); }
        .crm-head { display: flex; justify-content: space-between; font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
        .crm-col.accent .crm-head { color: var(--accent-ink); }
        html.dark .crm-col.accent .crm-head { color: #7ce3b0; }
        .crm-count { background: var(--paper-2); color: var(--ink); padding: 2px 6px; border-radius: 999px; font-size: 10px; }
        .crm-col.accent .crm-count { background: var(--accent); color: var(--accent-ink); }
        .crm-list { display: flex; flex-direction: column; gap: 6px; }
        .crm-card {
          background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
          padding: 8px 10px;
          animation: crm-in .4s cubic-bezier(.2,.7,.2,1) both;
        }
        html.dark .crm-card { background: var(--paper); }
        .crm-col.accent .crm-card { border-color: transparent; }
        .crm-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }
        .crm-meta { margin-top: 4px; display: flex; justify-content: space-between; align-items: center; }
        .crm-amt { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
        .crm-src { font-size: 9.5px; padding: 2px 5px; border-radius: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
        .crm-src.wa { background: var(--accent); color: var(--accent-ink); }
        .crm-src.insta { background: #fce4ec; color: #c2185b; }
        html.dark .crm-src.insta { background: #3a1a26; color: #f48fb1; }
        .crm-src.web { background: var(--ink); color: var(--paper); }
        @keyframes crm-in { from { opacity: 0; transform: translateY(-6px) scale(.97);} to { opacity: 1; transform: none; } }
      `}</style>
    </div>
  );
}

window.CRMStage = CRMStage;