import { Head, useForm } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Settings, Globe, Shield, Wrench, Save, Info } from "lucide-react";

interface PlatformSettings {
    app_name: string;
    support_email: string | null;
    support_phone: string | null;
    timezone: string;
    currency: string;
    default_trial_days: number;
    registration_enabled: boolean;
    maintenance_mode: boolean;
}

interface Props {
    settings: PlatformSettings;
}

export default function PlatformSettingsPage({ settings }: Props) {
    const form = useForm({
        app_name: settings.app_name ?? "",
        support_email: settings.support_email ?? "",
        support_phone: settings.support_phone ?? "",
        timezone: settings.timezone ?? "Asia/Jakarta",
        currency: settings.currency ?? "IDR",
        default_trial_days: settings.default_trial_days ?? 14,
        registration_enabled: settings.registration_enabled ?? true,
        maintenance_mode: settings.maintenance_mode ?? false,
    });

    const submit = (event: React.FormEvent) => {
        event.preventDefault();
        form.put("/platform/settings", { preserveScroll: true });
    };

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Pengaturan Platform", href: "/platform/settings" },
            ]}
        >
            <Head title="Pengaturan Platform" />

            <div className="crm-page space-y-6 pb-10">
                {/* Header Section */}
                <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <div>
                        <div className="flex items-center gap-2">
                            <span className="flex h-2 w-2 rounded-full bg-indigo-500 animate-pulse" />
                            <span className="text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
                                System Configuration & Controls
                            </span>
                        </div>
                        <h1 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-slate-50 sm:text-3xl mt-1">
                            Pengaturan Platform
                        </h1>
                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                            Kelola identitas global, parameter operasional, dan
                            perilaku aplikasi SaaS secara terpusat.
                        </p>
                    </div>

                    <Button
                        onClick={submit}
                        disabled={form.processing}
                        className="rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs shadow-sm self-start md:self-auto gap-2"
                    >
                        <Save className="size-4" />
                        {form.processing ? "Menyimpan..." : "Simpan Perubahan"}
                    </Button>
                </div>

                <form onSubmit={submit} className="grid gap-6 lg:grid-cols-3">
                    {/* Identitas Platform */}
                    <Card className="lg:col-span-2 rounded-2xl border-slate-200/80 bg-white shadow-2xs dark:border-slate-800 dark:bg-slate-900 overflow-hidden">
                        <CardHeader className="border-b border-slate-100 dark:border-slate-800 pb-4 bg-slate-50/50 dark:bg-slate-800/50">
                            <div className="flex items-center gap-2">
                                <Globe className="size-4 text-indigo-600 dark:text-indigo-400" />
                                <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                                    Identitas Platform
                                </CardTitle>
                            </div>
                            <CardDescription className="text-xs text-slate-500 dark:text-slate-400">
                                Informasi yang digunakan sebagai identitas utama
                                aplikasi dan kontak bantuan pelanggan.
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="p-6 grid gap-5 md:grid-cols-2">
                            <div className="grid gap-2 md:col-span-2">
                                <Label
                                    htmlFor="app_name"
                                    className="text-xs font-bold text-slate-700 dark:text-slate-300"
                                >
                                    Nama Aplikasi
                                </Label>
                                <Input
                                    id="app_name"
                                    className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs font-medium"
                                    value={form.data.app_name}
                                    onChange={(e) =>
                                        form.setData("app_name", e.target.value)
                                    }
                                />
                                {form.errors.app_name && (
                                    <p className="text-xs text-rose-500 font-medium">
                                        {form.errors.app_name}
                                    </p>
                                )}
                            </div>

                            <div className="grid gap-2">
                                <Label
                                    htmlFor="support_email"
                                    className="text-xs font-bold text-slate-700 dark:text-slate-300"
                                >
                                    Email Support
                                </Label>
                                <Input
                                    id="support_email"
                                    type="email"
                                    className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs font-medium"
                                    value={form.data.support_email ?? ""}
                                    onChange={(e) =>
                                        form.setData(
                                            "support_email",
                                            e.target.value,
                                        )
                                    }
                                    placeholder="support@contoh.com"
                                />
                                {form.errors.support_email && (
                                    <p className="text-xs text-rose-500 font-medium">
                                        {form.errors.support_email}
                                    </p>
                                )}
                            </div>

                            <div className="grid gap-2">
                                <Label
                                    htmlFor="support_phone"
                                    className="text-xs font-bold text-slate-700 dark:text-slate-300"
                                >
                                    Telepon Support
                                </Label>
                                <Input
                                    id="support_phone"
                                    className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs font-medium"
                                    value={form.data.support_phone ?? ""}
                                    onChange={(e) =>
                                        form.setData(
                                            "support_phone",
                                            e.target.value,
                                        )
                                    }
                                    placeholder="08xxxxxxxxxx"
                                />
                                {form.errors.support_phone && (
                                    <p className="text-xs text-rose-500 font-medium">
                                        {form.errors.support_phone}
                                    </p>
                                )}
                            </div>

                            <div className="grid gap-2">
                                <Label
                                    htmlFor="timezone"
                                    className="text-xs font-bold text-slate-700 dark:text-slate-300"
                                >
                                    Timezone
                                </Label>
                                <Input
                                    id="timezone"
                                    className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs font-medium"
                                    value={form.data.timezone}
                                    onChange={(e) =>
                                        form.setData("timezone", e.target.value)
                                    }
                                    placeholder="Asia/Jakarta"
                                />
                                {form.errors.timezone && (
                                    <p className="text-xs text-rose-500 font-medium">
                                        {form.errors.timezone}
                                    </p>
                                )}
                            </div>

                            <div className="grid gap-2">
                                <Label
                                    htmlFor="currency"
                                    className="text-xs font-bold text-slate-700 dark:text-slate-300"
                                >
                                    Mata Uang
                                </Label>
                                <Input
                                    id="currency"
                                    maxLength={3}
                                    className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs font-mono font-medium uppercase"
                                    value={form.data.currency}
                                    onChange={(e) =>
                                        form.setData(
                                            "currency",
                                            e.target.value.toUpperCase(),
                                        )
                                    }
                                    placeholder="IDR"
                                />
                                {form.errors.currency && (
                                    <p className="text-xs text-rose-500 font-medium">
                                        {form.errors.currency}
                                    </p>
                                )}
                            </div>
                        </CardContent>
                    </Card>

                    {/* Operasional */}
                    <Card className="rounded-2xl border-slate-200/80 bg-white shadow-2xs dark:border-slate-800 dark:bg-slate-900 overflow-hidden flex flex-col">
                        <CardHeader className="border-b border-slate-100 dark:border-slate-800 pb-4 bg-slate-50/50 dark:bg-slate-800/50">
                            <div className="flex items-center gap-2">
                                <Shield className="size-4 text-emerald-600 dark:text-emerald-400" />
                                <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                                    Operasional
                                </CardTitle>
                            </div>
                            <CardDescription className="text-xs text-slate-500 dark:text-slate-400">
                                Atur perilaku global pendaftaran dan masa trial.
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="p-6 grid gap-5 flex-1">
                            <div className="grid gap-2">
                                <Label
                                    htmlFor="default_trial_days"
                                    className="text-xs font-bold text-slate-700 dark:text-slate-300"
                                >
                                    Trial Default (Hari)
                                </Label>
                                <Input
                                    id="default_trial_days"
                                    type="number"
                                    min={0}
                                    max={365}
                                    className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs font-medium"
                                    value={form.data.default_trial_days}
                                    onChange={(e) =>
                                        form.setData(
                                            "default_trial_days",
                                            Number(e.target.value),
                                        )
                                    }
                                />
                                {form.errors.default_trial_days && (
                                    <p className="text-xs text-rose-500 font-medium">
                                        {form.errors.default_trial_days}
                                    </p>
                                )}
                            </div>

                            <label className="flex items-start gap-3 rounded-xl border border-slate-200/80 bg-slate-50/30 p-3.5 dark:border-slate-800 dark:bg-slate-800/20 cursor-pointer transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
                                <Checkbox
                                    className="mt-0.5 rounded-md"
                                    checked={form.data.registration_enabled}
                                    onCheckedChange={(checked) =>
                                        form.setData(
                                            "registration_enabled",
                                            checked === true,
                                        )
                                    }
                                />
                                <span className="grid gap-0.5">
                                    <span className="text-xs font-bold text-slate-900 dark:text-slate-100">
                                        Pendaftaran Perusahaan
                                    </span>
                                    <span className="text-[11px] text-slate-500 dark:text-slate-400">
                                        Izinkan calon pelanggan membuat tenant
                                        baru.
                                    </span>
                                </span>
                            </label>

                            <label className="flex items-start gap-3 rounded-xl border border-slate-200/80 bg-slate-50/30 p-3.5 dark:border-slate-800 dark:bg-slate-800/20 cursor-pointer transition hover:bg-slate-50 dark:hover:bg-slate-800/50">
                                <Checkbox
                                    className="mt-0.5 rounded-md"
                                    checked={form.data.maintenance_mode}
                                    onCheckedChange={(checked) =>
                                        form.setData(
                                            "maintenance_mode",
                                            checked === true,
                                        )
                                    }
                                />
                                <span className="grid gap-0.5">
                                    <span className="text-xs font-bold text-slate-900 dark:text-slate-100">
                                        Maintenance Mode
                                    </span>
                                    <span className="text-[11px] text-slate-500 dark:text-slate-400">
                                        Tandai platform sedang dalam
                                        pemeliharaan.
                                    </span>
                                </span>
                            </label>

                            <div className="rounded-xl bg-indigo-50/50 border border-indigo-100 dark:bg-indigo-950/20 dark:border-indigo-900/30 p-3.5 text-xs text-indigo-700 dark:text-indigo-300 flex items-start gap-2.5">
                                <Info className="size-4 shrink-0 mt-0.5" />
                                <div>
                                    Disimpan pada sistem perusahaan{" "}
                                    <strong className="font-bold">
                                        PLATFORM
                                    </strong>{" "}
                                    agar terisolasi dari konfigurasi tenant.
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    {/* Catatan / Catatan Teknis */}
                    <Card className="lg:col-span-3 rounded-2xl border-slate-200/80 bg-white shadow-2xs dark:border-slate-800 dark:bg-slate-900 overflow-hidden">
                        <CardHeader className="border-b border-slate-100 dark:border-slate-800 pb-4 bg-slate-50/50 dark:bg-slate-800/50">
                            <div className="flex items-center gap-2">
                                <Wrench className="size-4 text-amber-600 dark:text-amber-400" />
                                <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                                    Catatan & Catatan Teknis
                                </CardTitle>
                            </div>
                            <CardDescription className="text-xs text-slate-500 dark:text-slate-400">
                                Status middleware pemblokiran akses global dan
                                catatan pengembangan.
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="p-6">
                            <Textarea
                                value="Gunakan maintenance mode setelah mekanisme pengecualian Platform Owner dan halaman maintenance publik sudah tersedia."
                                readOnly
                                className="min-h-20 rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs font-mono text-slate-600 dark:text-slate-300 resize-none"
                            />
                        </CardContent>
                    </Card>

                    {/* Submit Bar Bottom */}
                    <div className="lg:col-span-3 flex justify-end pt-2">
                        <Button
                            type="submit"
                            disabled={form.processing}
                            className="rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs shadow-sm h-10 px-6 gap-2"
                        >
                            <Save className="size-4" />
                            {form.processing
                                ? "Menyimpan..."
                                : "Simpan Pengaturan Platform"}
                        </Button>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}
