"use client"

import * as React from "react"
import { Briefcase, ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Loading } from "@/components/ui/loading"
import { SectionHeading } from "./customer-details-shared"
import type { BusinessDealRecord } from "@/api/rtk/business-deals-api"

export interface CustomerBusinessDealsListProps {
    deals: BusinessDealRecord[]
    isLoading: boolean
    totalValue: number | string | null | undefined
    dealTitle: (b: BusinessDealRecord) => string
    stageLabel: (b: BusinessDealRecord) => string
    fmtCurrency: (v: string | number | null | undefined) => string
    onOpenDeal: (id: string) => void
}

export function CustomerBusinessDealsList({
    deals,
    isLoading,
    totalValue,
    dealTitle,
    stageLabel,
    fmtCurrency,
    onOpenDeal,
}: CustomerBusinessDealsListProps) {
    if (isLoading && deals.length === 0) {
        return (
            <Loading
                layout="section"
                message="Loading deals…"
                spinnerClassName="text-[#6C63FF]"
            />
        )
    }

    if (deals.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">
                    <Briefcase className="w-8 h-8 text-gray-400" />
                </div>
                <h4 className="text-gray-900 font-black mb-1 font-['Lexend']">
                    No sales yet
                </h4>
                <p className="text-[13px] text-gray-500 max-w-[340px] font-medium font-['Lexend_Deca'] leading-relaxed">
                    Pipeline deals linked to this customer appear here. Create
                    or link a deal from the sales board.
                </p>
            </div>
        )
    }

    return (
        <div className="flex flex-col gap-3">
            <div className="flex items-center justify-between mb-2">
                <SectionHeading icon={<Briefcase size={14} />} className="mb-0">
                    Sales pipeline deals
                </SectionHeading>
                <div className="flex items-center gap-3 px-4 py-2 rounded-2xl bg-white border border-gray-100 shadow-premium">
                    <span className="text-[10px] font-black text-gray-400 uppercase tracking-widest font-['Lexend_Deca']">
                        Total Pipeline
                    </span>
                    <span className="text-[15px] font-black text-[#6C63FF] tabular-nums font-['Lexend']">
                        {fmtCurrency(totalValue)}
                    </span>
                </div>
            </div>
            
            <ul className="flex flex-col gap-3 mt-2">
                {deals.map((b) => (
                    <li
                        key={b.id}
                        className="group flex flex-col gap-4 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">
                                {dealTitle(b)}
                            </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(b)}
                                    </span>
                                </div>
                                {b.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">{b.brand}</span>
                                    </div>
                                )}
                                {b.dealValue != null && b.dealValue !== "" && (
                                    <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]">Value:</span>
                                        <span className="font-bold text-[#6C63FF]">{fmtCurrency(b.dealValue)}</span>
                                    </div>
                                )}
                            </div>
                        </div>
                        <div className="flex shrink-0">
                            <Button
                                type="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"
                                onClick={() => onOpenDeal(b.id)}
                            >
                                <ExternalLink size={14} />
                                Open Deal
                            </Button>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    )
}