"use client";

import { useEffect, useMemo, useState } from "react";

type Lead = {
  id: string;
  name: string;
  role: string;
  roleOverride?: string;
  company: string;
  companyFromPrompt?: boolean;
  sourceTitle?: string;
  subtitle?: string;
  titleText?: string;
  metaText?: string;
  snippetText?: string;
  displayedLink?: string;
  linkedinUrl: string;
  sourceUrl: string;
  snippet: string;
  relevanceScore: number;
  emailConfidence: number;
  emailGuess?: string;
  createdAt?: string;
  resultType?: "profile" | "job" | "other";
  serp?: Record<string, unknown>;
};

type DebugInfo = Record<string, unknown>;

type SearchResponse = {
  leads: Lead[];
  jobs?: Lead[];
  debug?: DebugInfo;
};

type SearchState = {
  prompt: string;
  results: Lead[];
  jobs: Lead[];
  error: string | null;
  debugData: DebugInfo | null;
  currentPage: number;
  scrollY: number;
  savedAt: number;
};

type SavedSearch = {
  id: string;
  prompt: string;
  createdAt: string;
};

const SEARCH_STATE_KEY = "leadfinder:searchState";
const SAVED_SEARCHES_KEY = "leadfinder:savedSearches";
const PENDING_SEARCH_KEY = "leadfinder:pendingSearch";

const quickPrompts = [
  "Pharma marketing directors at UK brands",
  "Event managers for medical conferences",
  "Digital leads at life sciences agencies",
  "Brand managers at biotech startups",
  "Procurement heads for pharma events",
  "Clinical marketing managers in London",
  "Medical affairs directors (conference sponsors)",
  "Digital strategy leads at healthcare firms",
  "Event producers for pharma roadshows",
];

