"use client"

import * as React from "react"
import { Contact, ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Loading } from "@/components/ui/loading"
import Link from "next/link"
import { SectionHeading } from "./customer-details-shared"
import type { Deal } from "@/api/rtk/deals-api"

export interface CustomerLinkedLeadsListProps {
    leads: Deal[]
    isLoading: boolean
    leadTitle: (d: Deal) => string
    stageLabel: (d: Deal) => string
    fmtCurrency: (v: string | number | null | undefined) => string
}

export function CustomerLinkedLeadsList({
    leads,
    isLoading,
    leadTitle,
    stageLabel,
    fmtCurrency,
}: CustomerLinkedLeadsListProps) {
    if (isLoading && leads.length === 0) {
        return (
            <Loading
                layout="section"
                message="Loading linked leads…"
                spinnerClassName="text-[#6C63FF]"
            />
        )
    }

    if (leads.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center py-24 text-center bg-gray-50/50 border border-dashed border-gray-200 rounded-3xl">
                <div className="p-4 rounded-full bg-gray-100 mb-4 shadow-sm">
                    <Contact className="w-8 h-8 text-gray-400" />
                </div>
                <h4 className="text-gray-900 font-black mb-1 font-['Lexend']">
                    No linked leads
                </h4>
                <p className="text-[13px] text-gray-500 max-w-[340px] font-medium font-['Lexend_Deca'] leading-relaxed">
                    No lead records reference this customer yet. Converting a
                    lead to a customer creates that link automatically.
                </p>
            </div>
        )
    }

    return (
        <div className="flex flex-col gap-3">
            <SectionHeading icon={<Contact size={14} />}>
                Leads tied to this customer
            </SectionHeading>
            <ul className="flex flex-col gap-3 mt-2">
                {leads.map((d) => (
                    <li
                        key={d.id}
                        className="group flex flex-col gap-3 rounded-2xl border border-gray-100 bg-white/60 p-5 shadow-sm transition-all hover:bg-white hover:border-[#6C63FF]/20 hover:shadow-md sm:flex-row sm:items-center sm:justify-between"
                    >
                        <div className="min-w-0 space-y-2">
                            <p className="text-[16px] font-black text-gray-900 font-['Lexend'] truncate tracking-tight">
                                {leadTitle(d)}
                            </p>
                            <div className="flex flex-wrap items-center gap-y-1.5 gap-x-3 text-[12px] text-gray-500 font-['Lexend_Deca']">
                                <div className="flex items-center gap-1.5">
                                    <span className="font-bold text-gray-700 uppercase tracking-wider text-[10px]">Stage:</span>
                                    <span className="px-2 py-0.5 rounded-full bg-[#6C63FF]/5 text-[#6C63FF] font-bold">
                                        {stageLabel(d)}
                                    </span>
                                </div>
                                {d.brand && (
                                    <div className="flex items-center gap-1.5">
                                        <span className="text-gray-300">·</span>
                                        <span className="font-bold text-gray-700 uppercase tracking-wider text-[10px]">Brand:</span>
                                        <span className="font-semibold text-gray-600">{d.brand}</span>
                                    </div>
                                )}
                                {d.budget != null && (
                                    <div className="flex items-center gap-1.5">
                                        <span className="text-gray-300">·</span>
                                        <span className="font-bold text-gray-700 uppercase tracking-wider text-[10px]">Budget:</span>
                                        <span className="font-bold text-[#6C63FF]">{fmtCurrency(d.budget)}</span>
                                    </div>
                                )}
                            </div>
                            {d.leadId && (
                                <p className="text-[10px] text-gray-400 font-mono tracking-tighter opacity-60">
                                    REF: {d.leadId}
                                </p>
                            )}
                        </div>
                        <div className="flex shrink-0">
                            <Button
                                variant="outline"
                                size="sm"
                                className="h-9 gap-2 rounded-xl border-gray-200 bg-white hover:bg-[#6C63FF]/5 hover:text-[#6C63FF] hover:border-[#6C63FF]/20 transition-all font-bold shadow-sm"
                                asChild
                            >
                                <Link href={`/leads/${d.id}`}>
                                    <ExternalLink size={14} />
                                    Open Lead
                                </Link>
                            </Button>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    )
}