"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 { X, Globe, Calendar, Users2, DollarSign, Target, User2, MessageSquare, Plus } from "lucide-react"

interface CompanyDetailModalProps {
    company: Company | null
    isOpen: boolean
    onClose: () => void
}

export function CompanyDetailModal({ company, isOpen, onClose }: CompanyDetailModalProps) {
    if (!isOpen || !company) return null

    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="fixed inset-0 z-100 flex items-center justify-center bg-zinc-950/50 backdrop-blur-sm animate-in fade-in duration-200" onClick={onClose}>
            <div
                className="relative rounded-[14px] border border-white bg-white/60 backdrop-blur-[15px] shadow-[0px_2px_15px_0px_rgba(0,0,0,0.1)] w-[600px] max-w-[95vw] max-h-[92vh] overflow-y-auto scrollbar-themed animate-in zoom-in-95 slide-in-from-bottom-4 duration-300"
                onClick={(e) => e.stopPropagation()}
            >
                {/* Hero Section */}
                <div className="relative px-8 pt-10 pb-6 bg-linear-to-br from-accent/10 to-transparent border-b border-border flex items-center gap-5">
                    <div
                        className="size-14 rounded-xl flex items-center justify-center text-xl font-extrabold text-white shadow-md font-['Lexend_Deca']"
                        style={{ backgroundColor: company.color }}
                    >
                        {company.initials}
                    </div>
                    <div className="flex flex-col">
                        <h2 className="text-[20px] font-extrabold text-text font-['Lexend'] leading-tight">{company.name}</h2>
                        <p className="text-[14px] text-gray-700 font-medium mt-0.5">{company.industry} · {company.size} · {company.city}</p>
                    </div>
                    <Button
                        variant="ghost"
                        size="icon-sm"
                        className="absolute top-4 right-4 bg-white/50 hover:bg-white shadow-sm"
                        onClick={onClose}
                    >
                        <X size={18} />
                    </Button>
                </div>

                <div className="p-8">
                    {/* Core Grid */}
                    <div className="grid grid-cols-2 gap-x-8 gap-y-6 mb-8">
                        <DetailItem label="Website" value={company.website} isAccent />
                        <DetailItem label="Founded" value={company.founded.toString()} />
                        <DetailItem label="Employees" value={company.employees.toLocaleString()} />
                        <DetailItem label="Annual Revenue" value={company.revenue} />
                        <div className="flex flex-col gap-1.5">
                            <label className="text-[10px] font-bold text-gray-700 uppercase tracking-[0.07em] font-['Lexend_Deca']">Pipeline Value</label>
                            <div className="text-[18px] font-extrabold text-accent font-['Lexend_Deca'] tracking-tight">
                                ${company.totalVal >= 1000 ? `${(company.totalVal / 1000).toFixed(1)}M` : `${company.totalVal}K`}
                            </div>
                        </div>
                        <DetailItem label="Active Deals" value={company.deals.toString()} />
                        <div className="flex flex-col gap-1.5">
                            <label className="text-[10px] font-bold text-gray-700 uppercase tracking-[0.07em] font-['Lexend_Deca']">Current Stage</label>
                            <span
                                className="w-fit text-[11px] font-bold px-2.5 py-0.5 rounded-full"
                                style={{ backgroundColor: `${stageColors[company.stage] || '#666'}15`, color: stageColors[company.stage] || '#666' }}
                            >
                                {company.stage}
                            </span>
                        </div>
                        <DetailItem label="Account Owner" value={company.rep} icon={<User2 size={12} />} />
                        <div className="flex flex-col gap-1.5">
                            <label className="text-[10px] font-bold text-gray-700 uppercase tracking-[0.07em] font-['Lexend_Deca']">Team</label>
                            <span
                                className="w-fit text-[11px] font-bold px-2.5 py-0.5 rounded-full"
                                style={{ backgroundColor: `${teamColors[company.team]}22`, color: teamColors[company.team] }}
                            >
                                Team {formatTeamLabelForUi(company.team)}
                            </span>
                        </div>
                    </div>

                    {/* Contacts Section */}
                    <div className="flex flex-col gap-4">
                        <h3 className="text-[11px] font-bold text-gray-700 uppercase tracking-[0.07em] font-['Lexend_Deca'] flex items-center gap-2">
                            <Users2 size={14} /> Key Contacts
                        </h3>
                        <div className="space-y-2.5">
                            {company.contacts.map((contact, i) => (
                                <div key={i} className="flex items-center gap-3 p-3 bg-bg/50 rounded-xl border border-border group hover:border-accent transition-all cursor-pointer">
                                    <div className="size-9 rounded-full bg-accent/10 text-accent text-[10px] font-extrabold flex items-center justify-center shrink-0">
                                        {contact.name.split(' ').map(n => n[0]).join('')}
                                    </div>
                                    <div className="flex flex-col flex-1">
                                        <span className="text-[13px] font-bold text-text font-['Lexend'] leading-tight">{contact.name}</span>
                                        <span className="text-[11px] text-gray-700 font-medium">{contact.title}</span>
                                    </div>
                                    <Button
                                        variant="ghost"
                                        size="icon-xs"
                                        className="opacity-0 group-hover:opacity-100 transition-all"
                                    >
                                        <MessageSquare size={14} />
                                    </Button>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                <div className="sticky bottom-0 bg-white/60 backdrop-blur-[15px] px-8 py-5 border-t border-white flex justify-end gap-3">
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={onClose}
                    >
                        Close
                    </Button>
                    <Button
                        size="sm"
                        className="flex items-center gap-2"
                    >
                        <Plus size={16} className="stroke-[3px]" /> New Deal
                    </Button>
                </div>
            </div>
        </div>
    )
}

function DetailItem({ label, value, isAccent, icon }: { label: string, value: string, isAccent?: boolean, icon?: React.ReactNode }) {
    return (
        <div className="flex flex-col gap-1.5">
            <label className="text-[10px] font-bold text-gray-700 uppercase tracking-[0.07em] font-['Lexend_Deca'] flex items-center gap-1.5">
                {icon} {label}
            </label>
            <div className={cn(
                "text-[14px] font-bold font-['Lexend'] line-clamp-1",
                isAccent ? "text-accent" : "text-text"
            )}>
                {value}
            </div>
        </div>
    )
}