export default function Home() {
  const [prompt, setPrompt] = useState("");
  const [isSearching, setIsSearching] = useState(false);
  const [results, setResults] = useState<Lead[]>([]);
  const [saved, setSaved] = useState<Lead[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [debugData, setDebugData] = useState<SearchResponse["debug"] | null>(
    null
  );
  const [currentPage, setCurrentPage] = useState(1);
  const [hasRestored, setHasRestored] = useState(false);
  const [savedSearches, setSavedSearches] = useState<SavedSearch[]>([]);
  const [jobs, setJobs] = useState<Lead[]>([]);
  const [activeTab, setActiveTab] = useState<"people" | "jobs">("people");
  const pageSize = 10;

  const savedLookup = useMemo(() => {
    return new Set(saved.map((lead) => lead.linkedinUrl || lead.sourceUrl));
  }, [saved]);

  const activeResults = activeTab === "people" ? results : jobs;
  const totalPages = Math.max(1, Math.ceil(activeResults.length / pageSize));
  const pageStart = (currentPage - 1) * pageSize;
  const pageResults = results.slice(pageStart, pageStart + pageSize);
  const jobPageResults = jobs.slice(pageStart, pageStart + pageSize);

  const recentLeads = useMemo(() => {
    return [...saved]
      .sort((a, b) => {
        const aTime = a.createdAt ? Date.parse(a.createdAt) : 0;
        const bTime = b.createdAt ? Date.parse(b.createdAt) : 0;
        return bTime - aTime;
      })
      .slice(0, 10);
  }, [saved]);

  useEffect(() => {
    const loadSaved = async () => {
      const res = await fetch("/api/leads");
      const data = await res.json();
      setSaved(Array.isArray(data.leads) ? data.leads : []);
    };
    loadSaved();
  }, []);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const raw = window.localStorage.getItem(SEARCH_STATE_KEY);
    if (raw) {
      try {
        const state = JSON.parse(raw) as Partial<SearchState>;
        if (state.prompt) setPrompt(state.prompt);
        if (Array.isArray(state.results)) setResults(state.results);
        if (Array.isArray((state as any).jobs)) setJobs((state as any).jobs);
        if (typeof state.error === "string" || state.error === null) {
          setError(state.error ?? null);
        }
        if (state.debugData) setDebugData(state.debugData);
        if (typeof state.currentPage === "number") {
          setCurrentPage(state.currentPage);
        }
        if (typeof state.scrollY === "number") {
          window.requestAnimationFrame(() => {
            window.scrollTo(0, state.scrollY ?? 0);
          });
        }
      } catch {
        // ignore corrupted state
      }
    }
    const savedRaw = window.localStorage.getItem(SAVED_SEARCHES_KEY);
    if (savedRaw) {
      try {
        const parsed = JSON.parse(savedRaw);
        if (Array.isArray(parsed)) {
          setSavedSearches(parsed);
        }
      } catch {
        // ignore corrupted state
      }
    }
    const pending = window.localStorage.getItem(PENDING_SEARCH_KEY);
    if (pending) {
      window.localStorage.removeItem(PENDING_SEARCH_KEY);
      setPrompt(pending);
      runSearch(pending);
    }
      setHasRestored(true);
  }, []);

  useEffect(() => {
    if (currentPage > totalPages) {
      setCurrentPage(totalPages);
    }
  }, [currentPage, totalPages]);

  useEffect(() => {
    setCurrentPage(1);
  }, [activeTab]);

  const persistSearchState = (overrides?: Partial<SearchState>) => {
    if (typeof window === "undefined") return;
    try {
      const raw = window.localStorage.getItem(SEARCH_STATE_KEY);
      const existing = raw ? (JSON.parse(raw) as Partial<SearchState>) : {};
      const next: SearchState = {
        ...existing,
        prompt,
        results,
        jobs,
        error,
        debugData: (debugData ?? null) as DebugInfo | null,
        currentPage,
        scrollY:
          typeof overrides?.scrollY === "number"
            ? overrides.scrollY
            : existing.scrollY ?? 0,
        savedAt: Date.now(),
        ...overrides,
      };
      window.localStorage.setItem(SEARCH_STATE_KEY, JSON.stringify(next));
    } catch {
      // ignore storage errors
    }
  };

  const persistSavedSearches = (items: SavedSearch[]) => {
    if (typeof window === "undefined") return;
    try {
      window.localStorage.setItem(SAVED_SEARCHES_KEY, JSON.stringify(items));
    } catch {
      // ignore storage errors
    }
  };

  const autoSaveSearch = (value: string) => {
    const trimmed = value.trim();
    if (!trimmed) return;
    const existing = savedSearches.find(
      (item) => item.prompt.toLowerCase() === trimmed.toLowerCase()
    );
    const nextItem: SavedSearch = existing
      ? { ...existing, createdAt: new Date().toISOString() }
      : {
          id: crypto.randomUUID(),
          prompt: trimmed,
          createdAt: new Date().toISOString(),
        };
    const next = [
      nextItem,
      ...savedSearches.filter((item) => item.id !== nextItem.id),
    ].slice(0, 20);
    setSavedSearches(next);
    persistSavedSearches(next);
  };

  const handleRemoveSavedSearch = (id: string) => {
    const next = savedSearches.filter((item) => item.id !== id);
    setSavedSearches(next);
    persistSavedSearches(next);
  };

  useEffect(() => {
    if (!hasRestored) return;
    persistSearchState();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [prompt, results, error, debugData, currentPage, hasRestored]);

  const runSearch = async (value: string) => {
    if (!value.trim()) return;
    setIsSearching(true);
    setError(null);
    setDebugData(null);
    setCurrentPage(1);
    setActiveTab("people");
    persistSearchState({ scrollY: window.scrollY });
    try {
      const res = await fetch("/api/search", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt: value }),
      });
      if (!res.ok) {
        const message = await res.text();
        throw new Error(message || "Search failed.");
      }
      const data: SearchResponse = await res.json();
      setResults(data.leads ?? []);
      setJobs(Array.isArray(data.jobs) ? data.jobs : []);
      setDebugData(data.debug ?? null);
      autoSaveSearch(value);
      if (!data.leads?.length) {
        setError(
          "No results found. Try broader keywords or remove specific company names."
        );
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Search failed.");
    } finally {
      setIsSearching(false);
    }
  };

  const clearSearch = () => {
    setPrompt("");
    setResults([]);
    setJobs([]);
    setError(null);
    setDebugData(null);
    setCurrentPage(1);
    if (typeof window !== "undefined") {
      try {
        window.localStorage.removeItem(SEARCH_STATE_KEY);
      } catch {
        // ignore storage errors
      }
    }
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    runSearch(prompt);
  };

  const saveLead = async (lead: Lead) => {
    if (savedLookup.has(lead.linkedinUrl || lead.sourceUrl)) return;
    const res = await fetch("/api/leads", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ lead }),
    });
    if (!res.ok) return;
    const data = await res.json();
    setSaved(data.leads ?? saved);
    const savedLead = data.leads?.find(
      (item: Lead) => item.linkedinUrl === lead.linkedinUrl
    );
    return savedLead as Lead | undefined;
  };

  const openLeadProfile = async (lead: Lead) => {
    const existing = saved.find(
      (item) =>
        item.linkedinUrl === lead.linkedinUrl ||
        item.sourceUrl === lead.sourceUrl
    );
    if (existing?.id) {
      persistSearchState({ scrollY: window.scrollY });
      window.location.href = `/lead/${existing.id}`;
      return;
    }
    if (typeof window !== "undefined") {
      window.sessionStorage.setItem(
        "leadfinder:previewLead",
        JSON.stringify({ ...lead, preview: true })
      );
    }
    persistSearchState({ scrollY: window.scrollY });
    window.location.href = "/lead/preview";
  };

  const removeLead = async (id: string) => {
    const res = await fetch(`/api/leads?id=${encodeURIComponent(id)}`, {
      method: "DELETE",
    });
    if (!res.ok) return;
    const data = await res.json();
    setSaved(data.leads ?? saved);
  };

  const scoreTint = (value: number) => {
    if (value >= 80) return "bg-emerald-200";
    if (value >= 60) return "bg-amber-200";
    return "bg-rose-200";
  };

  const scoreBar = (value: number) => {
    if (value >= 80) return "bg-emerald-600";
    if (value >= 60) return "bg-amber-600";
    return "bg-rose-600";
  };

  return (
    <div className="relative min-h-screen overflow-hidden bg-[var(--background)] text-[var(--foreground)]">
      {isSearching && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
          <div className="flex flex-col items-center gap-3 rounded-3xl border border-white/20 bg-white px-6 py-5 text-center">
            <div className="h-10 w-10 animate-spin rounded-full border-4 border-black/20 border-t-black" />
            <p className="text-sm font-semibold text-black">Searching the web…</p>
            <p className="text-xs text-black/60">
              Pulling latest LinkedIn matches and ranking relevance.
            </p>
          </div>
        </div>
      )}
      <div className="pointer-events-none absolute left-0 top-0 h-full w-full">
        <div className="absolute -left-32 top-24 h-60 w-60 rounded-full bg-[radial-gradient(circle,rgba(0,0,0,0.08),transparent_70%)] blur-2xl" />
        <div className="absolute right-[-12%] top-20 h-72 w-72 rounded-full bg-[radial-gradient(circle,rgba(0,0,0,0.06),transparent_70%)] blur-3xl" />
        <div className="absolute bottom-[-10%] left-1/2 h-60 w-[70vw] -translate-x-1/2 rounded-[40%] bg-[radial-gradient(circle,rgba(0,0,0,0.05),transparent_70%)] blur-3xl" />
      </div>

      <header className="relative z-10 border-b-4 border-black">
        <div className="bg-black px-6 py-4 md:px-12 lg:px-16">
          <div className="flex flex-col items-start justify-between gap-3 md:flex-row md:items-center md:justify-between">
            <div>
              <p className="text-xs uppercase tracking-[0.25em] text-white/70">
                Leadfinder
              </p>
              <h1 className="font-[var(--font-display)] text-2xl font-semibold leading-tight tracking-tight text-white md:text-3xl">
                The Leadfinder
              </h1>
            </div>
            <div className="flex items-center gap-4 md:ml-auto">
              <nav className="hidden items-center gap-3 text-xs font-semibold uppercase tracking-wide text-white/70 md:flex">
                <a href="/" className="text-white hover:text-white/80">
                  Search
                </a>
                <span className="text-white/40">|</span>
                <a href="/searches" className="text-white hover:text-white/80">
                  Saved searches
                </a>
                <span className="text-white/40">|</span>
                <a href="/leads" className="text-white hover:text-white/80">
                  All leads
                </a>
              </nav>
              <div className="rounded-full border border-white/30 bg-white px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-black">
                AI bot to scrape the web for B2B lead generation
              </div>
            </div>
          </div>
        </div>
      </header>

      <main className="relative z-10 px-6 pb-16 pt-10 md:px-12 lg:px-16">
        <section className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-stretch">
          <div className="space-y-8">
            <div className="rounded-3xl border border-black/10 bg-white p-8 shadow-[0_30px_80px_rgba(0,0,0,0.12)]">
              <h2 className="font-[var(--font-display)] text-2xl font-semibold">
                Define who you want to meet
              </h2>
              <p className="mt-2 text-sm text-[var(--muted)]">
                Search the web for decision-makers, match their LinkedIn profile, and
                estimate email deliverability in one search.
              </p>

              <form onSubmit={handleSubmit} className="mt-6 space-y-4">
                <textarea
                  value={prompt}
                  onChange={(event) => setPrompt(event.target.value)}
                  placeholder="Example: LinkedIn URL or 'Lorraine Hawes Amethyst CME' or 'UK facilities managers at retail chains'"
                  className="min-h-[130px] w-full resize-none rounded-2xl border border-black/20 bg-white px-4 py-3 text-sm shadow-inner outline-none transition focus:border-black focus:ring-2 focus:ring-black/20"
                />
                <div className="flex flex-wrap items-center gap-3">
                  <button
                    type="submit"
                    className="rounded-full bg-black px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-black/80 disabled:opacity-60"
                    disabled={isSearching}
                  >
                    {isSearching ? "Searching..." : "Run Lead Search"}
                  </button>
                  <span className="text-xs text-[var(--muted)]">
                    Returns top 20 LinkedIn matches and enriches scores.
                  </span>
                </div>
              </form>

              <div className="mt-6 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                {quickPrompts.map((item) => (
                  <button
                    key={item}
                    type="button"
                    onClick={() => {
                      setPrompt(item);
                      runSearch(item);
                    }}
                    className="rounded-2xl border border-black/20 bg-white px-4 py-2 text-xs font-semibold text-black transition hover:bg-black hover:text-white"
                  >
                    {item}
                  </button>
                ))}
              </div>

              {error && (
                <div className="mt-6 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
                  {error}
                </div>
              )}
              {debugData && (
                <details className="mt-6 rounded-2xl border border-black/15 bg-black/95 text-white" open>
                  <summary className="cursor-pointer px-4 py-3 text-sm font-semibold">
                    Matt&apos;s AI Trainer
                    <span className="ml-2 text-xs font-normal text-white/60">
                      Parsed hints, queries, ranking
                    </span>
                  </summary>
                  <div className="border-t border-white/10 px-4 py-3">
                    <div className="mb-3 grid gap-2 text-xs text-white/80 md:grid-cols-2">
                      <div className="rounded-xl border border-white/10 bg-black/60 px-3 py-2">
                        <p className="text-[10px] uppercase tracking-wide text-white/50">Chosen query</p>
                        <p className="mt-1 text-xs text-white">
                          {(debugData as any)?.chosenQuery ?? "—"}
                        </p>
                      </div>
                      <div className="rounded-xl border border-white/10 bg-black/60 px-3 py-2">
                        <p className="text-[10px] uppercase tracking-wide text-white/50">Chosen query score</p>
                        <p className="mt-1 text-xs text-white">
                          {(debugData as any)?.chosenQueryScore ?? "—"}
                        </p>
                      </div>
                      <div className="rounded-xl border border-white/10 bg-black/60 px-3 py-2">
                        <p className="text-[10px] uppercase tracking-wide text-white/50">Role hint</p>
                        <p className="mt-1 text-xs text-white">
                          {(debugData as any)?.parsed?.roleHint ?? "—"}
                        </p>
                      </div>
                      <div className="rounded-xl border border-white/10 bg-black/60 px-3 py-2">
                        <p className="text-[10px] uppercase tracking-wide text-white/50">Location hint</p>
                        <p className="mt-1 text-xs text-white">
                          {(debugData as any)?.parsed?.locationHint ?? "—"}
                        </p>
                      </div>
                      <div className="rounded-xl border border-white/10 bg-black/60 px-3 py-2">
                        <p className="text-[10px] uppercase tracking-wide text-white/50">Domain keywords</p>
                        <p className="mt-1 text-xs text-white">
                          {Array.isArray((debugData as any)?.parsed?.domainKeywords)
                            ? (debugData as any).parsed.domainKeywords.join(", ")
                            : "—"}
                        </p>
                      </div>
                      <div className="rounded-xl border border-white/10 bg-black/60 px-3 py-2">
                        <p className="text-[10px] uppercase tracking-wide text-white/50">UK focused</p>
                        <p className="mt-1 text-xs text-white">
                          {(debugData as any)?.parsed?.ukFocused ? "Yes" : "No"}
                        </p>
                      </div>
                    </div>
                    <pre className="max-h-80 overflow-auto whitespace-pre-wrap text-xs text-white/80">
                      {JSON.stringify(debugData, null, 2)}
                    </pre>
                  </div>
                </details>
              )}
            </div>

          </div>

          <aside className="flex h-full flex-col gap-6">
            <div className="flex-1 rounded-3xl border border-black/10 bg-white p-6">
              <div className="flex items-center justify-between">
                <h3 className="font-[var(--font-display)] text-xl font-semibold">
                  Recently saved leads
                </h3>
                <a
                  href="/leads"
                  className="text-xs font-semibold text-black underline-offset-4 hover:underline"
                >
                  All leads
                </a>
              </div>
              <p className="mt-1 text-sm text-[var(--muted)]">
                Your shortlist stays locally in this workspace.
              </p>
              <div className="mt-6 grid gap-3">
                {recentLeads.map((lead) => (
                  <div
                    key={lead.id}
                    className="rounded-2xl border border-black/10 bg-white p-4"
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div>
                        <p className="font-[var(--font-display)] font-semibold">
                          {lead.name || "Unknown lead"}
                        </p>
                        <p className="text-xs text-[var(--muted)]">
                          {(lead.roleOverride || lead.role) || "Role not listed"}{" "}
                          {lead.company ? `• ${lead.company}` : ""}
                        </p>
                      </div>
                      <div className="flex items-center gap-3">
                        <a
                          href={`/lead/${lead.id}`}
                          onClick={() =>
                            persistSearchState({ scrollY: window.scrollY })
                          }
                          className="text-xs font-semibold text-black underline-offset-4 hover:underline"
                        >
                          View
                        </a>
                        <button
                          onClick={() => removeLead(lead.id)}
                          className="text-xs font-semibold text-black/70 hover:text-black"
                        >
                          Remove
                        </button>
                      </div>
                    </div>
                    <div className="mt-3 flex items-center justify-between text-xs text-[var(--muted)]">
                      <span>Match {lead.relevanceScore}%</span>
                      <span>Email {lead.emailConfidence}%</span>
                    </div>
                  </div>
                ))}

                {!recentLeads.length && (
                  <div className="rounded-2xl border border-dashed border-black/20 px-4 py-6 text-center text-sm text-[var(--muted)]">
                    No leads saved yet.
                  </div>
                )}
              </div>
            </div>

            <div className="flex-1 rounded-3xl border border-black/10 bg-black p-6 text-white">
              <h3 className="font-[var(--font-display)] text-xl font-semibold">
                Search notes
              </h3>
              <p className="mt-2 text-sm text-white">
                Describe the type of person you want and we’ll find relevant profiles.
              </p>
              <ul className="mt-3 space-y-2 text-sm text-white">
                <li>
                  We prioritize LinkedIn profiles and confirm the role matches
                  the prompt.
                </li>
                <li>
                  Email confidence is estimated; verify emails on the profile page.
                </li>
                <li>
                  Save leads to keep them in your local shortlist.
                </li>
              </ul>
            </div>
          </aside>

          <div className="rounded-3xl border border-black/10 bg-white p-6 lg:col-span-2">
            <div className="flex items-center justify-between">
              <h3 className="font-[var(--font-display)] text-xl font-semibold">
                Latest matches
              </h3>
              <div className="flex items-center gap-3 text-xs text-[var(--muted)]">
                <button
                  type="button"
                  onClick={clearSearch}
                  className="rounded-full border border-black/20 px-3 py-1 text-xs font-semibold text-black transition hover:border-black hover:bg-black hover:text-white"
                >
                  Clear search
                </button>
                <span>
                  {activeResults.length} {activeTab === "jobs" ? "jobs" : "profiles"}
                </span>
                {activeResults.length > 0 && (
                  <span>
                    Page {currentPage} of {totalPages}
                  </span>
                )}
              </div>
            </div>
            {(debugData as any)?.jobIntent && (
              <div className="mt-4 flex flex-wrap gap-2 text-xs font-semibold">
                <button
                  type="button"
                  onClick={() => setActiveTab("people")}
                  className={`rounded-full border px-4 py-1.5 transition ${
                    activeTab === "people"
                      ? "border-black bg-black text-white"
                      : "border-black/20 text-black hover:border-black"
                  }`}
                >
                  People
                </button>
                <button
                  type="button"
                  onClick={() => setActiveTab("jobs")}
                  className={`rounded-full border px-4 py-1.5 transition ${
                    activeTab === "jobs"
                      ? "border-black bg-black text-white"
                      : "border-black/20 text-black hover:border-black"
                  }`}
                >
                  Jobs
                </button>
              </div>
            )}
            <div className="mt-6 grid gap-4">
              {activeTab === "people" &&
                pageResults.map((lead) => {
                const isSaved = savedLookup.has(
                  lead.linkedinUrl || lead.sourceUrl
                );
                return (
                  <article
                    key={`${lead.linkedinUrl}-${lead.name}`}
                    className="rounded-2xl border border-black/10 bg-white p-5 shadow-sm transition hover:shadow-md"
                  >
                    <div className="flex flex-wrap items-start justify-between gap-3">
                      <div>
                        <h4 className="font-[var(--font-display)] text-lg font-semibold">
                          {lead.name || "Unknown lead"}
                        </h4>
                        <p className="text-sm text-[var(--muted)]">
                          {lead.role || "Role not listed"}{" "}
                          {lead.company ? `• ${lead.company}` : ""}
                        </p>
                      </div>
                      <button
                        onClick={() => saveLead(lead)}
                        className="rounded-full border border-black/20 px-4 py-1.5 text-xs font-semibold text-black transition hover:border-black hover:bg-black hover:text-white disabled:opacity-50"
                        disabled={isSaved}
                      >
                        {isSaved ? "Saved" : "Save lead"}
                      </button>
                    </div>

                    <div className="mt-4 grid gap-3 md:grid-cols-2">
                      <div className="rounded-xl bg-black px-4 py-3 text-white">
                        <p className="text-xs uppercase tracking-wide text-white/70">
                          LinkedIn match
                        </p>
                        <p className="mt-1 text-2xl font-semibold text-white">
                          {lead.relevanceScore}%
                        </p>
                        <div
                          className={`mt-3 h-1 rounded-full ${scoreBar(
                            lead.relevanceScore
                          )}`}
                        />
                      </div>
                      <div
                        className={`rounded-xl border border-black/10 px-4 py-3 ${scoreTint(
                          lead.emailConfidence
                        )}`}
                      >
                        <p className="text-xs uppercase tracking-wide text-black/60">
                          Email confidence
                        </p>
                        <p className="mt-1 text-2xl font-semibold text-black">
                          {lead.emailConfidence}%
                        </p>
                        <div
                          className={`mt-3 h-1 rounded-full ${scoreBar(
                            lead.emailConfidence
                          )}`}
                        />
                      </div>
                    </div>

                    <p className="mt-4 text-sm text-[var(--muted)]">
                      {lead.snippet || "No summary available."}
                    </p>

                    <div className="mt-4 flex flex-wrap gap-3 text-xs">
                      {lead.linkedinUrl && (
                        <a
                          href={lead.linkedinUrl}
                          target="_blank"
                          rel="noreferrer"
                          className="rounded-full border border-black/20 px-3 py-1 text-black transition hover:border-black hover:bg-black hover:text-white"
                        >
                          View LinkedIn
                        </a>
                      )}
                      <button
                        onClick={() => openLeadProfile(lead)}
                        className="rounded-full border border-black/20 px-3 py-1 text-black transition hover:border-black hover:bg-black hover:text-white"
                      >
                        Open profile
                      </button>
                    </div>
                  </article>
                );
              })}

              {activeTab === "jobs" &&
                jobPageResults.map((lead) => (
                  <article
                    key={`${lead.sourceUrl}-${lead.name}`}
                    className="rounded-2xl border border-black/10 bg-white p-5 shadow-sm transition hover:shadow-md"
                  >
                    <div className="flex flex-wrap items-start justify-between gap-3">
                      <div>
                        <h4 className="font-[var(--font-display)] text-lg font-semibold">
                          {lead.titleText || lead.name || "Job posting"}
                        </h4>
                        <p className="text-sm text-[var(--muted)]">
                          {lead.company || "Company not listed"}
                        </p>
                      </div>
                      {lead.sourceUrl && (
                        <a
                          href={lead.sourceUrl}
                          target="_blank"
                          rel="noreferrer"
                          className="rounded-full border border-black/20 px-4 py-1.5 text-xs font-semibold text-black transition hover:border-black hover:bg-black hover:text-white"
                        >
                          View job
                        </a>
                      )}
                    </div>
                    {lead.metaText && (
                      <p className="mt-3 text-xs text-[var(--muted)]">
                        {lead.metaText}
                      </p>
                    )}
                    <p className="mt-3 text-sm text-[var(--muted)]">
                      {lead.snippetText || lead.snippet || "No summary available."}
                    </p>
                  </article>
                ))}

              {!activeResults.length && (
                <div className="rounded-2xl border border-dashed border-black/20 px-4 py-8 text-center text-sm text-[var(--muted)]">
                  Run a search to see profiles here.
                </div>
              )}
            </div>
            {activeResults.length > pageSize && (
              <div className="mt-6 flex flex-wrap items-center justify-between gap-3 text-sm">
                <span className="text-xs text-[var(--muted)]">
                  Showing {pageStart + 1}-{Math.min(pageStart + pageSize, activeResults.length)} of {activeResults.length}
                </span>
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
                    className="rounded-full border border-black/20 px-3 py-1 text-xs font-semibold text-black transition hover:border-black hover:bg-black hover:text-white disabled:opacity-50"
                    disabled={currentPage === 1}
                  >
                    Previous
                  </button>
                  <button
                    type="button"
                    onClick={() =>
                      setCurrentPage((page) =>
                        Math.min(totalPages, page + 1)
                      )
                    }
                    className="rounded-full border border-black/20 px-3 py-1 text-xs font-semibold text-black transition hover:border-black hover:bg-black hover:text-white disabled:opacity-50"
                    disabled={currentPage >= totalPages}
                  >
                    Next
                  </button>
                </div>
              </div>
            )}
          </div>
        </section>
      </main>
    </div>
  );
}