"use client"

import * as React from "react"
import { Contact, ContactStatus } from "./types"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { cn } from "@/lib/utils"
import { formatTeamLabelForUi } from "@/lib/deal-display"
import { Eye, ArrowUpDown, Trash2, Pencil } from "lucide-react"
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"

interface ContactListViewProps {
    contacts: Contact[]
    onOpen: (contact: Contact) => void
    onEdit: (contact: Contact) => void
    onDelete: (id: string | number) => void
    sortCol: string
    sortDir: 1 | -1
    onSort: (col: string) => void
    selectedIds: Set<string>
    onSelectId: (id: string, checked: boolean) => void
    onSelectAll: (checked: boolean) => void
    canUpdate?: boolean
    canDelete?: boolean
}

const stageColors: Record<string, string> = {
    'Prospecting': '#6C63FF',
    'Qualified': '#8B83FF',
    'Proposal Sent': '#F59E0B',
    'Negotiation': '#FF8C42',
    'Closed Won': '#22C55E',
    'Closed Lost': '#FF6B6B',
}

const statusBadges: Record<ContactStatus, string> = {
    'Active': 'bg-[#EEF2FF] text-[#6C63FF]',
    'Nurturing': 'bg-bg text-gray-700 font-bold',
    'Hot': 'bg-[#ECFDF5] text-[#22C55E] font-extrabold',
    'Cold': 'bg-bg text-gray-700',
    'Won': 'bg-[#ECFDF5] text-[#22C55E] font-extrabold',
    'Lost': 'bg-[#FEF2F2] text-[#FF6B6B]',
}

const teamColors: Record<string, string> = {
    alpha: '#6C63FF',
    beta: '#22C55E',
    gamma: '#F59E0B',
}

