// Currency selector: big card with flag, code, symbol, and dropdown picker
function CurrencySelector({ value, onChange, label, accent, otherCode, tip }) {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const cardRef = React.useRef(null);
  const cur = window.CURRENCY_BY_CODE[value];

  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => {
      if (cardRef.current && !cardRef.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open]);

  const filtered = window.CURRENCIES.filter(c => {
    if (!query) return true;
    const q = query.toLowerCase();
    return c.code.toLowerCase().includes(q) || c.name.toLowerCase().includes(q);
  });

  const handleToggle = () => {
    setOpen(o => !o);
    if (navigator.vibrate) navigator.vibrate(8);
  };

  return (
    <div className={`cur-card ${open ? "open" : ""}`} ref={cardRef} data-accent={accent}>
      <div className="liquid-spec"></div>
      <div className="liquid-edge"></div>
      <div className="cur-card__label">
        <span className="dot"></span>
        {label}
        {tip}
      </div>

      <button className="cur-card__main" onClick={handleToggle}>
        <div className="cur-flag-wrap">
          <img
            key={cur.code}
            className="cur-flag"
            src={`https://flagcdn.com/w160/${cur.country}.png`}
            srcSet={`https://flagcdn.com/w320/${cur.country}.png 2x`}
            alt={cur.code}
          />
          <div className="cur-flag-shine"></div>
        </div>
        <div className="cur-meta">
          <div className="cur-code-row">
            <span className="cur-code">{cur.code}</span>
            <span className="cur-symbol">{cur.symbol}</span>
          </div>
          <div className="cur-name">{cur.name}</div>
        </div>
        <div className={`cur-caret ${open ? "open" : ""}`}>
          <svg width="14" height="14" viewBox="0 0 14 14">
            <path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </button>

      {open && (
        <div className="cur-dropdown">
          <div className="cur-search">
            <svg width="14" height="14" viewBox="0 0 14 14" style={{ opacity: 0.5 }}>
              <circle cx="6" cy="6" r="4.5" stroke="currentColor" strokeWidth="1.3" fill="none"/>
              <path d="M9.5 9.5L12 12" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
            </svg>
            <input
              autoFocus
              placeholder="Search currency or code"
              value={query}
              onChange={e => setQuery(e.target.value)}
            />
          </div>
          <div className="cur-list">
            {filtered.map(c => (
              <button
                key={c.code}
                className={`cur-list-item ${c.code === value ? "active" : ""} ${c.code === otherCode ? "disabled" : ""}`}
                disabled={c.code === otherCode}
                onClick={() => { onChange(c.code); setOpen(false); setQuery(""); }}
              >
                <img
                  className="cur-list-flag"
                  src={`https://flagcdn.com/w80/${c.country}.png`}
                  alt={c.code}
                />
                <span className="cur-list-code">{c.code}</span>
                <span className="cur-list-name">{c.name}</span>
                <span className="cur-list-symbol">{c.symbol}</span>
              </button>
            ))}
            {filtered.length === 0 && (
              <div className="cur-list-empty">No matches</div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

window.CurrencySelector = CurrencySelector;