import { Icon } from '@iconify/react';
import { IconButton } from '@/components/common/IconButton';
import { Icon as UiIcon } from '@/components/ui/icon';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { DocumentFilenameHoverPreview } from '@/features/documents/components/document-filename-hover-preview';
import { getDocumentTypeAppearance } from '@/features/documents/lib/document-type';
import type { DocumentListItem } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';
import { formatDateRo } from '@/lib/datetime';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

type DocumentPrimaryCellProps = {
    document: DocumentListItem;
    onOpenDetail: (documentId: number) => void;
    isExpanded: boolean;
    onToggleExpand: (documentId: number) => void;
    alwaysAllowOpenDetail?: boolean;
};

export function DocumentPrimaryCell({
    document,
    onOpenDetail,
    isExpanded,
    onToggleExpand,
    alwaysAllowOpenDetail = false,
}: DocumentPrimaryCellProps) {
    const { t } = useI18n();
    const canOpenDetail =
        alwaysAllowOpenDetail ||
        Boolean(document.original_filename) ||
        document.summary !== null ||
        document.latest_extraction_status === 'success';
    const canExpand = document.summary !== null;
    const isLowConfidence =
        document.confidence !== null && document.confidence !== undefined && document.confidence < 70;
    const { icon: FileTypeIcon, iconContainerClassName } = getDocumentTypeAppearance(document.document_type.key);
    const filename = document.original_filename ?? t('documents.admin_index.primary_cell.unnamed_file');

    return (
        <div className="flex min-w-0 items-start gap-3">
            {canExpand ? (
                <IconButton
                    type="button"
                    variant="text"
                    color="ghost"
                    size="sm"
                    className="mt-0.5 shrink-0"
                    onClick={() => onToggleExpand(document.id)}
                    aria-label={isExpanded ? t('documents.admin_index.primary_cell.collapse_aria') : t('documents.admin_index.primary_cell.expand_aria')}
                >
                    <UiIcon
                        icon="solar:alt-arrow-right-linear"
                        className={cn('transition-transform', isExpanded && 'rotate-90')}
                    />
                </IconButton>
            ) : (
               <></>
            )}

            <div className={cn('mt-0.5 rounded-md p-2', iconContainerClassName)}>
                <FileTypeIcon className="h-4 w-4" />
            </div>

            <div className="min-w-0 space-y-0.5">
                <DocumentFilenameHoverPreview document={document}>
                    <div className="flex items-center gap-1.5">
                        {canOpenDetail ? (
                            <Button
                                type="button"
                                variant="link"
                                className="h-auto max-w-[300px] justify-start p-0 text-left font-medium"
                                onClick={() => onOpenDetail(document.id)}
                            >
                                <span className="truncate">{filename}</span>
                            </Button>
                        ) : (
                            <p className="max-w-[300px] truncate font-medium">{filename}</p>
                        )}
                        {document.duplicate_of_document_id !== null && (
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <span className="inline-flex shrink-0 cursor-default">
                                        <Icon
                                            icon="solar:copy-bold-duotone"
                                            className="size-4 text-amber-600"
                                        />
                                    </span>
                                </TooltipTrigger>
                                <TooltipContent side="top" className="max-w-xs">
                                    <p className="font-medium text-amber-700">
                                        {t('documents.admin_index.primary_cell.duplicate_label')}
                                    </p>
                                </TooltipContent>
                            </Tooltip>
                        )}
                        {(document.intake_events_count ?? 0) > 0 &&
                            document.duplicate_of_document_id === null && (
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <span className="inline-flex shrink-0 cursor-default">
                                        <Icon
                                            icon="solar:layers-minimalistic-bold-duotone"
                                            className="size-4 text-muted-foreground"
                                        />
                                    </span>
                                </TooltipTrigger>
                                <TooltipContent side="top" className="max-w-xs">
                                    <p className="text-sm">
                                        {t('documents.admin_index.primary_cell.intake_count', {
                                            count: document.intake_events_count,
                                        })}
                                    </p>
                                </TooltipContent>
                            </Tooltip>
                        )}
                        {document.has_client_mismatch && (
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <span className="inline-flex shrink-0 cursor-default">
                                        <Icon
                                            icon="solar:user-cross-bold-duotone"
                                            className="size-4 text-destructive"
                                        />
                                    </span>
                                </TooltipTrigger>
                                <TooltipContent side="top" className="max-w-xs">
                                    <p className="font-medium text-destructive">
                                        {t('documents.admin_index.primary_cell.client_mismatch_label')}
                                    </p>
                                </TooltipContent>
                            </Tooltip>
                        )}
                        {isLowConfidence && (
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <span className="inline-flex shrink-0 cursor-default">
                                        <Icon
                                            icon="solar:danger-triangle-bold-duotone"
                                            className="size-4 text-amber-500"
                                        />
                                    </span>
                                </TooltipTrigger>
                                <TooltipContent side="top" className="max-w-xs">
                                    <p className="font-medium text-amber-600">
                                        {t('documents.admin_index.primary_cell.low_confidence_label')}
                                    </p>
                                    {document.confidence_notes && (
                                        <p className="mt-0.5 text-xs text-muted-foreground">
                                            {document.confidence_notes}
                                        </p>
                                    )}
                                </TooltipContent>
                            </Tooltip>
                        )}
                    </div>
                </DocumentFilenameHoverPreview>

                <p className="text-xs text-muted-foreground">
                    {document.client_name} · {formatDateRo(document.created_at)}
                </p>
            </div>
        </div>
    );
}