// DatingScout.ai — Dynamic Comparison Tool v2
// /compare/ — user picks up to 5 platforms
// URL state: ?ids=candy-ai,secrets-ai,dreamgf-ai

const { useState, useEffect, useCallback } = React;
const P = window.NN.platforms;

const FEATURES = [
  { key:'price',    label:'Price / mo',     group:'Pricing',
    render: p => p.free ? 'Free' : `$${p.price}`,
    best: ps => ps.reduce((a,b) => a.price <= b.price ? a : b).id },

  { key:'freeTier', label:'Free tier',      group:'Pricing',
    bool:true, val: p => p.freeTier,
    render: p => p.freeTier ? '✓ Yes' : '✗ No' },

  { key:'rating',   label:'Score',          group:'Quality',
    render: p => `${p.rating.toFixed(1)} / 5`,
    best: ps => ps.reduce((a,b) => a.rating >= b.rating ? a : b).id },

  { key:'memory',   label:'Memory',         group:'Features',
    render: p => p.f.memory,
    best: ps => { const o={'Excellent':4,'Good':3,'Average':2,'Basic':1}; return ps.reduce((a,b)=>o[a.f.memory]>=o[b.f.memory]?a:b).id; } },

  { key:'nsfw',     label:'NSFW',           group:'Features',
    bool:true, val: p => p.f.nsfw,
    render: p => p.f.nsfw ? '✓ Yes' : '✗ No' },

  { key:'voice',    label:'Voice calls',    group:'Features',
    bool:true, val: p => p.f.voice,
    render: p => p.f.voice ? '✓ Yes' : '✗ No' },

  { key:'image',    label:'Image gen',      group:'Features',
    bool:true, val: p => p.f.image,
    render: p => p.f.image ? '✓ Yes' : '✗ No' },

  { key:'video',    label:'Video',          group:'Features',
    bool:true, val: p => p.f.video,
    render: p => p.f.video ? '✓ Yes' : '✗ No' },

  { key:'lovense',  label:'Lovense sync',   group:'Features',
    bool:true, val: p => p.f.lovense,
    render: p => p.f.lovense ? '✓ Yes' : '✗ No' },

  { key:'mobile',   label:'Mobile app',     group:'Platform',
    bool:true, val: p => p.f.mobile,
    render: p => p.f.mobile ? '✓ Yes' : '✗ No' },

  { key:'group',    label:'Group chat',     group:'Platform',
    bool:true, val: p => p.f.group,
    render: p => p.f.group ? '✓ Yes' : '✗ No' },

  { key:'chars',    label:'Characters',     group:'Platform',
    render: p => p.f.chars >= 999 ? 'Unlimited' : `${p.f.chars}+`,
    best: ps => ps.reduce((a,b) => a.f.chars >= b.f.chars ? a : b).id },

  { key:'styles',   label:'Visual styles',  group:'Platform',
    render: p => p.f.styles >= 4 ? `${p.f.styles} styles` : p.f.styles === 1 ? '1 style' : `${p.f.styles} styles`,
    best: ps => ps.reduce((a,b) => a.f.styles >= b.f.styles ? a : b).id },
];

const GROUPS = [...new Set(FEATURES.map(f => f.group))];

function getIdsFromUrl() {
  const params = new URLSearchParams(window.location.search);
  const raw = params.get('ids') || '';
  const ids = raw.split(',').filter(id => P.find(p => p.id === id)).slice(0, 5);
  return ids.length ? ids : ['candy-ai','secrets-ai','dreamgf-ai','kupid-ai','joi'];
}

function setIdsInUrl(ids) {
  const url = new URL(window.location.href);
  url.searchParams.set('ids', ids.join(','));
  window.history.replaceState({}, '', url.toString());
}

function Cell({ feat, plat, isBest }) {
  const val = feat.render(plat);
  const isGoodBool = feat.bool ? feat.val(plat) : null;

  let color = 'var(--ink-soft)';
  let fontWeight = 400;
  if (isBest) { color = 'var(--cyan)'; fontWeight = 700; }
  else if (isGoodBool === true) { color = 'var(--yes)'; fontWeight = 600; }
  else if (isGoodBool === false) { color = 'var(--coral)'; }

  return (
    <td style={{ padding:'12px 14px', borderBottom:'1px solid var(--line)',
      textAlign:'center', fontSize:14, color, fontWeight,
      background: isBest ? 'rgba(0,212,255,0.04)' : 'transparent' }}>
      {isBest && <span style={{ fontSize:10, fontFamily:'var(--f-mono)', color:'var(--cyan)',
        display:'block', marginBottom:2, letterSpacing:'.06em' }}>BEST</span>}
      {val}
    </td>
  );
}

