"use client"

import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { LeadStatusBadge } from "./lead-status-badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Lead } from "@/types"
import {
  Building2,
  Mail,
  Phone,
  Globe,
  User,
  CalendarDays,
  Clock,
  Tag,
} from "lucide-react"

interface LeadDetailsCardProps {
  lead: Lead
}

export function LeadDetailsCard({ lead }: LeadDetailsCardProps) {
  const fields = [
    { icon: Building2, label: "Company", value: lead.companyName },
    { icon: User, label: "Contact", value: lead.contactName },
    { icon: Mail, label: "Email", value: lead.email },
    { icon: Phone, label: "Phone", value: lead.phone || "—" },
    { icon: Globe, label: "Source", value: lead.source || "—" },
    { icon: Tag, label: "Status", value: <LeadStatusBadge status={lead.status} /> },
    { icon: CalendarDays, label: "Created", value: new Date(lead.createdAt).toLocaleDateString() },
    { icon: Clock, label: "Updated", value: new Date(lead.updatedAt).toLocaleDateString() },
  ]

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Card>
        <CardHeader>
          <CardTitle>Lead Information</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-6 sm:grid-cols-2">
            {fields.map((field, i) => (
              <div key={i} className="flex items-start gap-3">
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted">
                  <field.icon className="h-4 w-4 text-muted-foreground" />
                </div>
                <div className="space-y-0.5">
                  <p className="text-xs text-muted-foreground">{field.label}</p>
                  <div className="text-sm font-medium">{field.value}</div>
                </div>
              </div>
            ))}
          </div>

          {lead.description && (
            <div className="mt-6 border-t pt-6">
              <h4 className="mb-2 text-sm font-medium text-muted-foreground">Description</h4>
              <p className="text-sm leading-relaxed">{lead.description}</p>
            </div>
          )}

          <div className="mt-6 border-t pt-6">
            <h4 className="mb-3 text-sm font-medium text-muted-foreground">Assigned User</h4>
            {lead.assignedUser ? (
              <div className="flex items-center gap-3">
                <Avatar className="h-10 w-10">
                  <AvatarImage src={lead.assignedUser.avatar} />
                  <AvatarFallback>{lead.assignedUser.name[0]}</AvatarFallback>
                </Avatar>
                <div>
                  <p className="text-sm font-medium">{lead.assignedUser.name}</p>
                  <Badge variant="secondary" className="mt-0.5 text-xs">
                    {lead.assignedUser.role}
                  </Badge>
                </div>
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">No user assigned</p>
            )}
          </div>
        </CardContent>
      </Card>
    </motion.div>
  )
}