import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ImagePreviewModal } from '@/components/image-preview-modal';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import type { Purchase } from './columns';

function formatDateTime(dateString: string): string {
    const date = new Date(dateString);

    return date.toLocaleDateString('id-ID', {
        day: '2-digit',
        month: 'short',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    });
}
function formatCurrency(amount: number): string {
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        minimumFractionDigits: 0,
    }).format(amount);
}

function formatNumber(num: number): string {
    return new Intl.NumberFormat('id-ID', {
        maximumFractionDigits: 4,
    }).format(num);
}

export type PurchaseCardRowParams = {
    purchase: Purchase;
    index: number;
    isExpanded: boolean;
    onToggleExpand: () => void;
    onEdit: (purchase: Purchase) => void;
    onDelete: (purchase: Purchase) => void;
};

export function PurchaseCardRow({
    purchase,
    index,
    isExpanded,
    onToggleExpand,
    onEdit,
    onDelete,
}: PurchaseCardRowParams) {
    const items = purchase.purchase_items ?? [];
    const variantCount = items.length;
    const rawMaterialName =
        items[0]?.raw_material_price?.raw_material?.name ?? '-';
    const unit =
        items[0]?.raw_material_price?.raw_material?.unit ?? '';
    const totalQty = items.reduce((sum, item) => sum + Number(item.quantity), 0);
    const [photoPreviewOpen, setPhotoPreviewOpen] = useState(false);

    return (
        <>
            <Card className="overflow-hidden">
                <CardContent className="p-0">
                    <div className="flex items-start gap-3 p-4">
                        <Button
                            variant="ghost"
                            size="icon"
                            className="mt-0.5 h-6 w-6 shrink-0"
                            onClick={onToggleExpand}
                        >
                            <ChevronDown
                                className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
                            />
                        </Button>

                        <div className="min-w-0 flex-1">
                            <div className="flex flex-wrap items-center gap-2">
                                <span className="text-xs text-muted-foreground">
                                    {index}.
                                </span>
                                <h3 className="truncate font-medium">
                                    {purchase.supplier?.name ?? '-'}
                                </h3>
                            </div>

                            <div className="mt-1 text-xs text-muted-foreground">
                                {rawMaterialName}
                                {variantCount > 0 && (
                                    <span className="ml-1">
                                        ({variantCount} varian)
                                    </span>
                                )}
                            </div>

                            <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
                                <span className="inline-flex items-center rounded-md bg-muted px-2 py-1 font-medium text-foreground">
                                    {formatDateTime(purchase.created_at)}
                                </span>
                                {purchase.notes && (
                                    <span className="max-w-[200px] truncate">
                                        {purchase.notes}
                                    </span>
                                )}
                            </div>

                            <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
                                <span>
                                    <span className="text-muted-foreground">Qty: </span>
                                    {formatNumber(totalQty)} {unit}
                                </span>
                                <span>
                                    <span className="text-muted-foreground">Sub: </span>
                                    {formatCurrency(purchase.subtotal)}
                                </span>
                                <span>
                                    <span className="text-muted-foreground">Disc: </span>
                                    {formatCurrency(purchase.discount)}
                                </span>
                                <span>
                                    <span className="text-muted-foreground">Ongkir: </span>
                                    {formatCurrency(purchase.shipping_cost)}
                                </span>
                                <span className="font-semibold">
                                    <span className="text-muted-foreground font-normal">Total: </span>
                                    {formatCurrency(purchase.total)}
                                </span>
                            </div>

                            {purchase.photo_url && (
                                <div className="mt-2">
                                    <button
                                        type="button"
                                        onClick={() => setPhotoPreviewOpen(true)}
                                        className="block h-16 w-16 overflow-hidden rounded-md border transition-opacity hover:opacity-80"
                                    >
                                        <img
                                            src={purchase.photo_url}
                                            alt="Foto belanja"
                                            className="h-full w-full object-cover"
                                        />
                                    </button>
                                </div>
                            )}
                        </div>

                        <TooltipProvider>
                            <div className="flex shrink-0 items-center gap-1">
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            onClick={() => onEdit(purchase)}
                                        >
                                            <Pencil className="h-4 w-4" />
                                        </Button>
                                    </TooltipTrigger>
                                    <TooltipContent side="top">Edit</TooltipContent>
                                </Tooltip>
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            onClick={() => onDelete(purchase)}
                                        >
                                            <Trash2 className="h-4 w-4 text-destructive" />
                                        </Button>
                                    </TooltipTrigger>
                                    <TooltipContent side="top">
                                        Hapus
                                    </TooltipContent>
                                </Tooltip>
                            </div>
                        </TooltipProvider>
                    </div>
                </CardContent>
            </Card>

            {purchase.photo_url && (
                <ImagePreviewModal
                    open={photoPreviewOpen}
                    onOpenChange={setPhotoPreviewOpen}
                    src={purchase.photo_url}
                    title="Foto Belanja"
                />
            )}
        </>
    );
}