import AppLayout from '@/Layouts/AppLayout';
import { Head, router, usePage } from '@inertiajs/react';
import { AlertCircle, CheckCircle2, Database, Loader2, Play } from 'lucide-react';
import { useState } from 'react';

interface Props {
    bekleyen_sayi: number;
    bekleyen_liste: string[];
    cikti: string;
}

export default function Migrate({ bekleyen_sayi, bekleyen_liste, cikti }: Props) {
    const { flash, errors } = usePage<any>().props;
    const [calisan, setCalisan] = useState(false);

    const calistir = () => {
        if (calisan) return;
        if (!confirm(`${bekleyen_sayi} adet bekleyen migration çalıştırılacak.\n\nDevam edilsin mi?`)) return;
        setCalisan(true);
        router.post(route('admin.migrate.calistir'), {}, {
            preserveScroll: true,
            onFinish: () => setCalisan(false),
        });
    };

    return (
        <AppLayout>
            <Head title="Web Migrate" />

            <div className="mx-auto max-w-4xl space-y-6 p-4 lg:p-6">
                <div className="flex items-center gap-3">
                    <div className="rounded-xl bg-blue-100 p-3 text-blue-700">
                        <Database className="h-6 w-6" />
                    </div>
                    <div>
                        <h1 className="text-xl font-bold text-slate-900">Web Üzerinden Migration</h1>
                        <p className="text-sm text-slate-600">Terminal erişimi olmadan veritabanı şema güncellemelerini çalıştır.</p>
                    </div>
                </div>

                {flash?.success && (
                    <div className="flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 p-4">
                        <CheckCircle2 className="h-5 w-5 flex-shrink-0 text-emerald-600" />
                        <pre className="flex-1 overflow-x-auto whitespace-pre-wrap text-xs text-emerald-900">{flash.success}</pre>
                    </div>
                )}

                {errors?.migrate && (
                    <div className="flex items-start gap-3 rounded-xl border border-rose-200 bg-rose-50 p-4">
                        <AlertCircle className="h-5 w-5 flex-shrink-0 text-rose-600" />
                        <pre className="flex-1 overflow-x-auto whitespace-pre-wrap text-xs text-rose-900">{errors.migrate}</pre>
                    </div>
                )}

                <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
                    <div className="border-b border-slate-200 px-5 py-3">
                        <h2 className="text-sm font-semibold text-slate-900">
                            Bekleyen Migration'lar
                            <span className={`ml-2 rounded-full px-2 py-0.5 text-xs font-medium ${
                                bekleyen_sayi > 0
                                    ? 'bg-amber-100 text-amber-700'
                                    : 'bg-emerald-100 text-emerald-700'
                            }`}>
                                {bekleyen_sayi}
                            </span>
                        </h2>
                    </div>

                    <div className="p-5">
                        {bekleyen_sayi === 0 ? (
                            <div className="flex items-center gap-3 text-sm text-emerald-700">
                                <CheckCircle2 className="h-5 w-5" />
                                <span>Tüm migration'lar güncel. Çalıştırılacak yeni bir şey yok.</span>
                            </div>
                        ) : (
                            <>
                                <ul className="mb-4 space-y-1.5">
                                    {bekleyen_liste.map((m, i) => (
                                        <li key={i} className="flex items-center gap-2 rounded-lg bg-amber-50 px-3 py-2 font-mono text-xs text-amber-900">
                                            <span className="rounded bg-amber-200 px-1.5 py-0.5 text-[10px] font-bold">PENDING</span>
                                            {m}
                                        </li>
                                    ))}
                                </ul>
                                <button
                                    onClick={calistir}
                                    disabled={calisan}
                                    className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 disabled:opacity-50"
                                >
                                    {calisan ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
                                    {calisan ? 'Çalışıyor...' : 'Migration\'ları Çalıştır'}
                                </button>
                            </>
                        )}
                    </div>
                </div>

                <details className="rounded-xl border border-slate-200 bg-white">
                    <summary className="cursor-pointer px-5 py-3 text-sm font-medium text-slate-700 hover:bg-slate-50">
                        Tam durum çıktısı (migrate:status)
                    </summary>
                    <pre className="overflow-x-auto whitespace-pre border-t border-slate-200 bg-slate-50 p-4 font-mono text-[11px] text-slate-700">{cikti}</pre>
                </details>
            </div>
        </AppLayout>
    );
}
