import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { useAuthBreadcrumb } from '@/hooks/use-auth-breadcrumb';
import AppLayout from '@/layouts/app-layout';
import { Head, router } from '@inertiajs/react';
import { useState } from 'react';
import { Toaster, toast } from 'sonner';

interface Tahun {
    id: number;
    nama: string;
    jenis: string;
}

interface CopyDbProps {
    tahunList: Tahun[];
}

export default function CopyDb({ tahunList }: CopyDbProps) {
    const breadcrumbs = useAuthBreadcrumb();

    const [source, setSource] = useState<string>('');
    const [target, setTarget] = useState<string>('');
    const [loading, setLoading] = useState(false);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        if (!source || !target) {
            return toast.error('Silakan pilih tahun sumber dan target!', {
                id: 'copydb-error',
                style: { background: '#FF4D4F', color: '#fff' },
            });
        }

        setLoading(true);

        router.post(
            '/copydb/copy',
            { source_tahun_id: source, target_tahun_id: target },
            {
                onSuccess: () => {
                    setLoading(false);
                    toast.success('Data berhasil disalin!', {
                        id: 'copydb-success',
                        style: { background: '#52C41A', color: '#fff' },
                    });
                    router.reload();
                },
                onError: (errors) => {
                    setLoading(false);
                    toast.error(
                        'Terjadi kesalahan: ' + JSON.stringify(errors),
                        {
                            id: 'copydb-error',
                            style: { background: '#FF4D4F', color: '#fff' },
                        },
                    );
                },
            },
        );
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Copy Database" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl px-6 py-4">
                <span>
                    <h1 className="text-2xl font-bold uppercase">
                        Copy Database
                    </h1>
                    <p className="text-sm text-muted-foreground">
                        Halaman ini digunakan untuk menduplikasi database
                    </p>
                </span>
                <Card className="my-2 max-w-xl">
                    <CardHeader>
                        <CardTitle>Salin Database</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div className="space-y-2">
                                <Label>Tahun Sumber</Label>
                                <Select
                                    value={source}
                                    onValueChange={setSource}
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="-- Pilih Tahun --" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {tahunList.map((t) => (
                                            <SelectItem
                                                key={t.id}
                                                value={String(t.id)}
                                            >
                                                {t.nama} - {t.jenis}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>

                            <div className="space-y-2">
                                <Label>Tahun Target</Label>
                                <Select
                                    value={target}
                                    onValueChange={setTarget}
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="-- Pilih Tahun --" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {tahunList.map((t) => (
                                            <SelectItem
                                                key={t.id}
                                                value={String(t.id)}
                                            >
                                                {t.nama} - {t.jenis}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>

                            <Button
                                type="submit"
                                className="w-full"
                                disabled={loading}
                            >
                                {loading ? (
                                    <span className="flex items-center justify-center gap-2">
                                        <svg
                                            className="h-4 w-4 animate-spin text-white"
                                            xmlns="http://www.w3.org/2000/svg"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                        >
                                            <circle
                                                className="opacity-25"
                                                cx="12"
                                                cy="12"
                                                r="10"
                                                stroke="currentColor"
                                                strokeWidth="4"
                                            ></circle>
                                            <path
                                                className="opacity-75"
                                                fill="currentColor"
                                                d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 010 16v-4l-3 3 3 3v-4a8 8 0 01-8-8z"
                                            ></path>
                                        </svg>
                                        Menyalin...
                                    </span>
                                ) : (
                                    'Salin Sekarang'
                                )}
                            </Button>
                        </form>
                    </CardContent>
                </Card>
            </div>

            <Toaster position="top-right" richColors closeButton />
        </AppLayout>
    );
}
