import { useState, useEffect } from 'react';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Input } from '@/components/ui/input';
import { Search, Loader2 } from 'lucide-react';
import { Regulation } from '../../types';
import { cn } from '@/lib/utils';

interface RegulationRelationManagerProps {
    sampleTypeId: number;
    sampleTypeName: string;
    availableRegulations: Regulation[];
    selectedRegulationIds: number[];
    onSave: (regulationIds: number[]) => void;
    onCancel: () => void;
    isSaving?: boolean;
}

export function RegulationRelationManager({
    sampleTypeId,
    sampleTypeName,
    availableRegulations,
    selectedRegulationIds,
    onSave,
    onCancel,
    isSaving = false,
}: RegulationRelationManagerProps) {
    const [search, setSearch] = useState('');
    const [selected, setSelected] = useState<number[]>(selectedRegulationIds);

    useEffect(() => {
        setSelected(selectedRegulationIds);
    }, [selectedRegulationIds]);

    const filtered = availableRegulations.filter(r =>
        r.name.toLowerCase().includes(search.toLowerCase()) ||
        r.code.toLowerCase().includes(search.toLowerCase())
    );

    const toggleRegulation = (regulationId: number) => {
        setSelected(prev =>
            prev.includes(regulationId)
                ? prev.filter(id => id !== regulationId)
                : [...prev, regulationId]
        );
    };

    const selectAll = () => {
        setSelected(filtered.map(r => r.id));
    };

    const deselectAll = () => {
        setSelected([]);
    };

    const handleSave = () => {
        onSave(selected);
    };

    return (
        <div className="space-y-4">
            {/* Header */}
            <div className="space-y-2">
                <p className="text-sm text-muted-foreground">
                    Pilih regulasi yang berlaku untuk <span className="font-semibold">{sampleTypeName}</span>
                </p>
                <div className="flex items-center gap-2">
                    <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={selectAll}
                        disabled={isSaving}
                    >
                        Pilih Semua
                    </Button>
                    <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={deselectAll}
                        disabled={isSaving}
                    >
                        Hapus Semua
                    </Button>
                    <div className="ml-auto text-sm text-muted-foreground">
                        {selected.length} dari {availableRegulations.length} dipilih
                    </div>
                </div>
            </div>

            {/* Search */}
            <div className="relative">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                    placeholder="Cari regulasi..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="pl-8"
                    disabled={isSaving}
                />
            </div>

            {/* Regulation List */}
            <ScrollArea className="h-[400px] border rounded-lg">
                <div className="p-4 space-y-2">
                    {filtered.map((regulation) => {
                        const isSelected = selected.includes(regulation.id);
                        return (
                            <div
                                key={regulation.id}
                                className={cn(
                                    "flex items-start space-x-3 p-3 rounded-lg border cursor-pointer transition-colors",
                                    isSelected ? "bg-primary/5 border-primary" : "hover:bg-muted"
                                )}
                                onClick={() => !isSaving && toggleRegulation(regulation.id)}
                            >
                                <Checkbox
                                    checked={isSelected}
                                    onCheckedChange={() => toggleRegulation(regulation.id)}
                                    disabled={isSaving}
                                    className="mt-0.5"
                                />
                                <div className="flex-1 min-w-0">
                                    <div className="font-medium">{regulation.name}</div>
                                    <div className="text-sm text-muted-foreground">
                                        {regulation.code}
                                    </div>
                                    {regulation.description && (
                                        <div className="text-xs text-muted-foreground mt-1 line-clamp-2">
                                            {regulation.description}
                                        </div>
                                    )}
                                    {regulation.effective_date && (
                                        <div className="text-xs text-muted-foreground mt-1">
                                            Berlaku: {new Date(regulation.effective_date).toLocaleDateString('id-ID')}
                                        </div>
                                    )}
                                </div>
                            </div>
                        );
                    })}
                    {filtered.length === 0 && (
                        <div className="text-center text-muted-foreground py-8 text-sm">
                            {search ? 'Tidak ada regulasi yang cocok' : 'Tidak ada regulasi tersedia'}
                        </div>
                    )}
                </div>
            </ScrollArea>

            {/* Actions */}
            <div className="flex justify-end gap-2 pt-4 border-t">
                <Button
                    type="button"
                    variant="outline"
                    onClick={onCancel}
                    disabled={isSaving}
                >
                    Batal
                </Button>
                <Button
                    type="button"
                    onClick={handleSave}
                    disabled={isSaving}
                >
                    {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                    {isSaving ? 'Menyimpan...' : 'Simpan Relasi'}
                </Button>
            </div>
        </div>
    );
}