// components/vendors/VendorHeader.tsx
import { Vendor, VendorType, VendorStatus } from '@prisma/client'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import Link from 'next/link'

interface VendorHeaderProps {
  vendor: {
    id: string
    name: string
    type: VendorType
    status: VendorStatus
    isBooked: boolean
    createdAt: Date
  }
  onEditClick: () => void
}

const formatVendorType = (type: VendorType): string => {
  return type.charAt(0) + type.slice(1).toLowerCase()
}

const formatStatus = (status: VendorStatus): { label: string, color: string } => {
    const statusMap: Record<VendorStatus, { label: string, color: string }> = {
        RESEARCHING: { label: 'Researching', color: 'bg-gray-100 text-gray-800' },
        CONTACTING: { label: 'Contacting', color: 'bg-blue-100 text-blue-800' },
        RESPONDED: { label: 'Responded', color: 'bg-yellow-100 text-yellow-800' },
        PROPOSAL_RECEIVED: { label: 'Proposal Received', color: 'bg-purple-100 text-purple-800' },
        NEGOTIATING: { label: 'Negotiating', color: 'bg-orange-100 text-orange-800' },
        CONTRACT_SENT: { label: 'Contract Sent', color: 'bg-indigo-100 text-indigo-800' },
        CONTRACT_SIGNED: { label: 'Contract Signed', color: 'bg-green-100 text-green-800' },
        DECLINED: { label: 'Declined', color: 'bg-red-100 text-red-800' },
        BACKUP: { label: 'Backup', color: 'bg-slate-100 text-slate-800' },
    }
    return statusMap[status]
}

export function VendorHeader({ vendor, onEditClick }: VendorHeaderProps) {
    const status = formatStatus(vendor.status)
    
    return (
        <div className="flex justify-between items-start">
            <div>
                <div className="flex items-center gap-3 mb-2">
                    <h1 className="text-3xl font-bold">{vendor.name}</h1>
                    <Badge className={status.color}>{status.label}</Badge>
                    {vendor.isBooked && (
                        <Badge variant="default">Booked</Badge>
                    )}
                </div>
                <p className="text-muted-foreground">
                    {formatVendorType(vendor.type)} • Added {new Date(vendor.createdAt).toLocaleDateString()}
                </p>
            </div>
            <div className="flex gap-2">
                <Button variant="outline" onClick={onEditClick}>
                    Edit Vendor
                </Button>
                <Button asChild>
                    <Link href="/vendors">
                        Back to Vendors
                    </Link>
                </Button>
            </div>
        </div>
    )
}