"use client"

import * as React from "react"
import { FolderKanban, Plus, ExternalLink, Pencil, Trash2 } 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 { CustomerProjectRecord, CustomerProjectStatus } from "@/api/rtk/customer-projects-api"

const PROJECT_STATUS_LABELS: Record<CustomerProjectStatus, string> = {
    PLANNING: "Planning",
    ACTIVE: "Active",
    ON_HOLD: "On hold",
    COMPLETED: "Completed",
    CANCELLED: "Cancelled",
}

export interface CustomerProjectsListProps {
    projects: CustomerProjectRecord[]
    isLoading: boolean
    canManage: boolean
    onNew: () => void
    onEdit: (p: CustomerProjectRecord) => void
    onDelete: (p: CustomerProjectRecord) => void
    fmtDate: (d: string | Date | null | undefined) => string
    fmtCurrency: (v: string | number | null | undefined) => string
}

export function CustomerProjectsList({
    projects,
    isLoading,
    canManage,
    onNew,
    onEdit,
    onDelete,
    fmtDate,
    fmtCurrency,
}: CustomerProjectsListProps) {
    if (isLoading && projects.length === 0) {
        return (
            <Loading
                layout="section"
                message="Loading projects…"
                spinnerClassName="text-[#6C63FF]"
            />
        )
    }

    if (projects.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">
                    <FolderKanban className="w-8 h-8 text-gray-400" />
                </div>
                <h4 className="text-gray-900 font-black mb-1 font-['Lexend']">
                    No projects yet
                </h4>
                <p className="text-[13px] text-gray-500 max-w-[340px] font-medium font-['Lexend_Deca'] leading-relaxed">
                    Create projects to track delivery work for this customer.
                    You can link an optional lead and assign an owner.
                </p>
                {canManage && (
                    <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        className="mt-6 gap-2 rounded-xl border-accent/20 text-accent hover:bg-accent/5 font-bold"
                        onClick={onNew}
                    >
                        <Plus size={14} /> Add first project
                    </Button>
                )}
            </div>
        )
    }

    return (
        <div className="space-y-4">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
                <SectionHeading
                    icon={<FolderKanban size={14} />}
                    className="mb-0 flex-1"
                >
                    Customer projects
                </SectionHeading>
                {canManage && (
                    <Button
                        type="button"
                        size="ctaCompact"
                        className="gap-2 rounded-xl bg-accent hover:opacity-90 shrink-0 font-bold shadow-premium"
                        onClick={onNew}
                    >
                        <Plus size={14} /> New project
                    </Button>
                )}
            </div>

            <ul className="flex flex-col gap-3">
                {projects.map((p) => (
                    <li
                        key={p.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-accent/20 hover:shadow-md sm:flex-row sm:items-start sm:justify-between"
                    >
                        <div className="min-w-0 space-y-2">
                            <p className="text-[16px] font-black text-gray-900 font-['Lexend'] tracking-tight">
                                {p.name}
                            </p>
                            {p.description ? (
                                <p className="text-[13px] text-gray-600 line-clamp-2 whitespace-pre-wrap leading-relaxed font-medium">
                                    {p.description}
                                </p>
                            ) : null}
                            
                            <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="w-1.5 h-1.5 rounded-full bg-accent/40" />
                                    <span className="font-bold text-gray-800 uppercase tracking-wider text-[10px]">
                                        {PROJECT_STATUS_LABELS[p.status]}
                                    </span>
                                </div>
                                
                                {p.budgetValue != null && p.budgetValue !== "" && (
                                    <div className="flex items-center gap-1.5">
                                        <span className="text-gray-300">·</span>
                                        <span className="font-semibold text-gray-700">
                                            {fmtCurrency(p.budgetValue)}
                                        </span>
                                    </div>
                                )}
                                
                                {(p.startDate || p.endDate) && (
                                    <div className="flex items-center gap-1.5">
                                        <span className="text-gray-300">·</span>
                                        <span className="font-medium text-gray-600">
                                            {fmtDate(p.startDate)} – {fmtDate(p.endDate)}
                                        </span>
                                    </div>
                                )}
                            </div>

                            <div className="flex flex-wrap gap-4 mt-2">
                                {p.owner?.name && (
                                    <div className="flex items-center gap-2">
                                        <div className="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center text-[10px] font-bold text-gray-500 uppercase">
                                            {p.owner.name.charAt(0)}
                                        </div>
                                        <span className="text-[11px] text-gray-500 font-medium">{p.owner.name}</span>
                                    </div>
                                )}
                                {p.linkedLead && (
                                    <div className="flex items-center gap-2">
                                        <div className="w-5 h-5 rounded-full bg-accent/5 flex items-center justify-center text-accent">
                                            <ExternalLink size={10} />
                                        </div>
                                        <span className="text-[11px] text-gray-500 font-medium truncate max-w-[150px]">
                                            {p.linkedLead.customerName ||
                                                p.linkedLead.email ||
                                                p.linkedLead.leadId ||
                                                p.linkedLead.id.slice(0, 8) + "…"}
                                        </span>
                                    </div>
                                )}
                            </div>
                        </div>

                        <div className="flex shrink-0 flex-wrap gap-2 pt-2 sm:pt-0">
                            {p.leadId && (
                                <Button
                                    variant="outline"
                                    size="sm"
                                    className="h-8 gap-1.5 rounded-lg border-gray-200 bg-white hover:bg-accent/5 hover:text-accent hover:border-accent/20 transition-all shadow-none font-bold"
                                    asChild
                                >
                                    <Link href={`/leads/${p.leadId}`}>
                                        <ExternalLink size={14} />
                                        Open
                                    </Link>
                                </Button>
                            )}
                            {canManage && (
                                <>
                                    <Button
                                        type="button"
                                        variant="outline"
                                        size="sm"
                                        className="h-8 gap-1.5 rounded-lg border-gray-200 bg-white hover:bg-accent/5 hover:text-accent hover:border-accent/20 transition-all shadow-none font-bold"
                                        onClick={() => onEdit(p)}
                                    >
                                        <Pencil size={14} />
                                        Edit
                                    </Button>
                                    <Button
                                        type="button"
                                        variant="outline"
                                        size="sm"
                                        className="h-8 gap-1.5 rounded-lg border-gray-200 bg-white hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition-all shadow-none font-bold"
                                        onClick={() => onDelete(p)}
                                    >
                                        <Trash2 size={14} />
                                        Delete
                                    </Button>
                                </>
                            )}
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    )
}