"use client"

import { Company } from "./types"
import { cn } from "@/lib/utils"
import { Building2, Users2, Calendar, DollarSign } from "lucide-react"
import { Card } from "@/components/ui/card"

interface CompanyCardProps {
    company: Company
    onClick: () => void
}

export function CompanyCard({ company, onClick }: CompanyCardProps) {
    const stageColors: Record<string, string> = {
        'Prospecting': '#6C63FF',
        'Qualified': '#8B83FF',
        'Proposal Sent': '#F59E0B',
        'Negotiation': '#FF8C42',
        'Closed Won': '#22C55E'
    }

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

    return (
        <Card
            className="group gap-0 p-5 hover:-translate-y-1 transition-all cursor-pointer overflow-hidden relative"
            onClick={onClick}
        >
            <div className="flex items-start justify-between mb-4">
                <div
                    className="size-11 rounded-xl flex items-center justify-center text-base font-extrabold text-white shadow-sm font-['Lexend_Deca']"
                    style={{ backgroundColor: company.color }}
                >
                    {company.initials}
                </div>
                <div
                    className="w-1.5 h-6 rounded-full"
                    style={{ backgroundColor: teamColors[company.team] }}
                />
            </div>

            <div className="mb-4">
                <h3 className="text-[15px] font-extrabold text-text font-['Lexend'] line-clamp-1">{company.name}</h3>
                <p className="text-[11px] text-gray-700 font-medium mt-0.5">{company.industry} · {company.city} · {company.size}</p>
            </div>

            <div className="grid grid-cols-2 gap-y-3 gap-x-4 mb-5 border-y border-bg/50 py-4">
                <div className="flex flex-col gap-0.5">
                    <label className="text-[9px] font-bold text-gray-700 uppercase tracking-[0.07em] font-['Lexend_Deca']">Total Value</label>
                    <span className="text-[13px] font-extrabold text-accent font-['Lexend_Deca']">
                        ${company.totalVal >= 1000 ? `${(company.totalVal / 1000).toFixed(1)}M` : `${company.totalVal}K`}
                    </span>
                </div>
                <div className="flex flex-col gap-0.5 text-right">
                    <label className="text-[9px] font-bold text-gray-700 uppercase tracking-[0.07em] font-['Lexend_Deca']">Active Deals</label>
                    <span className="text-[13px] font-extrabold text-text font-['Lexend_Deca']">{company.deals}</span>
                </div>
                <div className="flex items-center gap-1.5 mt-1">
                    <Users2 size={12} className="text-gray-700" />
                    <span className="text-[11px] font-bold text-gray-700">{company.employees}</span>
                </div>
                <div className="flex items-center gap-1.5 mt-1 justify-end">
                    <Calendar size={12} className="text-gray-700" />
                    <span className="text-[11px] font-bold text-gray-700">{company.founded}</span>
                </div>
            </div>

            <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                    <div className="size-6 rounded-full bg-accent/15 text-accent text-[9px] font-bold flex items-center justify-center shrink-0">
                        {company.repAv}
                    </div>
                    <span className="text-[11px] font-semibold text-gray-700">{company.rep.split(' ')[0]}</span>
                </div>
                <span
                    className="text-[10px] font-extrabold px-2 py-0.5 rounded-full"
                    style={{ backgroundColor: `${stageColors[company.stage]}15`, color: stageColors[company.stage] }}
                >
                    {company.stage}
                </span>
            </div>
        </Card>
    )
}