export function ContactListView({
    contacts,
    onOpen,
    onEdit,
    onDelete,
    sortCol,
    sortDir,
    onSort,
    selectedIds,
    onSelectId,
    onSelectAll,
    canUpdate = true,
    canDelete = true,
}: ContactListViewProps) {
    const allSelected = contacts.length > 0 && contacts.every(c => selectedIds.has(c.id))
    const someSelected = contacts.some(c => selectedIds.has(c.id)) && !allSelected

    const SortHead = ({ col, label, className }: { col: string; label: string; className?: string }) => (
        <TableHead
            className={cn("cursor-pointer hover:bg-bg transition-colors", className)}
            onClick={() => onSort(col)}
        >
            <div className="flex items-center gap-1.5 group">
                {label}
                <ArrowUpDown size={10} className={cn("shrink-0 opacity-40 group-hover:text-accent", sortCol === col && "opacity-100 text-accent")} />
            </div>
        </TableHead>
    )

    return (
        <div className="bg-white rounded-2xl border border-border shadow-sm overflow-auto scrollbar-themed">
            <Table>
                <TableHeader>
                    <TableRow className="bg-bg/50 border-b-2 border-border select-none hover:bg-transparent cursor-default">
                        {/* Select-all checkbox */}
                        <TableHead className="w-10 pl-4">
                            <Checkbox
                                checked={allSelected ? true : someSelected ? "indeterminate" : false}
                                onCheckedChange={(v) => onSelectAll(!!v)}
                                aria-label="Select all contacts"
                            />
                        </TableHead>
                        <SortHead col="name" label="Contact" />
                        <SortHead col="company" label="Company" className="hidden sm:table-cell" />
                        <TableHead className="hidden lg:table-cell">Title</TableHead>
                        <SortHead col="stage" label="Stage" />
                        <SortHead col="dealValue" label="Value" />
                        <TableHead className="hidden md:table-cell">Assigned Rep</TableHead>
                        <TableHead className="hidden xl:table-cell">Status</TableHead>
                        <TableHead className="hidden lg:table-cell">TEAM</TableHead>
                        <TableHead className="w-20" />
                    </TableRow>
                </TableHeader>
                <TableBody className="font-['Lexend'] divide-y divide-border/50">
                    {contacts.map((c) => {
                        const isSelected = selectedIds.has(c.id)
                        return (
                            <TableRow
                                key={c.id}
                                onClick={() => onOpen(c)}
                                className={cn(isSelected && "bg-accent/5")}
                            >
                                {/* Row checkbox */}
                                <TableCell className="w-10 pl-4" onClick={(e) => e.stopPropagation()}>
                                    <Checkbox
                                        checked={isSelected}
                                        onCheckedChange={(v) => onSelectId(c.id, !!v)}
                                        aria-label={`Select ${c.name}`}
                                    />
                                </TableCell>

                                <TableCell>
                                    <div className="flex items-center gap-3">
                                        <div
                                            className="size-8 rounded-full flex items-center justify-center text-[11px] font-extrabold text-white shrink-0 font-['Lexend_Deca'] shadow-sm"
                                            style={{ backgroundColor: c.color || '#666' }}
                                        >
                                            {c.initials}
                                        </div>
                                        <div className="flex flex-col gap-0.5 max-w-[150px]">
                                            <span className="text-[13px] font-bold text-text truncate font-['Lexend']">{c.name}</span>
                                            <span className="text-[11px] text-gray-700 truncate">{c.email}</span>
                                        </div>
                                    </div>
                                </TableCell>

                                <TableCell className="hidden sm:table-cell text-[13px] font-bold text-text font-['Lexend']">{c.company}</TableCell>
                                <TableCell className="hidden lg:table-cell text-[12px] text-gray-700 font-medium">{c.title}</TableCell>

                                <TableCell>
                                    <span
                                        className="text-[10px] font-bold px-2.5 py-0.5 rounded-full"
                                        style={{
                                            backgroundColor: `${stageColors[c.stage] || '#666'}22`,
                                            color: stageColors[c.stage] || '#666',
                                        }}
                                    >
                                        {c.stage}
                                    </span>
                                </TableCell>

                                <TableCell className="text-[13px] font-extrabold text-accent font-['Lexend_Deca']">
                                    ${c.dealValue >= 1000 ? `${(c.dealValue / 1000).toFixed(1)}M` : `${c.dealValue}K`}
                                </TableCell>

                                <TableCell className="hidden md:table-cell">
                                    <div className="flex items-center gap-2">
                                        <div className="size-5.5 rounded-full bg-accent/15 text-accent text-[9px] font-extrabold flex items-center justify-center shrink-0">
                                            {c.repAv}
                                        </div>
                                        <span className="text-[12px] font-semibold">{c.rep.split(' ')[0]}</span>
                                    </div>
                                </TableCell>

                                <TableCell className="hidden xl:table-cell">
                                    <span className={cn("text-[10px] font-bold px-2.5 py-0.5 rounded-full", statusBadges[c.status])}>
                                        {c.status}
                                    </span>
                                </TableCell>

                                <TableCell className="hidden lg:table-cell">
                                    <div className="flex items-center gap-2">
                                        <div
                                            className="w-1.5 h-6 rounded-full shrink-0"
                                            style={{ backgroundColor: teamColors[c.team] || '#606BCB' }}
                                            title={`Team ${c.team ? formatTeamLabelForUi(c.team.replace(/^team-/, "")) : ""}`}
                                        />
                                        <span className="text-[12px] font-bold text-gray-700">
                                            {c.team
                                                ? formatTeamLabelForUi(c.team.replace(/^team-/, ""))
                                                : "Unknown"}
                                        </span>
                                    </div>
                                </TableCell>

                                <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
                                    <div className="flex items-center justify-end gap-1">
                                        <Button variant="ghost" size="icon-xs" onClick={() => onOpen(c)}>
                                            <Eye size={13} />
                                        </Button>
                                        {canUpdate && (
                                            <Button variant="ghost" size="icon-xs" onClick={() => onEdit(c)}>
                                                <Pencil size={13} />
                                            </Button>
                                        )}
                                        {canDelete && (
                                            <Button
                                                variant="ghost"
                                                size="icon-xs"
                                                className="hover:bg-red-50 hover:text-red-600"
                                                onClick={() => onDelete(c.id)}
                                            >
                                                <Trash2 size={13} />
                                            </Button>
                                        )}
                                    </div>
                                </TableCell>
                            </TableRow>
                        )
                    })}
                </TableBody>
            </Table>
        </div>
    )
}