// search.jsx — Platform toggle + search bar (used in hero, footer CTA, app search screen)

const { useState, useRef, useEffect } = React;

function PlatformToggle({ value, onChange, size = "md" }) {
  const { InstagramIcon, TikTokIcon } = window.VFIcons;
  return (
    <div className="platform-toggle" role="tablist" aria-label="Platform">
      <button
        role="tab"
        aria-selected={value === "instagram"}
        className={value === "instagram" ? "is-active" : ""}
        onClick={() => onChange("instagram")}
      >
        <InstagramIcon size={15} stroke={1.7} /> Instagram
      </button>
      <button
        role="tab"
        aria-selected={value === "tiktok"}
        className={value === "tiktok" ? "is-active" : ""}
        onClick={() => onChange("tiktok")}
      >
        <TikTokIcon size={15} stroke={1.7} /> TikTok
      </button>
    </div>
  );
}

function SearchBar({ onSubmit, size = "md", autoFocus = false, placeholder, value, onChange }) {
  const { ArrowRight } = window.VFIcons;
  const [local, setLocal] = useState(value || "");
  const inputRef = useRef(null);
  const isControlled = value !== undefined;
  const v = isControlled ? value : local;

  useEffect(() => {
    if (autoFocus && inputRef.current) inputRef.current.focus();
  }, [autoFocus]);

  function set(next) {
    if (!isControlled) setLocal(next);
    onChange && onChange(next);
  }

  function submit(e) {
    e && e.preventDefault();
    const cleaned = v.trim().replace(/^@/, "");
    if (!cleaned) return;
    onSubmit(cleaned);
  }

  return (
    <form
      className={`search-bar ${size === "lg" ? "search-bar--lg" : ""}`}
      onSubmit={submit}
      role="search"
    >
      <span className="at">@</span>
      <input
        ref={inputRef}
        type="text"
        autoComplete="off"
        autoCapitalize="off"
        spellCheck={false}
        placeholder={placeholder || "username"}
        value={v}
        onChange={(e) => set(e.target.value.replace(/^@/, ""))}
      />
      <button type="submit" className="search-go" aria-label="Search" disabled={!v.trim()}>
        <ArrowRight size={20} stroke={2.2} />
      </button>
    </form>
  );
}

function SearchBlock({ onSearch, autoFocus = false, includeExamples = true, includeDisclaimer = true }) {
  const [platform, setPlatform] = useState("instagram");
  const [query, setQuery] = useState("");

  const examples = ["staycation.sfbayarea", "local_eats_boston", "downtown_fit_co"];

  return (
    <div className="search-wrap">
      <PlatformToggle value={platform} onChange={setPlatform} />
      <SearchBar
        autoFocus={autoFocus}
        value={query}
        onChange={setQuery}
        onSubmit={(u) => onSearch(u, platform)}
      />
      {includeExamples && (
        <div className="hero-tags">
          <b>Try:</b>{" "}
          {examples.map((u, i) => (
            <React.Fragment key={u}>
              <span
                className="tag"
                onClick={() => onSearch(u, platform)}
              >
                @{u}
              </span>
              {i < examples.length - 1 ? " · " : ""}
            </React.Fragment>
          ))}
        </div>
      )}
      {includeDisclaimer && (
        <div className="hero-disclaimer">No account required. Results are instant.</div>
      )}
    </div>
  );
}

Object.assign(window, { PlatformToggle, SearchBar, SearchBlock });