"use client"

import Link from "next/link"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Lead } from "@/types"
import { ArrowRight } from "lucide-react"

const statusStyles: Record<string, string> = {
  open: "bg-white/40 text-gray-700 dark:text-gray-300 border-gray-300/50 dark:border-gray-600/50",
  contacted: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
  pending: "bg-blue-900/10 text-blue-900 dark:text-blue-300 border-blue-900/20",
  closed: "bg-blue-400/10 text-blue-600 dark:text-blue-300 border-blue-400/20",
  ignored: "bg-black/10 text-black dark:text-gray-300 border-black/20 dark:border-black/40",
}

interface RecentLeadsTableProps {
  leads: Lead[]
}

export function RecentLeadsTable({ leads }: RecentLeadsTableProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, delay: 0.4 }}
    >
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>Recent Leads</CardTitle>
          <Link
            href="/leads"
            className="flex items-center gap-1 text-sm text-primary hover:underline"
          >
            View all <ArrowRight className="h-3 w-3" />
          </Link>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b text-left text-muted-foreground">
                  <th className="pb-3 font-medium">Company</th>
                  <th className="pb-3 font-medium">Contact</th>
                  <th className="hidden pb-3 font-medium md:table-cell">Status</th>
                  <th className="hidden pb-3 font-medium lg:table-cell">Assigned</th>
                  <th className="hidden pb-3 font-medium sm:table-cell">Date</th>
                </tr>
              </thead>
              <tbody>
                {leads.map((lead, i) => (
                  <motion.tr
                    key={lead.id}
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: i * 0.03 }}
                    className="border-b last:border-0 hover:bg-muted/30"
                  >
                    <td className="py-3">
                      <Link href={`/leads/${lead.id}`} className="font-medium hover:text-primary">
                        {lead.companyName}
                      </Link>
                    </td>
                    <td className="py-3 text-muted-foreground">{lead.contactName}</td>
                    <td className="hidden py-3 md:table-cell">
                      <Badge variant="outline" className={statusStyles[lead.status]}>
                        {lead.status.charAt(0).toUpperCase() + lead.status.slice(1)}
                      </Badge>
                    </td>
                    <td className="hidden py-3 lg:table-cell">
                      {lead.assignedUser ? (
                        <div className="flex items-center gap-2">
                          <Avatar className="h-6 w-6">
                            <AvatarImage src={lead.assignedUser.avatar} />
                            <AvatarFallback>{lead.assignedUser.name[0]}</AvatarFallback>
                          </Avatar>
                          <span className="text-muted-foreground">{lead.assignedUser.name}</span>
                        </div>
                      ) : (
                        <span className="text-muted-foreground/50">Unassigned</span>
                      )}
                    </td>
                    <td className="hidden py-3 text-muted-foreground sm:table-cell">
                      {new Date(lead.createdAt).toLocaleDateString()}
                    </td>
                  </motion.tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </motion.div>
  )
}