import Link from "next/link";
import { requireUser } from "@/lib/auth/session";
import { createClient } from "@/lib/supabase/server";
import { LEAD_STATUS_STYLES } from "@/lib/leads/constants";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { Lead } from "@/lib/types";

export default async function PartnerLeadsPage() {
  const user = await requireUser();
  const supabase = await createClient();

  // RLS scopes to the partner's own leads; explicit filter for clarity.
  const { data } = await supabase
    .from("leads")
    .select("*")
    .eq("created_by", user.id)
    .order("created_at", { ascending: false });

  const leads = (data as Lead[]) ?? [];

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="font-heading text-2xl font-bold text-brand-navy">My Leads</h1>
        <Button asChild className="bg-brand-orange hover:bg-brand-orange/90">
          <Link href="/partner/leads/new">Submit New Lead</Link>
        </Button>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">
            {leads.length} {leads.length === 1 ? "lead" : "leads"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          {leads.length === 0 ? (
            <p className="py-8 text-center text-sm text-muted-foreground">
              You haven&apos;t submitted any leads yet.
            </p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-12">No</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Phone</TableHead>
                  <TableHead>Country</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Created</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {leads.map((lead, i) => (
                  <TableRow key={lead.id}>
                    <TableCell className="text-muted-foreground">{i + 1}</TableCell>
                    <TableCell className="font-medium">{lead.full_name}</TableCell>
                    <TableCell>{lead.phone ?? "—"}</TableCell>
                    <TableCell>{lead.country ?? "—"}</TableCell>
                    <TableCell>
                      <span
                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                          LEAD_STATUS_STYLES[lead.lead_status] ??
                          "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {lead.lead_status}
                      </span>
                    </TableCell>
                    <TableCell className="text-muted-foreground">
                      {new Date(lead.created_at).toLocaleDateString()}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  );
}