import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
import { RowActions } from '@/components/data-display';
import { ToggleStatus } from '@/components/data-display';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { useCan } from '@/hooks/use-can';
import { formatNumber } from '@/lib/format';
import { formatCurrency } from '@/lib/utils';
import type { RawMaterial } from './columns';

export type RawMaterialCardRowParams = {
    rawMaterial: RawMaterial;
    index: number;
    isExpanded: boolean;
    onToggleExpand: () => void;
    onEdit: (rawMaterial: RawMaterial) => void;
    onDelete: (rawMaterial: RawMaterial) => void;
    toggleStatusUrl: (id: number) => string;
};

export function RawMaterialCardRow({
    rawMaterial,
    index,
    isExpanded,
    onToggleExpand,
    onEdit,
    onDelete,
    toggleStatusUrl,
}: RawMaterialCardRowParams) {
    const { can } = useCan();
    const variantCount = rawMaterial.variants_count ?? 0;
    const totalStock = rawMaterial.total_stock ?? 0;
    const totalValue = rawMaterial.total_value ?? 0;

    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>
                                {rawMaterial.name}
                            </h3>
                        </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">
                                {variantCount} varian
                            </span>
                            <span>
                                Total Stok:{' '}
                                <span className="font-medium text-foreground">
                                    {formatNumber(totalStock)}
                                </span>
                            </span>
                            <span>
                                Total Nilai:{' '}
                                <span className="font-medium text-foreground">
                                    {formatCurrency(totalValue)}
                                </span>
                            </span>
                        </div>

                        <div className="mt-2">
                            <ToggleStatus
                                url={toggleStatusUrl(rawMaterial.id)}
                                checked={rawMaterial.is_active}
                                label={
                                    rawMaterial.is_active
                                        ? 'Aktif'
                                        : 'Non Aktif'
                                }
                            />
                        </div>
                    </div>

                    {(can('raw_materials.update') || can('raw_materials.delete')) && (
                        <RowActions
                            actions={[
                                {
                                    label: 'Edit',
                                    icon: <Pencil className="h-4 w-4" />,
                                    show: can('raw_materials.update'),
                                    onClick: () => onEdit(rawMaterial),
                                },
                                {
                                    label: 'Hapus',
                                    icon: (
                                        <Trash2 className="h-4 w-4 text-destructive" />
                                    ),
                                    show: can('raw_materials.delete'),
                                    onClick: () => onDelete(rawMaterial),
                                },
                            ]}
                            wrapperClassName="flex shrink-0 items-center gap-1"
                        />
                    )}
                </div>
            </CardContent>
        </Card>
    );
}