import { EmployeeIdentity } from '@/components/employee/employee-information';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Card, CardHeader, CardContent, CardTitle, CardDescription } from '@/components/ui/card';
import { getTrainingStatusLabel } from '@/constants/thai-labels';
import type { OverviewRecentActivityItem } from '@/features/overview/server/overview-data';
import { isOrganizationAdminRole } from '@/lib/auth/roles';

function getBadgeVariant(status: OverviewRecentActivityItem['status']) {
  switch (status) {
    case 'approved':
      return 'default';
    case 'rejected':
      return 'destructive';
    default:
      return 'outline';
  }
}

export function RecentSales({
  items,
  role
}: {
  items: OverviewRecentActivityItem[];
  role: string;
}) {
  return (
    <Card className='h-full'>
      <CardHeader>
        <CardTitle>กิจกรรมอบรมล่าสุด</CardTitle>
        <CardDescription>
          {isOrganizationAdminRole(role)
            ? 'รายการอบรมล่าสุดของทั้งองค์กรและสถานะการตรวจสอบ'
            : 'รายการที่คุณส่งล่าสุดและความคืบหน้าการตรวจสอบ'}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {items.length === 0 ? (
          <div className='text-muted-foreground py-10 text-center text-sm'>ยังไม่มีกิจกรรมอบรม</div>
        ) : (
          <div className='space-y-4 sm:space-y-6'>
            {items.map((item) => (
              <div key={item.id} className='flex flex-col gap-3 sm:flex-row sm:items-center'>
                <Avatar className='h-9 w-9'>
                  <AvatarFallback>{item.initials}</AvatarFallback>
                </Avatar>
                <div className='min-w-0 flex-1 space-y-1 sm:ml-4'>
                  <EmployeeIdentity
                    employeeCode={item.employeeCode}
                    employeeName={item.employeeName}
                    secondary={item.courseName}
                    codeClassName='text-sm leading-none'
                    secondaryClassName='break-words text-sm'
                  />
                </div>
                <div className='flex flex-wrap items-center gap-2 sm:ml-auto sm:flex-col sm:items-end'>
                  <Badge variant={getBadgeVariant(item.status)} className='whitespace-normal'>
                    {getTrainingStatusLabel(item.status)}
                  </Badge>
                  <span className='text-muted-foreground text-xs'>
                    {new Date(item.trainingDate).toLocaleDateString('th-TH')}
                  </span>
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
