// Dating App Scan results view — matches grid, profile detail card, and a
// "Toggle to show Everyone" reveal of gender-matched decoy profiles.
// Reads search._raw.result_data: { image_urls[], gender, subject_age }.
(function () {
  const { useState, useMemo } = React;

  // 6 "looking for" states (match the in-app picker).
  const LOOKING_FOR = [
    { emoji: "💘", label: "Long-term partner" },
    { emoji: "😍", label: "Long-term, open to short" },
    { emoji: "🥂", label: "Short-term, open to long" },
    { emoji: "🎉", label: "Short-term fun" },
    { emoji: "👋", label: "New friends" },
    { emoji: "🤔", label: "Still figuring it out" },
  ];
  const MALE_NAMES = ["Matt","Rick","Drew","Emrah","Dontay","Fonz","Ivan","JJ","Sebas","Andrew","Justin","Marcus","Diego","Aaron","Nick","Cody","Brandon","Jared","Mason","Luis","Omar","Kevin","Chris","Sean","Derek","Tony","Carlos","Eric","Blake","Trevor","Hunter","Jordan","Caleb","Devin","Malik","Andre","Victor","Pedro","Jake","Tyler","Noah","Liam","Ethan","Adrian"];
  const FEMALE_NAMES = ["Colleen","Sarah","Emma","Olivia","Mia","Ava","Sophie","Bella","Chloe","Grace","Lily","Hannah","Maya","Zoe","Ella","Nora","Ruby","Ivy","Jade","Leah","Paige","Brooke","Sienna","Daisy","Holly","Faith","Skylar","Aria","Nina","Tara","Mara","Lana","Reese","Quinn","Demi","Cleo","Remi","Sage","Wren","Elle","Cara","Nadia","Tessa","Mila"];

  // Deterministic 32-bit hash (FNV-1a) so a profile's generated fields are stable.
  function hashStr(s) {
    let h = 2166136261 >>> 0; s = String(s);
    for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
    return h >>> 0;
  }
  function metaFor(seed, gender) {
    const h = hashStr(seed);
    const isF = gender === "female";
    const names = isF ? FEMALE_NAMES : MALE_NAMES;
    return {
      name: names[h % names.length],
      lookingFor: LOOKING_FOR[(h >>> 3) % LOOKING_FOR.length],
      miles: 1 + ((h >>> 7) % 120),
      verified: ((h >>> 11) % 100) < 25,
      pronouns: isF ? "She/Her/Hers" : "He/Him/His",
    };
  }
  // Deterministic sample of n items from arr, seeded.
  function sample(arr, n, seedStr) {
    const idx = arr.map((_, i) => i);
    let h = hashStr(seedStr) || 1;
    for (let i = idx.length - 1; i > 0; i--) {
      h = (Math.imul(h, 1664525) + 1013904223) >>> 0;
      const j = h % (i + 1);
      const t = idx[i]; idx[i] = idx[j]; idx[j] = t;
    }
    return idx.slice(0, n).map((i) => arr[i]);
  }

  const BlueCheck = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{ flex: "none" }}>
      <path d="M12 2l2.4 1.8 3-.2 1 2.8 2.6 1.5-.8 2.9.8 2.9-2.6 1.5-1 2.8-3-.2L12 22l-2.4-1.8-3 .2-1-2.8L3 16.3l.8-2.9L3 10.5l2.6-1.5 1-2.8 3 .2L12 2z" fill="#1D9BF0"/>
      <path d="M8.5 12.2l2.2 2.2 4.6-4.8" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );

  function ProfileCard({ profile, onClick }) {
    return (
      <button className="dr-card" onClick={onClick}>
        <div className="dr-card__img" style={{ backgroundImage: `url("${profile.image}")` }} />
        <div className="dr-card__foot">
          <span className="dr-card__name">{profile.name}</span>
          <span className="dr-card__age">{profile.age != null ? profile.age : ""}</span>
          {profile.verified && <BlueCheck />}
        </div>
      </button>
    );
  }

  function ProfileDetailModal({ profile, onClose }) {
    if (!profile) return null;
    return (
      <div className="dr-overlay" onClick={onClose} style={{ zIndex: 220 }}>
        <div className="dr-detail" onClick={(e) => e.stopPropagation()}>
          <button className="dr-x" onClick={onClose} aria-label="Close"
                  style={{ position: "absolute", top: 12, left: 12 }}>✕</button>
          <h2 className="dr-detail__name">{profile.name}</h2>
          <div className="dr-detail__img" style={{ backgroundImage: `url("${profile.image}")` }} />
          <div className="dr-detail__row">
            <div><div className="dr-detail__k">NAME</div><div className="dr-detail__v">{profile.name}</div></div>
            <div><div className="dr-detail__k">AGE</div><div className="dr-detail__v">{profile.age != null ? profile.age : "—"}</div></div>
          </div>
          <div className="dr-detail__sep" />
          <div className="dr-detail__k">VERIFIED</div>
          <div className="dr-detail__v">{profile.verified ? "Selfie verified" : "Selfie not verified"}</div>
          <div className="dr-detail__pill">{profile.lookingFor.emoji}&nbsp; {profile.lookingFor.label}</div>
          <div className="dr-detail__meta">🪪&nbsp; {profile.pronouns}</div>
          <div className="dr-detail__meta">📍&nbsp; {profile.miles} miles away</div>
        </div>
      </div>
    );
  }

  function DatingResultsView({ search, onClose }) {
    const rd = (search && search._raw && search._raw.result_data) || {};
    const subjectName = (search && search.name) || "Match";
    const subjectAge = rd.subject_age != null ? rd.subject_age : null;
    const gender = String(rd.gender || "male").toLowerCase() === "female" ? "female" : "male";
    const images = Array.isArray(rd.image_urls) ? rd.image_urls : [];
    const [showEveryone, setShowEveryone] = useState(false);
    const [selected, setSelected] = useState(null);

    // Matches: same person, so they share one generated metadata set; each card its own photo.
    const matchMeta = metaFor(subjectName + ":" + subjectAge, gender);
    const matches = images.map((img) => ({
      image: img, name: subjectName, age: subjectAge, verified: true,
      lookingFor: matchMeta.lookingFor, pronouns: matchMeta.pronouns, miles: matchMeta.miles,
    }));

    const everyone = useMemo(() => {
      const pool = (window.EVERYONE_PROFILES || []).filter((p) => p.gender === gender);
      return sample(pool, 40, (search && search.id) || "seed").map((p) => {
        const m = metaFor(p.image, p.gender);
        return { image: p.image, age: p.age, ...m };
      });
    }, [gender, search && search.id]);

    return (
      <div className="dr-overlay dr-overlay--page" onClick={onClose} style={{ zIndex: 200 }}>
        <div className="dr-page" onClick={(e) => e.stopPropagation()}>
          <div className="dr-page__top">
            <button className="dr-x" onClick={onClose} aria-label="Close">✕</button>
            <div className="dr-toggle">
              <span>Toggle to show Everyone</span>
              <button className={"dr-switch" + (showEveryone ? " is-on" : "")} role="switch"
                      aria-checked={showEveryone} onClick={() => setShowEveryone((v) => !v)}>
                <span className="dr-switch__knob" />
              </button>
            </div>
          </div>

          <div className="dr-section-title">
            {matches.length
              ? <>Profiles found for {subjectName}{subjectAge ? `, ${subjectAge}` : ""}</>
              : <>No matches yet — your scan is still processing.</>}
          </div>
          <div className="dr-grid">
            {matches.map((p, i) => <ProfileCard key={"m" + i} profile={p} onClick={() => setSelected(p)} />)}
          </div>

          {showEveryone && (
            <>
              <div className="dr-section-title" style={{ marginTop: 28 }}>Everyone</div>
              <div className="dr-grid">
                {everyone.map((p, i) => <ProfileCard key={"e" + i} profile={p} onClick={() => setSelected(p)} />)}
              </div>
            </>
          )}
        </div>
        <ProfileDetailModal profile={selected} onClose={() => setSelected(null)} />
      </div>
    );
  }

  // In-dashboard report viewer (person check / sweepify) — embeds the hosted
  // report_url in an iframe with an "open in new tab" fallback.
  function ReportViewerModal({ url, title, onClose }) {
    if (!url) return null;
    return (
      <div className="dr-overlay dr-overlay--page" onClick={onClose} style={{ zIndex: 200 }}>
        <div className="dr-page rv-page" onClick={(e) => e.stopPropagation()}>
          <div className="dr-page__top">
            <button className="dr-x" onClick={onClose} aria-label="Close">✕</button>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ fontWeight: 700, color: "#0F172A" }}>{title || "Report"}</span>
              <a className="sw-btn sw-btn--ghost sw-btn--sm" href={url} target="_blank" rel="noopener noreferrer">
                Open in new tab
              </a>
            </div>
          </div>
          <iframe src={url} className="rv-frame" title={title || "Report"} loading="lazy" />
        </div>
      </div>
    );
  }

  // Face Scan results — grid of real FaceCheck matches ({ score, url, base64 }).
  function FaceMatchesView({ result, onBack }) {
    const items = (result && result.items) || [];
    const domain = (u) => { try { return new URL(u).hostname.replace(/^www\./, ""); } catch (e) { return (u || "").slice(0, 40); } };
    const imgSrc = (b) => !b ? "" : (String(b).startsWith("data:") ? b : "data:image/jpeg;base64," + b);
    const tier = (s) => s >= 90 ? "#EF4444" : s >= 83 ? "#F59E0B" : s >= 70 ? "#A16207" : "#94A3B8";
    return (
      <div className="fm-page">
        <button className="linkback" onClick={onBack}>‹ Back to dashboard</button>
        <h1 className="scanpage__title" style={{ marginTop: 4 }}>Face Scan Results</h1>
        <p className="scanpage__sub">
          {items.length ? `${items.length} potential matches found across the web.` : "No matches found for this photo."}
        </p>
        {result && result.status === "processing" && (
          <div className="dr-section-title" style={{ color: "var(--sw-fg-muted)", fontWeight: 600 }}>
            Still scanning — results will finish populating shortly. Reopen from My Searches in a minute.
          </div>
        )}
        <div className="dr-grid" style={{ marginTop: 16 }}>
          {items.map((it, i) => (
            <a className="dr-card" key={i} href={it.url} target="_blank" rel="noopener noreferrer">
              <div className="dr-card__img" style={{ backgroundImage: `url("${imgSrc(it.base64)}")`, position: "relative" }}>
                <span className="fm-score" style={{ background: tier(it.score) }}>{it.score}%</span>
              </div>
              <div className="dr-card__foot">
                <span className="dr-card__name" style={{ fontSize: 14 }}>{domain(it.url)}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    );
  }

  // ── one-time styles ──
  if (!document.getElementById("dr-styles")) {
    const s = document.createElement("style");
    s.id = "dr-styles";
    s.textContent = `
      .dr-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;animation:overlay-in 200ms var(--sw-ease);}
      .dr-overlay--page{align-items:flex-start;overflow-y:auto;}
      .dr-page{background:#fff;border-radius:20px;max-width:1100px;width:100%;margin:0 auto;padding:24px 28px 36px;position:relative;box-shadow:0 32px 80px rgba(15,23,42,.32);}
      .dr-page__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;}
      .dr-x{width:38px;height:38px;border:0;border-radius:999px;background:transparent;color:#0F172A;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background 160ms var(--sw-ease);}
      .dr-x:hover{background:#F1F5F9;}
      .dr-toggle{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:15px;color:#0F172A;}
      .dr-switch{position:relative;width:52px;height:30px;border:0;border-radius:999px;background:#CBD5E1;cursor:pointer;transition:background 200ms var(--sw-ease);flex:none;}
      .dr-switch.is-on{background:#22C55E;}
      .dr-switch__knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform 200ms var(--sw-ease);}
      .dr-switch.is-on .dr-switch__knob{transform:translateX(22px);}
      .dr-section-title{font-size:18px;font-weight:800;color:#0F172A;margin:8px 0 14px;letter-spacing:-0.01em;}
      .dr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
      .dr-card{border:0;background:transparent;padding:0;cursor:pointer;text-align:left;}
      .dr-card__img{width:100%;aspect-ratio:1/1;border-radius:16px;background-size:cover;background-position:center;background-color:#E2E8F0;box-shadow:0 6px 18px rgba(15,23,42,.10);transition:transform 160ms var(--sw-ease),box-shadow 160ms var(--sw-ease);}
      .dr-card:hover .dr-card__img{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.16);}
      .dr-card__foot{display:flex;align-items:center;gap:8px;margin-top:10px;}
      .dr-card__name{font-weight:800;font-size:17px;color:#0F172A;}
      .dr-card__age{color:#475569;font-size:16px;font-weight:500;}
      .dr-detail{background:#fff;border:4px solid #FF3B6B;border-radius:24px;max-width:380px;width:100%;padding:18px;position:relative;max-height:92vh;overflow-y:auto;animation:modal-in 280ms var(--sw-ease);}
      .dr-detail__name{text-align:center;font-size:34px;font-weight:900;color:#0F172A;margin:8px 0 14px;letter-spacing:-0.02em;}
      .dr-detail__img{width:100%;aspect-ratio:1/1.18;border-radius:14px;background-size:cover;background-position:center;background-color:#E2E8F0;}
      .dr-detail__row{display:flex;gap:48px;margin-top:16px;}
      .dr-detail__k{font-size:12px;font-weight:800;letter-spacing:.05em;color:#0F172A;}
      .dr-detail__v{color:#334155;font-size:15px;margin-top:2px;}
      .dr-detail__sep{height:1px;background:#E2E8F0;margin:16px 0;}
      .dr-detail__pill{background:#FFE4EC;color:#E11D63;font-weight:700;font-size:15px;padding:12px 14px;border-radius:12px;margin-top:16px;display:flex;align-items:center;}
      .dr-detail__meta{color:#475569;font-size:14px;margin-top:12px;display:flex;align-items:center;}
      .fm-page{max-width:1100px;display:flex;flex-direction:column;}
      .fm-score{position:absolute;top:8px;left:8px;color:#fff;font-weight:700;font-size:12px;padding:3px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.28);}
      .rv-page{max-width:920px;padding:14px 16px 16px;}
      .rv-frame{width:100%;height:78vh;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #E2E8F0;}
      @media (max-width:880px){
        .rv-frame{height:72vh;}
        .dr-page{padding:16px 16px 28px;border-radius:14px;}
        .dr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
        .dr-toggle{font-size:13px;gap:8px;}
        .dr-detail__name{font-size:28px;}
        .dr-overlay{padding:12px;}
      }
    `;
    document.head.appendChild(s);
  }

  Object.assign(window, { DatingResultsView, ReportViewerModal, FaceMatchesView });
})();