"use client"

import { Company, CompanySize } from "./types"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { formatTeamLabelForUi } from "@/lib/deal-display"
import { Eye, ArrowUpDown, Trash2, Globe } from "lucide-react"

interface CompanyListViewProps {
    companies: Company[]
    onOpen: (company: Company) => void
    onDelete: (id: number) => void
    sortCol: string
    sortDir: 1 | -1
    onSort: (col: string) => void
}

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"

export function CompanyListView({ companies, onOpen, onDelete, sortCol, sortDir, onSort }: CompanyListViewProps) {
    const stageColors: Record<string, string> = {
        'Prospecting': '#6C63FF',
        'Qualified': '#8B83FF',
        'Proposal Sent': '#F59E0B',
        'Negotiation': '#FF8C42',
        'Closed Won': '#22C55E'
    }

    const sizeBadges: Record<CompanySize, string> = {
        'Enterprise': 'bg-[#EEF2FF] text-[#6C63FF]',
        'SME': 'bg-[#FEF3C7] text-[#D97706]',
        'Startup': 'bg-bg text-gray-700'
    }

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

    return (
        <div className="overflow-auto scrollbar-themed">
            <Table>
                <TableHeader>
                    <TableRow className="bg-bg/50 border-b-2 border-border select-none hover:bg-transparent cursor-default">
                        <TableHead className="cursor-pointer hover:bg-bg transition-colors" onClick={() => onSort('name')}>
                            <div className="flex items-center gap-1.5 transition-colors group">
                                Company <ArrowUpDown size={10} className="shrink-0 opacity-40 group-hover:text-accent" />
                            </div>
                        </TableHead>
                        <TableHead>Industry</TableHead>
                        <TableHead className="cursor-pointer hover:bg-bg transition-colors" onClick={() => onSort('size')}>
                            <div className="flex items-center gap-1.5 transition-colors group">
                                Size <ArrowUpDown size={10} className="shrink-0 opacity-40 group-hover:text-accent" />
                            </div>
                        </TableHead>
                        <TableHead>City</TableHead>
                        <TableHead>Team</TableHead>
                        <TableHead>Stage</TableHead>
                        <TableHead className="cursor-pointer hover:bg-bg transition-colors" onClick={() => onSort('totalVal')}>
                            <div className="flex items-center gap-1.5 transition-colors group">
                                Total Value <ArrowUpDown size={10} className="shrink-0 opacity-40 group-hover:text-accent" />
                            </div>
                        </TableHead>
                        <TableHead>Assigned Rep</TableHead>
                        <TableHead className="w-[80px]"></TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody className="font-['Lexend']">
                    {companies.map((company) => (
                        <TableRow
                            key={company.id}
                            onClick={() => onOpen(company)}
                        >
                            <TableCell>
                                <div className="flex items-center gap-3">
                                    <div
                                        className="size-8 rounded-lg flex items-center justify-center text-[11px] font-extrabold text-white shrink-0 font-['Lexend_Deca'] shadow-sm"
                                        style={{ backgroundColor: company.color }}
                                    >
                                        {company.initials}
                                    </div>
                                    <div className="flex flex-col gap-0.5 max-w-[150px]">
                                        <span className="text-[13px] font-bold text-text truncate leading-tight">{company.name}</span>
                                        <span className="text-[11px] text-gray-700 truncate">{company.website}</span>
                                    </div>
                                </div>
                            </TableCell>
                            <TableCell className="text-[12px] text-gray-700 font-medium">{company.industry}</TableCell>
                            <TableCell>
                                <span className={cn("text-[10px] font-bold px-2.5 py-0.5 rounded-full", sizeBadges[company.size])}>
                                    {company.size}
                                </span>
                            </TableCell>
                            <TableCell className="text-[12px] text-gray-700">{company.city}</TableCell>
                            <TableCell>
                                <div
                                    className="w-1.5 h-6 rounded-full"
                                    style={{ backgroundColor: teamColors[company.team] }}
                                    title={`Team ${formatTeamLabelForUi(company.team)}`}
                                />
                            </TableCell>
                            <TableCell>
                                <span
                                    className="text-[10px] font-bold px-2.5 py-0.5 rounded-full"
                                    style={{ backgroundColor: `${stageColors[company.stage]}15`, color: stageColors[company.stage] }}
                                >
                                    {company.stage}
                                </span>
                            </TableCell>
                            <TableCell className="text-[13px] font-extrabold text-accent font-['Lexend_Deca']">
                                ${company.totalVal >= 1000 ? `${(company.totalVal / 1000).toFixed(1)}M` : `${company.totalVal}K`}
                            </TableCell>
                            <TableCell>
                                <div className="flex items-center gap-2">
                                    <div className="size-[22px] rounded-full bg-accent/15 text-accent text-[9px] font-extrabold flex items-center justify-center shrink-0">
                                        {company.repAv}
                                    </div>
                                    <span className="text-[12px] font-semibold">{company.rep.split(' ')[0]}</span>
                                </div>
                            </TableCell>
                            <TableCell className="text-right">
                                <div className="flex items-center justify-end gap-1 opacity-100">
                                    <Button
                                        variant="ghost"
                                        size="icon-xs"
                                        onClick={(e) => { e.stopPropagation(); onOpen(company); }}
                                    >
                                        <Eye size={13} />
                                    </Button>
                                    <Button
                                        variant="ghostIconDeleteSoft"
                                        onClick={(e) => { e.stopPropagation(); onDelete(company.id); }}
                                    >
                                        <Trash2 size={13} />
                                    </Button>
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    )
}