import AdminLayout from '@/Layouts/AdminLayout';
import { Head, useForm, Link, router } from '@inertiajs/react';
import { Settings, Save, ArrowLeft, Globe, Clock, Power, ShieldAlert } from 'lucide-react';
import { toast } from 'sonner';

interface Props {
    settings: {
        app_name: string;
        app_url: string;
        timezone: string;
        maintenance_mode: boolean;
    };
}

export default function General({ settings }: Props) {
    const { data, setData, patch, processing } = useForm({
        app_name: settings.app_name,
    });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        // Since we already have updateBranding which handles app_name, we can use that or a new one
        patch(route('admin.settings.branding.update'), {
            onSuccess: () => toast.success('General settings updated'),
        });
    };

    return (
        <AdminLayout>
            <Head title="General Settings" />

            <div className="mb-8">
                <Link 
                    href={route('admin.settings.index')}
                    className="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest text-[#8C92AC] hover:text-ink transition-colors mb-4"
                >
                    <ArrowLeft className="h-3 w-3" />
                    Back to Settings
                </Link>
                <h1 className="font-display text-[1.625rem] font-normal tracking-[-0.02em] text-ink leading-none">
                    General Settings
                </h1>
                <p className="mt-2.5 text-[0.9375rem] text-[#8C92AC]">
                    Manage your platform's global configuration and environment.
                </p>
            </div>

            <div className="max-w-3xl">
                <form onSubmit={submit} className="space-y-6">
                    <div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden">
                        <div className="p-6 border-b border-[#F0EDE8] bg-[#FAFAF8]">
                            <div className="flex items-center gap-3">
                                <Globe className="h-5 w-5 text-accent" />
                                <h2 className="text-[15px] font-bold text-ink">Site Information</h2>
                            </div>
                        </div>
                        <div className="p-6 space-y-6">
                            <div>
                                <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">
                                    Site Title
                                </label>
                                <input 
                                    type="text"
                                    value={data.app_name}
                                    onChange={e => setData('app_name', e.target.value)}
                                    className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all"
                                    placeholder="Altivate Solutions"
                                />
                                <p className="mt-2 text-[12px] text-[#8C92AC]">
                                    This appears in the browser tab and search results.
                                </p>
                            </div>

                            <div>
                                <label className="text-[12px] font-bold text-[#8C92AC] uppercase tracking-wider block mb-2">
                                    Application URL
                                </label>
                                <div className="px-4 py-2.5 bg-[#F5F3EF] border border-[#E8E6DF] rounded-xl text-[14px] text-[#8C92AC] font-mono">
                                    {settings.app_url}
                                </div>
                                <p className="mt-2 text-[12px] text-[#C0BDBA] italic">
                                    Configured in system environment.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div className="bg-white rounded-2xl border border-[#E8E6DF] overflow-hidden">
                        <div className="p-6 border-b border-[#F0EDE8] bg-[#FAFAF8]">
                            <div className="flex items-center gap-3">
                                <Clock className="h-5 w-5 text-accent" />
                                <h2 className="text-[15px] font-bold text-ink">Regional & Time</h2>
                            </div>
                        </div>
                        <div className="p-6">
                            <div className="flex items-center justify-between">
                                <div>
                                    <h4 className="text-[14px] font-semibold text-ink">System Timezone</h4>
                                    <p className="text-[13px] text-[#8C92AC]">{settings.timezone}</p>
                                </div>
                                <span className="px-3 py-1 bg-green-50 text-green-600 rounded-full text-[11px] font-bold uppercase tracking-wider">
                                    Synchronized
                                </span>
                            </div>
                        </div>
                    </div>

                    <div className="bg-red-50/30 rounded-2xl border border-red-100 overflow-hidden">
                        <div className="p-6 border-b border-red-100 bg-red-50/50">
                            <div className="flex items-center gap-3">
                                <ShieldAlert className="h-5 w-5 text-red-600" />
                                <h2 className="text-[15px] font-bold text-red-900">Danger Zone</h2>
                            </div>
                        </div>
                        <div className="p-6">
                            <div className="flex items-center justify-between">
                                <div>
                                    <h4 className="text-[14px] font-semibold text-red-900">Maintenance Mode</h4>
                                    <p className="text-[13px] text-red-700/60">Put the site offline for scheduled maintenance.</p>
                                </div>
                                <button 
                                    type="button"
                                    onClick={() => {
                                        if (confirm(`Are you sure you want to ${settings.maintenance_mode ? 'deactivate' : 'activate'} maintenance mode?`)) {
                                            router.post(route('admin.settings.maintenance.toggle'));
                                        }
                                    }}
                                    className={`px-4 py-2 rounded-xl text-[12px] font-bold uppercase tracking-wider transition-all ${
                                        settings.maintenance_mode 
                                            ? 'bg-red-600 text-white' 
                                            : 'bg-white border border-red-200 text-red-600 hover:bg-red-50'
                                    }`}
                                >
                                    {settings.maintenance_mode ? 'Deactivate' : 'Activate'}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div className="flex justify-end pt-4">
                        <button 
                            type="submit" 
                            disabled={processing}
                            className="w-full sm:w-auto px-10 py-3.5 bg-ink text-white rounded-2xl text-[15px] font-semibold flex items-center justify-center gap-2 hover:bg-accent transition-all shadow-lg shadow-ink/10 active:scale-[0.98] disabled:opacity-50"
                        >
                            <Save className="h-4 w-4" />
                            {processing ? 'Saving...' : 'Save General Settings'}
                        </button>
                    </div>
                </form>
            </div>
        </AdminLayout>
    );
}
