"use client";

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

type Lead = {
  id: string;
  name: string;
  role: string;
  roleOverride?: string;
  company: string;
  companyFromPrompt?: boolean;
  sourceTitle?: string;
  titleText?: string;
  metaText?: string;
  snippetText?: string;
  displayedLink?: string;
  linkedinUrl: string;
  snippet: string;
  relevanceScore: number;
  emailConfidence: number;
  emailGuess?: string;
  emailOverride?: string;
  createdAt?: string;
};

export default function LeadsPage() {
  const [leads, setLeads] = useState<Lead[]>([]);
  const [isDeleting, setIsDeleting] = useState<string | null>(null);

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

  const deleteLead = async (id: string) => {
    setIsDeleting(id);
    const res = await fetch(`/api/leads?id=${encodeURIComponent(id)}`, {
      method: "DELETE",
    });
    if (res.ok) {
      const data = await res.json();
      setLeads(Array.isArray(data.leads) ? data.leads : []);
    }
    setIsDeleting(null);
  };

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

  return (
    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
      <header className="border-b-4 border-black bg-black px-6 py-4 md:px-12 lg:px-16">
        <div className="flex items-center 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 tracking-tight text-white md:text-3xl">
              All leads
            </h1>
          </div>
          <nav className="flex items-center gap-3 text-xs font-semibold uppercase tracking-wide text-white/70">
            <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>
            <span className="text-white/40">|</span>
            <a
              href="/api/leads/export"
              className="text-white hover:text-white/80"
            >
              Export CSV
            </a>
          </nav>
        </div>
      </header>

      <main className="px-6 py-10 md:px-12 lg:px-16">
        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-[0_20px_60px_rgba(0,0,0,0.08)]">
          <div className="flex items-center justify-between">
            <h2 className="font-[var(--font-display)] text-xl font-semibold">
              {sortedLeads.length} saved leads
            </h2>
            <p className="text-xs text-[var(--muted)]">
              Export opens in Excel as CSV.
            </p>
          </div>
          <div className="mt-6 overflow-x-auto">
            <table className="w-full min-w-[900px] text-left text-sm">
              <thead>
                <tr className="border-b border-black/10 text-xs uppercase tracking-wide text-black/60">
                  <th className="py-3 pr-4">Name</th>
                  <th className="py-3 pr-4">Role</th>
                  <th className="py-3 pr-4">Company</th>
                  <th className="py-3 pr-4">LinkedIn</th>
                  <th className="py-3 pr-4">Match</th>
                  <th className="py-3 pr-4">Email %</th>
                  <th className="py-3 pr-4">Email Guess</th>
                  <th className="py-3 pr-4">Added</th>
                  <th className="py-3 pr-4">Actions</th>
                </tr>
              </thead>
              <tbody>
                {sortedLeads.map((lead) => (
                  <tr key={lead.id} className="border-b border-black/5">
                    <td className="py-3 pr-4 font-semibold">
                      <div className="flex flex-col">
                        <span>{lead.name || "Unknown"}</span>
                        <a
                          href={`/lead/${lead.id}`}
                          className="text-xs text-black underline-offset-4 hover:underline"
                        >
                          Open profile
                        </a>
                      </div>
                    </td>
                    <td className="py-3 pr-4 text-[var(--muted)]">
                      {lead.roleOverride || lead.role || "-"}
                    </td>
                    <td className="py-3 pr-4 text-[var(--muted)]">
                      {lead.company || "-"}
                    </td>
                    <td className="py-3 pr-4">
                      {lead.linkedinUrl ? (
                        <a
                          href={lead.linkedinUrl}
                          target="_blank"
                          rel="noreferrer"
                          className="text-black underline-offset-4 hover:underline"
                        >
                          View
                        </a>
                      ) : (
                        "-"
                      )}
                    </td>
                    <td className="py-3 pr-4">{lead.relevanceScore}%</td>
                    <td className="py-3 pr-4">{lead.emailConfidence}%</td>
                    <td className="py-3 pr-4 text-[var(--muted)]">
                      {lead.emailOverride ?? lead.emailGuess ?? "-"}
                    </td>
                    <td className="py-3 pr-4 text-[var(--muted)]">
                      {lead.createdAt
                        ? new Date(lead.createdAt).toLocaleString()
                        : "-"}
                    </td>
                    <td className="py-3 pr-4">
                      <button
                        onClick={() => deleteLead(lead.id)}
                        className="text-xs font-semibold text-black/70 hover:text-black"
                        disabled={isDeleting === lead.id}
                      >
                        {isDeleting === lead.id ? "Deleting..." : "Delete"}
                      </button>
                    </td>
                  </tr>
                ))}
                {!sortedLeads.length && (
                  <tr>
                    <td
                      colSpan={9}
                      className="py-8 text-center text-sm text-[var(--muted)]"
                    >
                      No leads saved yet.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </main>
    </div>
  );
}