const { useState: useStateCM, useEffect: useEffectCM } = React;

function CompareTray({ favorites, locations, onOpen, onClear, onRemove }) {
  const [open, setOpen] = useStateCM(false);
  const favLocs = locations.filter(l => favorites.has(l.id));
  if (favLocs.length === 0) return null;

  return (
    <>
      <button className="compare-fab" onClick={() => setOpen(true)}>
        <svg width="14" height="14" viewBox="0 0 16 16">
          <path d="M8 1l2.2 4.5L15 6.2l-3.5 3.4.8 4.9L8 12.2 3.7 14.5l.8-4.9L1 6.2l4.8-.7L8 1z" fill="currentColor"/>
        </svg>
        <span>{favLocs.length} saved</span>
        <span className="fab-action">compare →</span>
      </button>

      {open && (
        <div className="compare-overlay" onClick={() => setOpen(false)}>
          <div className="compare-panel" onClick={e => e.stopPropagation()}>
            <div className="compare-head">
              <div>
                <div className="compare-kicker">COMPARE BUCKET</div>
                <h2>{favLocs.length} saved {favLocs.length === 1 ? 'hub' : 'hubs'}</h2>
              </div>
              <div className="compare-actions">
                <button className="reset-btn" onClick={onClear}>Clear all</button>
                <button className="close-btn" onClick={() => setOpen(false)}>×</button>
              </div>
            </div>

            <div className="compare-table-wrap">
              <table className="compare-table">
                <thead>
                  <tr>
                    <th></th>
                    {favLocs.map(l => (
                      <th key={l.id}>
                        {l.userAdded && <div className="cmp-user-tag">USER·ADDED</div>}
                        <div className="cmp-h-name">{l.name}</div>
                        <div className="cmp-h-country">{l.country}</div>
                        <button className="cmp-h-remove" onClick={() => onRemove(l.id)}>remove</button>
                        <button className="cmp-h-open" onClick={() => { setOpen(false); onOpen(l.id); }}>open →</button>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  <tr><td className="cmp-row-lbl">Survival / mo</td>
                    {favLocs.map(l => <td key={l.id}>${l.costSurvival.toLocaleString()}</td>)}</tr>
                  <tr><td className="cmp-row-lbl">Comfort / mo</td>
                    {favLocs.map(l => <td key={l.id} className="cmp-accent">${l.costComfort.toLocaleString()}</td>)}</tr>
                  <tr><td className="cmp-row-lbl">Luxury / mo</td>
                    {favLocs.map(l => <td key={l.id}>${l.costLuxury.toLocaleString()}</td>)}</tr>
                  <tr><td className="cmp-row-lbl">Safety</td>
                    {favLocs.map(l => <td key={l.id}><CompareBar v={l.safety}/></td>)}</tr>
                  <tr><td className="cmp-row-lbl">Visa flex</td>
                    {favLocs.map(l => <td key={l.id}><CompareBar v={l.visaFlex}/></td>)}</tr>
                  <tr><td className="cmp-row-lbl">Internet</td>
                    {favLocs.map(l => <td key={l.id}><CompareBar v={l.internet}/></td>)}</tr>
                  <tr><td className="cmp-row-lbl">Healthcare</td>
                    {favLocs.map(l => <td key={l.id}><CompareBar v={l.healthcare}/></td>)}</tr>
                  <tr><td className="cmp-row-lbl">English</td>
                    {favLocs.map(l => <td key={l.id}><CompareBar v={l.englishOk}/></td>)}</tr>
                  <tr><td className="cmp-row-lbl">Community</td>
                    {favLocs.map(l => <td key={l.id}><CompareBar v={l.community}/></td>)}</tr>
                  <tr><td className="cmp-row-lbl">Biome</td>
                    {favLocs.map(l => <td key={l.id} className="cmp-small">{l.biome}</td>)}</tr>
                  <tr><td className="cmp-row-lbl">Vibes</td>
                    {favLocs.map(l => <td key={l.id} className="cmp-small">{l.vibes.join(', ')}</td>)}</tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function CompareBar({ v }) {
  return (
    <div className="cmp-bar">
      <div className="cmp-bar-fill" style={{ width: v + '%' }} />
      <span>{v}</span>
    </div>
  );
}

window.CompareTray = CompareTray;