import { Form, Head } from '@inertiajs/react';
import { Settings2, Save, CheckCircle2, Sliders, CreditCard, Link2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type Props = {
    settings: {
        planner_max_tasks_per_day: number;
        app_name: string;
        contact_email: string;
        platform_fee_percent: number;
        bank_name: string;
        bank_account: string;
        bank_holder: string;
        affiliate_enabled: boolean;
        affiliate_default_commission: number;
    };
};

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Admin', href: '/admin' },
    { title: 'Pengaturan', href: '/admin/settings' },
];

export default function AdminSettingsIndex({ settings }: Props) {
    return (
        <>
            <Head title="Pengaturan Platform" />

            <div className="flex flex-col gap-6 p-4 md:p-6">
                {/* Header */}
                <div className="flex items-center gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm">
                        <Settings2 className="h-6 w-6 text-white" />
                    </div>
                    <div>
                        <h1 className="text-2xl font-bold">Pengaturan Platform</h1>
                        <p className="text-sm text-muted-foreground">Konfigurasi sistem untuk seluruh pengguna</p>
                    </div>
                </div>

                <Form action="/admin/settings" method="patch" options={{ preserveScroll: true }} className="max-w-2xl">
                    {({ processing, errors, wasSuccessful }) => (
                        <div className="flex flex-col gap-5">
                            {/* General section */}
                            <div className="overflow-hidden rounded-2xl border border-blue-100 bg-white shadow-sm dark:border-blue-900/20 dark:bg-card">
                                <div className="flex items-center gap-3 border-b border-blue-50 bg-gradient-to-r from-blue-50 to-indigo-50 px-5 py-4 dark:border-blue-900/20 dark:from-blue-950/40 dark:to-indigo-950/40">
                                    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/40">
                                        <Sliders className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                                    </div>
                                    <h2 className="font-semibold text-blue-900 dark:text-blue-100">Konfigurasi Umum</h2>
                                </div>

                                <div className="flex flex-col gap-5 p-5">
                                    <div className="grid gap-2">
                                        <Label htmlFor="app_name" className="font-semibold">Nama Aplikasi</Label>
                                        <Input
                                            id="app_name"
                                            name="app_name"
                                            defaultValue={settings.app_name}
                                            placeholder="Nama platform Anda"
                                            className="rounded-xl"
                                        />
                                        {errors.app_name && <p className="text-xs text-destructive">{errors.app_name}</p>}
                                        <p className="text-xs text-muted-foreground">Nama ini akan tampil di judul halaman dan email notifikasi.</p>
                                    </div>

                                    <div className="grid gap-2">
                                        <Label htmlFor="contact_email" className="font-semibold">Email Kontak</Label>
                                        <Input
                                            id="contact_email"
                                            name="contact_email"
                                            type="email"
                                            defaultValue={settings.contact_email}
                                            placeholder="admin@example.com"
                                            className="rounded-xl"
                                        />
                                        {errors.contact_email && <p className="text-xs text-destructive">{errors.contact_email}</p>}
                                        <p className="text-xs text-muted-foreground">Email yang digunakan untuk pemberitahuan dan kontak pengguna.</p>
                                    </div>
                                </div>
                            </div>

                            {/* Bank Details section */}
                            <div className="overflow-hidden rounded-2xl border border-emerald-100 bg-white shadow-sm dark:border-emerald-900/20 dark:bg-card">
                                <div className="flex items-center gap-3 border-b border-emerald-50 bg-gradient-to-r from-emerald-50 to-teal-50 px-5 py-4 dark:border-emerald-900/20 dark:from-emerald-950/40 dark:to-teal-950/40">
                                    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/40">
                                        <CreditCard className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                                    </div>
                                    <h2 className="font-semibold text-emerald-900 dark:text-emerald-100">Informasi Rekening Pembayaran</h2>
                                </div>

                                <div className="flex flex-col gap-5 p-5">
                                    <div className="grid gap-2">
                                        <Label htmlFor="bank_name" className="font-semibold">Nama Bank</Label>
                                        <Input
                                            id="bank_name"
                                            name="bank_name"
                                            defaultValue={settings.bank_name}
                                            placeholder="Contoh: Bank Mandiri, BCA, Bank Rakyat Indonesia"
                                            className="rounded-xl"
                                        />
                                        {errors.bank_name && <p className="text-xs text-destructive">{errors.bank_name}</p>}
                                        <p className="text-xs text-muted-foreground">Nama bank tujuan transfer untuk pembayaran kelas berbayar.</p>
                                    </div>

                                    <div className="grid gap-2">
                                        <Label htmlFor="bank_account" className="font-semibold">Nomor Rekening</Label>
                                        <Input
                                            id="bank_account"
                                            name="bank_account"
                                            defaultValue={settings.bank_account}
                                            placeholder="Contoh: 1234567890"
                                            className="rounded-xl"
                                        />
                                        {errors.bank_account && <p className="text-xs text-destructive">{errors.bank_account}</p>}
                                        <p className="text-xs text-muted-foreground">Nomor rekening tujuan transfer pembayaran.</p>
                                    </div>

                                    <div className="grid gap-2">
                                        <Label htmlFor="bank_holder" className="font-semibold">Nama Pemilik Rekening</Label>
                                        <Input
                                            id="bank_holder"
                                            name="bank_holder"
                                            defaultValue={settings.bank_holder}
                                            placeholder="Contoh: PT. Pakandi Digital Indonesia"
                                            className="rounded-xl"
                                        />
                                        {errors.bank_holder && <p className="text-xs text-destructive">{errors.bank_holder}</p>}
                                        <p className="text-xs text-muted-foreground">Nama lengkap pemilik rekening penerima transfer.</p>
                                    </div>
                                </div>
                            </div>

                            {/* Affiliate section */}
                            <div className="overflow-hidden rounded-2xl border border-amber-100 bg-white shadow-sm dark:border-amber-900/20 dark:bg-card">
                                <div className="flex items-center gap-3 border-b border-amber-50 bg-gradient-to-r from-amber-50 to-orange-50 px-5 py-4 dark:border-amber-900/20 dark:from-amber-950/40 dark:to-orange-950/40">
                                    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/40">
                                        <Link2 className="h-4 w-4 text-amber-600 dark:text-amber-400" />
                                    </div>
                                    <h2 className="font-semibold text-amber-900 dark:text-amber-100">Program Affiliate</h2>
                                </div>

                                <div className="flex flex-col gap-5 p-5">
                                    <div className="flex items-center justify-between gap-4 rounded-xl border border-input p-4">
                                        <div>
                                            <p className="font-semibold">Aktifkan Program Affiliate</p>
                                            <p className="text-xs text-muted-foreground mt-0.5">
                                                Izinkan pengguna mendaftar sebagai affiliate dan mendapatkan komisi dari referral.
                                            </p>
                                        </div>
                                        <input
                                            type="checkbox"
                                            name="affiliate_enabled"
                                            value="1"
                                            defaultChecked={settings.affiliate_enabled}
                                            className="h-5 w-5 cursor-pointer rounded accent-amber-500"
                                        />
                                    </div>

                                    <div className="grid gap-2">
                                        <label htmlFor="affiliate_default_commission" className="text-sm font-semibold">
                                            Komisi Default (%)
                                        </label>
                                        <div className="relative">
                                            <Input
                                                id="affiliate_default_commission"
                                                name="affiliate_default_commission"
                                                type="number"
                                                min="0"
                                                max="100"
                                                step="0.5"
                                                defaultValue={settings.affiliate_default_commission}
                                                className="rounded-xl pr-10"
                                            />
                                            <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-muted-foreground">%</span>
                                        </div>
                                        <p className="text-xs text-muted-foreground">
                                            Komisi default yang diberikan ke affiliate baru saat didaftarkan. Admin dapat mengubah per-affiliate dari halaman detail.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            {/* Hidden fields to satisfy backend validation */}
                            <input type="hidden" name="planner_max_tasks_per_day" defaultValue={settings.planner_max_tasks_per_day} />
                            <input type="hidden" name="platform_fee_percent" defaultValue={settings.platform_fee_percent} />

                            {/* Save button */}
                            <div className="flex items-center gap-4">
                                <Button
                                    type="submit"
                                    disabled={processing}
                                    className="gap-2 rounded-xl bg-blue-600 px-6 hover:bg-blue-700 shadow-sm"
                                >
                                    <Save className="h-4 w-4" />
                                    Simpan Pengaturan
                                </Button>
                                {wasSuccessful && (
                                    <div className="flex items-center gap-1.5 rounded-xl bg-emerald-50 px-3 py-2 text-sm font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
                                        <CheckCircle2 className="h-4 w-4" />
                                        Pengaturan berhasil disimpan
                                    </div>
                                )}
                            </div>
                        </div>
                    )}
                </Form>
            </div>
        </>
    );
}

AdminSettingsIndex.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;
