'use client';

import { Icons } from '@/components/icons';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { formatBytes } from '@/lib/utils';
import { formatCertificateFileType } from './certificate-preview-utils';

export interface TrainingRecordAttachmentListItem {
  id: number | string;
  fileName: string;
  fileSize: number;
  fileType?: string | null;
  fileUrl?: string | null;
  statusLabel?: string | null;
  onDelete?: () => void;
  isDeleting?: boolean;
}

interface TrainingRecordAttachmentListProps {
  items: TrainingRecordAttachmentListItem[];
  title?: string;
  emptyMessage?: string;
}

export function TrainingRecordAttachmentList({
  items,
  title = 'ไฟล์ที่แนบ',
  emptyMessage = 'ไม่มีไฟล์แนบ'
}: TrainingRecordAttachmentListProps) {
  return (
    <Card>
      <CardHeader className='pb-4'>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent className='space-y-3'>
        {items.length ? (
          items.map((item) => {
            const fileTypeLabel = formatCertificateFileType(item.fileType);

            return (
              <div
                key={item.id}
                className='flex flex-col gap-3 rounded-lg border px-4 py-3 sm:flex-row sm:items-center sm:justify-between'
              >
                <div className='flex min-w-0 items-start gap-3'>
                  <div className='bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border'>
                    <Icons.paperclip className='h-4 w-4' />
                  </div>
                  <div className='min-w-0 space-y-1'>
                    <div className='font-medium break-all'>{item.fileName}</div>
                    <div className='text-muted-foreground text-sm'>
                      {fileTypeLabel ? `${fileTypeLabel} | ` : ''}
                      {formatBytes(item.fileSize)}
                      {item.statusLabel ? ` | ${item.statusLabel}` : ''}
                    </div>
                  </div>
                </div>
                <div className='flex flex-col gap-2 sm:flex-row sm:items-center'>
                  {item.fileUrl ? (
                    <Button asChild variant='outline' className='w-full sm:w-auto'>
                      <a href={item.fileUrl} target='_blank' rel='noreferrer'>
                        <Icons.externalLink className='mr-2 h-4 w-4' />
                        ดาวน์โหลด
                      </a>
                    </Button>
                  ) : null}
                  {item.onDelete ? (
                    <Button
                      type='button'
                      variant='destructive'
                      className='w-full sm:w-auto'
                      onClick={item.onDelete}
                      isLoading={item.isDeleting}
                    >
                      <Icons.trash className='mr-2 h-4 w-4' />
                      ลบ
                    </Button>
                  ) : null}
                </div>
              </div>
            );
          })
        ) : (
          <div className='text-muted-foreground flex items-center gap-2 rounded-lg border px-4 py-3 text-sm'>
            <Icons.paperclip className='h-4 w-4 shrink-0' />
            <span>{emptyMessage}</span>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
