import { format } from 'date-fns';
import {
    BookOpen,
    CalendarDays,
    FileIcon,
    FileX,
    Pencil,
    Trash2,
    User,
} from 'lucide-react';
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
import { RowActions } from '@/components/row-actions';
import {
    Attachment,
    AttachmentActions,
    AttachmentContent,
    AttachmentDescription,
    AttachmentMedia,
    AttachmentTitle,
} from '@/components/ui/attachment';
import { Badge } from '@/components/ui/badge';
import type { Material } from '@/types/material';

type CreateCardParams = {
    handleEdit: (material: Material) => void;
    handleDeleteClick: (material: Material) => void;
    canUpdate: boolean;
    canDelete: boolean;
};

export function createMaterialCard(params: CreateCardParams) {
    const { handleEdit, handleDeleteClick, canUpdate, canDelete } = params;

    return function MaterialCard(material: Material) {
        const courseClass = material.course_class;
        const lecturerName =
            courseClass?.lecturer?.user?.profile?.full_name ?? null;

        return (
            <div className="flex flex-col gap-4">
                <div className="flex items-start justify-between gap-2">
                    <div className="flex items-start gap-3">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                            <BookOpen className="h-5 w-5" />
                        </div>
                        <div className="min-w-0">
                            <p className="font-medium break-words">
                                {material.title}
                            </p>
                            <p className="mt-0.5 truncate text-xs text-muted-foreground">
                                {courseClass
                                    ? `${courseClass.course?.code ?? ''} · ${courseClass.course?.name ?? ''}`
                                    : '-'}
                            </p>
                            {lecturerName && (
                                <p className="mt-1 flex items-center gap-1 truncate text-xs text-muted-foreground">
                                    <User className="h-3 w-3 shrink-0" />
                                    {lecturerName}
                                </p>
                            )}
                        </div>
                    </div>
                    <RowActions
                        actions={[
                            {
                                label: 'Edit',
                                icon: <Pencil className="h-4 w-4" />,
                                show: canUpdate,
                                onClick: () => handleEdit(material),
                            },
                            {
                                label: 'Hapus',
                                icon: (
                                    <Trash2 className="h-4 w-4 text-destructive" />
                                ),
                                show: canDelete,
                                onClick: () => handleDeleteClick(material),
                            },
                        ]}
                    />
                </div>

                {material.description && (
                    <p className="line-clamp-2 text-sm text-muted-foreground">
                        {material.description}
                    </p>
                )}

                {material.file_url && material.file_name ? (
                    <Attachment size="sm" className="w-full">
                        <AttachmentMedia>
                            <FileIcon />
                        </AttachmentMedia>
                        <AttachmentContent>
                            <AttachmentTitle>
                                {material.file_name}
                            </AttachmentTitle>
                            <AttachmentDescription>
                                Lampiran materi
                            </AttachmentDescription>
                        </AttachmentContent>
                        <AttachmentActions>
                            <AttachmentPreviewDialog
                                fileUrl={material.file_url}
                                fileName={material.file_name}
                                variant="icon"
                            />
                        </AttachmentActions>
                    </Attachment>
                ) : (
                    <div className="flex items-center gap-2 rounded-xl border border-dashed px-2.5 py-2 text-xs text-muted-foreground">
                        <FileX className="h-4 w-4 shrink-0" />
                        Tidak ada file dilampirkan
                    </div>
                )}

                <div className="flex flex-wrap items-center justify-between gap-2 border-t pt-3">
                    {material.meeting_number ? (
                        <Badge variant="secondary">
                            Pertemuan {material.meeting_number}
                        </Badge>
                    ) : (
                        <span />
                    )}
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                        <CalendarDays className="h-3.5 w-3.5" />
                        {format(new Date(material.created_at), 'd MMM yyyy')}
                    </div>
                </div>
            </div>
        );
    };
}