'use client';

import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import {
  Mail,
  Phone,
  Building2,
  Calendar,
  ChevronRight,
  Briefcase,
} from 'lucide-react';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import {
  type Employee,
  EMPLOYMENT_STATUS_COLORS,
} from '@/hooks/hr/use-employees';
import { format } from 'date-fns';
import { de } from 'date-fns/locale';

interface EmployeeCardProps {
  /** Employee data */
  employee: Employee;
  /** Current locale */
  locale: string;
  /** Additional CSS classes */
  className?: string;
}

/**
 * Employee card showing quick overview
 * Displays avatar, name, position, department, and status
 */
export function EmployeeCard({ employee, locale, className }: EmployeeCardProps) {
  const t = useTranslations('hr');
  const tStatus = useTranslations('hr.employeeStatus');

  const initials = `${employee.firstName.charAt(0)}${employee.lastName.charAt(0)}`;
  const statusColors = EMPLOYMENT_STATUS_COLORS[employee.status];

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Link href={`/${locale}/hr/employees/${employee.id}`}>
        <Card
          className={cn(
            'hover:shadow-md transition-shadow cursor-pointer h-full',
            className
          )}
        >
          <CardHeader className="pb-3">
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3">
                <Avatar className="h-12 w-12">
                  <AvatarImage
                    src={employee.avatarUrl}
                    alt={`${employee.firstName} ${employee.lastName}`}
                  />
                  <AvatarFallback className="bg-primary/10 text-primary font-medium">
                    {initials}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h3 className="font-semibold">
                    {employee.firstName} {employee.lastName}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {employee.employeeNumber}
                  </p>
                </div>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </div>
          </CardHeader>
          <CardContent className="space-y-3">
            {/* Position */}
            <div className="flex items-center gap-2 text-sm">
              <Briefcase className="h-4 w-4 text-muted-foreground" />
              <span>{employee.position}</span>
            </div>

            {/* Department */}
            <div className="flex items-center gap-2 text-sm">
              <Building2 className="h-4 w-4 text-muted-foreground" />
              <span>{employee.department?.name}</span>
            </div>

            {/* Email */}
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Mail className="h-4 w-4" />
              <span className="truncate">{employee.email}</span>
            </div>

            {/* Hire Date */}
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Calendar className="h-4 w-4" />
              <span>
                {t('hireDate')}:{' '}
                {format(new Date(employee.hireDate), 'PP', {
                  locale: locale === 'de' ? de : undefined,
                })}
              </span>
            </div>

            {/* Status Badge */}
            <div className="pt-2">
              <Badge
                variant="outline"
                className={cn(
                  'font-medium border',
                  statusColors.bg,
                  statusColors.text,
                  statusColors.border
                )}
              >
                {tStatus(employee.status)}
              </Badge>
            </div>
          </CardContent>
        </Card>
      </Link>
    </motion.div>
  );
}