function ComparisonTable({ platforms }) {
  if (!platforms.length) return (
    <div style={{ textAlign:'center', padding:'60px 0', color:'var(--ink-dim)',
      fontFamily:'var(--f-mono)', fontSize:14 }}>
      // SELECT PLATFORMS ABOVE TO COMPARE
    </div>
  );

  return (
    <div style={{ overflowX:'auto', marginTop:32, borderRadius:'var(--r-lg)',
      border:'1px solid var(--line)', overflow:'hidden' }}>
      <table style={{ width:'100%', borderCollapse:'collapse', minWidth:500 }}>
        <thead>
          <tr style={{ background:'var(--surface)' }}>
            <th style={{ padding:'16px', textAlign:'left', fontFamily:'var(--f-mono)',
              fontSize:11, color:'var(--ink-dim)', letterSpacing:'.08em',
              borderBottom:'2px solid var(--line)', width:140 }}>
              FEATURE
            </th>
            {platforms.map(p => (
              <th key={p.id} style={{ padding:'16px', textAlign:'center',
                borderBottom:'2px solid var(--line)', minWidth:140 }}>
                <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
                  <span style={{ width:44, height:44, borderRadius:'50%', display:'flex',
                    alignItems:'center', justifyContent:'center',
                    background:`linear-gradient(140deg,${p.accent[0]},${p.accent[1]})`,
                    fontFamily:'var(--f-head)', fontSize:18, fontWeight:700, color:'#fff',
                    boxShadow:`0 0 16px ${p.accent[0]}55`, flexShrink:0 }}>
                    {p.name.charAt(0)}
                  </span>
                  <div>
                    <div style={{ fontFamily:'var(--f-head)', fontSize:15, fontWeight:700,
                      color:'var(--ink)' }}>{p.name}</div>
                    <div style={{ fontFamily:'var(--f-mono)', fontSize:10, color:'var(--ink-dim)',
                      marginTop:2 }}>{p.cat}</div>
                  </div>
                </div>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {GROUPS.map(group => (
            <React.Fragment key={group}>
              <tr>
                <td colSpan={platforms.length + 1}
                  style={{ padding:'10px 16px', background:'rgba(255,255,255,0.02)',
                    fontFamily:'var(--f-mono)', fontSize:10, color:'var(--ink-dim)',
                    letterSpacing:'.1em', borderBottom:'1px solid var(--line)' }}>
                  // {group.toUpperCase()}
                </td>
              </tr>
              {FEATURES.filter(f => f.group === group).map(feat => {
                const bestId = feat.best ? feat.best(platforms) : null;
                return (
                  <tr key={feat.key}>
                    <td style={{ padding:'12px 16px', borderBottom:'1px solid var(--line)',
                      fontFamily:'var(--f-mono)', fontSize:11, color:'var(--ink-dim)',
                      letterSpacing:'.04em', whiteSpace:'nowrap' }}>
                      {feat.label.toUpperCase()}
                    </td>
                    {platforms.map(p => (
                      <Cell key={p.id} feat={feat} plat={p} isBest={bestId === p.id && platforms.length > 1} />
                    ))}
                  </tr>
                );
              })}
            </React.Fragment>
          ))}
          <tr style={{ background:'var(--surface)' }}>
            <td style={{ padding:'16px', borderTop:'2px solid var(--line)',
              fontFamily:'var(--f-mono)', fontSize:10, color:'var(--ink-dim)',
              letterSpacing:'.08em' }}>TRY IT</td>
            {platforms.map(p => (
              <td key={p.id} style={{ padding:'16px', borderTop:'2px solid var(--line)',
                textAlign:'center' }}>
                <a href={p.url} style={{ display:'inline-block', padding:'10px 20px',
                  background:`linear-gradient(135deg,${p.accent[0]},${p.accent[1]})`,
                  borderRadius:'var(--r-pill)', fontFamily:'var(--f-head)', fontSize:13,
                  fontWeight:700, color:'#fff', textDecoration:'none', whiteSpace:'nowrap' }}>
                  Try {p.name} →
                </a>
              </td>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );
}

function PlatformChip({ p, selected, onToggle, disabled }) {
  return (
    <button onClick={() => !disabled && onToggle(p.id)}
      style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 14px',
        background: selected
          ? `linear-gradient(135deg,${p.accent[0]}22,${p.accent[1]}22)`
          : 'var(--surface)',
        border: selected ? `1px solid ${p.accent[0]}` : '1px solid var(--line)',
        borderRadius:'var(--r-pill)', cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? .35 : 1, transition:'all .15s',
        color:'var(--ink)', fontFamily:'var(--f-body)', fontSize:13 }}>
      <span style={{ width:20, height:20, borderRadius:'50%', display:'flex',
        alignItems:'center', justifyContent:'center', flexShrink:0,
        background:`linear-gradient(140deg,${p.accent[0]},${p.accent[1]})`,
        fontSize:9, fontWeight:700, color:'#fff' }}>
        {p.name.charAt(0)}
      </span>
      {p.name}
      {selected && <span style={{ color:p.accent[0], fontSize:10 }}>✓</span>}
    </button>
  );
}

function App() {
  const [selected, setSelected] = useState(getIdsFromUrl);
  const [search, setSearch] = useState('');

  useEffect(() => { setIdsInUrl(selected); }, [selected]);

  const toggle = useCallback(id => {
    setSelected(prev =>
      prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id].slice(0, 5)
    );
  }, []);

  const filtered = P.filter(p =>
    p.name.toLowerCase().includes(search.toLowerCase()) ||
    p.cat.toLowerCase().includes(search.toLowerCase())
  );

  const platforms = selected.map(id => P.find(p => p.id === id)).filter(Boolean);

  const [copied, setCopied] = useState(false);
  const copyLink = () => {
    navigator.clipboard.writeText(window.location.href).then(() => {
      setCopied(true); setTimeout(() => setCopied(false), 2000);
    });
  };

  return (
    <section className="section" style={{ paddingTop:0 }}>
      <div className="wrap-wide">

        {/* Picker */}
        <div style={{ background:'var(--surface)', border:'1px solid var(--line)',
          borderRadius:'var(--r-lg)', padding:24, marginBottom:8 }}>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16, flexWrap:'wrap' }}>
            <input type="text" placeholder="Search platforms…"
              value={search} onChange={e => setSearch(e.target.value)}
              style={{ padding:'9px 16px', background:'var(--bg)', border:'1px solid var(--line)',
                borderRadius:'var(--r-lg)', color:'var(--ink)', fontSize:14,
                fontFamily:'var(--f-body)', outline:'none', flex:1, minWidth:180 }} />
            <span style={{ fontFamily:'var(--f-mono)', fontSize:12, color:'var(--ink-dim)',
              whiteSpace:'nowrap' }}>
              {selected.length}/5 selected
            </span>
            {selected.length > 0 && (
              <button onClick={() => setSelected([])}
                style={{ padding:'9px 16px', background:'transparent',
                  border:'1px solid var(--line)', borderRadius:'var(--r-pill)',
                  color:'var(--ink-dim)', fontFamily:'var(--f-mono)', fontSize:11,
                  cursor:'pointer', letterSpacing:'.06em' }}>
                CLEAR
              </button>
            )}
            <button onClick={copyLink}
              style={{ padding:'9px 16px', background:'transparent',
                border:'1px solid var(--line)', borderRadius:'var(--r-pill)',
                color: copied ? 'var(--cyan)' : 'var(--ink-dim)',
                fontFamily:'var(--f-mono)', fontSize:11,
                cursor:'pointer', letterSpacing:'.06em', transition:'color .2s' }}>
              {copied ? 'COPIED ✓' : 'SHARE'}
            </button>
          </div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
            {filtered.map(p => (
              <PlatformChip key={p.id} p={p}
                selected={selected.includes(p.id)}
                onToggle={toggle}
                disabled={!selected.includes(p.id) && selected.length >= 5} />
            ))}
          </div>
        </div>

        <ComparisonTable platforms={platforms} />

        <p style={{ marginTop:20, fontFamily:'var(--f-mono)', fontSize:11,
          color:'var(--ink-dim)', lineHeight:1.6 }}>
          // DATA VERIFIED JUNE 2026 · CYAN = BEST IN SELECTED GROUP · 18+ ONLY
        </p>
      </div>
    </section>
  );
}

window.CompareTool = App;