import { Alert, AlertDescription } from '@admin/components/ui/alert';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card';
import { zodResolver } from '@hookform/resolvers/zod';
import { Head, router } from '@inertiajs/react';
import { Globe, Lock, Save, Server, Settings, Link as LinkIcon, Shield, Info, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import { z } from 'zod';
import Form from '@admin/components/form/Form';
import FormField from '@admin/components/form/FormField';
import { useState } from 'react';

export interface SaasAppInstance {
    id: number;
    uid: string;
    name: string;
    slug: string;
    url: string;
    host?: string;
    port?: number;
    type: 'public' | 'private';
    status: number;
    is_default: boolean;
    description?: string;
    settings?: {
        api_key?: string;
        api_secret?: string;
        webhook_url?: string;
        max_tenants?: number;
        features?: string[];
    };
    metadata?: Record<string, unknown>;
    created_at: string;
    updated_at: string;
}

interface SaasAppInstanceFormProps {
    readonly saasAppInstance?: SaasAppInstance;
    readonly statuses?: { label: string; value: number }[];
    readonly types?: { label: string; value: string }[];
    readonly error?: string;
    readonly errors?: Record<string, string>;
    readonly isEdit?: boolean;
}

const saasAppInstanceSchema = z.object({
    // Basic Information
    name: z.string().min(1, 'Instance name is required'),
    url: z.string().url('Please enter a valid URL').min(1, 'URL is required'),
    host: z.string().optional(),
    port: z.string().optional(),
    type: z.string().min(1, 'Instance type is required'),
    status: z.preprocess((val) => (typeof val === 'number' ? val.toString() : val), z.string().min(1, 'Status is required')),
    is_default: z.boolean().optional(),

    // Description
    description: z.string().optional(),

    // Settings
    settings: z.object({
        api_key: z.string().optional(),
        api_secret: z.string().optional(),
        webhook_url: z.string().url('Please enter a valid webhook URL').optional().or(z.literal('')),
        max_tenants: z.string().optional(),
        features: z.array(z.string()).optional(),
    }).optional(),

    // Metadata
    metadata: z.record(z.unknown()).optional(),
});

export type SaasAppInstanceFormData = z.infer<typeof saasAppInstanceSchema>;

export default function SaasAppInstanceForm({
    saasAppInstance,
    statuses = [],
    types = [],
    error,
    errors: serverErrors,
    isEdit = false,
}: SaasAppInstanceFormProps) {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const defaultValues: Partial<SaasAppInstanceFormData> = {
        name: saasAppInstance?.name || '',
        url: saasAppInstance?.url || '',
        host: saasAppInstance?.host || '',
        port: saasAppInstance?.port?.toString() || '',
        type: saasAppInstance?.type || 'public',
        status: saasAppInstance?.status?.toString() || '1',
        is_default: saasAppInstance?.is_default || false,
        description: saasAppInstance?.description || '',
        settings: {
            api_key: saasAppInstance?.settings?.api_key || '',
            api_secret: saasAppInstance?.settings?.api_secret || '',
            webhook_url: saasAppInstance?.settings?.webhook_url || '',
            max_tenants: saasAppInstance?.settings?.max_tenants?.toString() || '',
            features: saasAppInstance?.settings?.features || [],
        },
        metadata: saasAppInstance?.metadata || {},
    };

    const handleSubmit = (data: SaasAppInstanceFormData) => {
        const payload = {
            name: data.name,
            url: data.url,
            host: data.host || null,
            port: data.port ? parseInt(data.port) : null,
            type: data.type,
            status: parseInt(data.status) || 1,
            is_default: data.is_default || false,
            description: data.description || null,
            settings: {
                api_key: data.settings?.api_key || null,
                api_secret: data.settings?.api_secret || null,
                webhook_url: data.settings?.webhook_url || null,
                max_tenants: data.settings?.max_tenants ? parseInt(data.settings.max_tenants) : null,
                features: data.settings?.features || [],
            },
            metadata: data.metadata || {},
        };

        setIsSubmitting(true);

        if (isEdit && saasAppInstance) {
            router.put(`/admin/saas-app-instances/${saasAppInstance.id}`, payload, {
                preserveScroll: true,
                onBefore: () => {
                    setIsSubmitting(true);
                },
                onFinish: () => {
                    setIsSubmitting(false);
                },
                onSuccess: () => {
                    toast.success('Application instance updated successfully');
                },
                onError: (errors) => {
                    console.error('Failed to update instance:', errors);
                    toast.error('Failed to update application instance');
                },
            });
        } else {
            router.post('/admin/saas-app-instances', payload, {
                preserveScroll: true,
                onBefore: () => {
                    setIsSubmitting(true);
                },
                onFinish: () => {
                    setIsSubmitting(false);
                },
                onSuccess: () => {
                    toast.success('Application instance created successfully');
                },
                onError: (errors) => {
                    console.error('Failed to create instance:', errors);
                    toast.error('Failed to create application instance');
                },
            });
        }
    };

    return (
        <>
            <Head title={isEdit ? 'Edit Application Instance' : 'Create Application Instance'} />
            <Card className="overflow-hidden border-0 shadow-lg">
                {error && (
                    <div className="m-6 mb-0">
                        <Alert variant="destructive">
                            <AlertDescription>{error}</AlertDescription>
                        </Alert>
                    </div>
                )}

                <div className="p-6">
                    <Form
                        id="saas-app-instance-form"
                        submitHandler={handleSubmit}
                        defaultValues={defaultValues}
                        resolver={zodResolver(saasAppInstanceSchema)}
                        externalErrors={serverErrors}
                    >
                        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
                            {/* Left Column - Main Information */}
                            <div className="space-y-6 lg:col-span-2">
                                {/* Basic Information */}
                                <Card className="overflow-hidden border-0 shadow-lg">
                                    <CardHeader className="border-b bg-gradient-to-r from-blue-50 via-indigo-50 to-blue-50 px-6 py-5">
                                        <div className="flex items-center gap-3">
                                            <div className="rounded-xl bg-blue-500 p-2.5 shadow-md">
                                                <Server className="h-5 w-5 text-white" />
                                            </div>
                                            <div>
                                                <CardTitle className="text-lg font-bold text-gray-900">Instance Information</CardTitle>
                                                <p className="text-xs text-gray-600">Basic configuration for the SaaS application instance</p>
                                            </div>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="p-6">
                                        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                                            <FormField
                                                name="name"
                                                type="text"
                                                label="Instance Name"
                                                placeholder="Production Instance"
                                                required
                                            />
                                            <FormField
                                                name="url"
                                                type="url"
                                                label="Instance URL"
                                                placeholder="https://app.example.com"
                                                required
                                            />
                                            <FormField
                                                name="host"
                                                type="text"
                                                label="Host"
                                                placeholder="app.example.com"
                                            />
                                            <FormField
                                                name="port"
                                                type="text"
                                                label="Port"
                                                placeholder="443"
                                            />
                                        </div>
                                        <div className="mt-4">
                                            <FormField
                                                name="description"
                                                type="textarea"
                                                label="Description"
                                                placeholder="Enter a description for this instance..."
                                                rows={3}
                                            />
                                        </div>
                                    </CardContent>
                                </Card>

                                {/* Instance Type & Status */}
                                <Card className="overflow-hidden border-0 shadow-lg">
                                    <CardHeader className="border-b bg-gradient-to-r from-indigo-50 via-purple-50 to-indigo-50 px-6 py-5">
                                        <div className="flex items-center gap-3">
                                            <div className="rounded-xl bg-indigo-500 p-2.5 shadow-md">
                                                <Settings className="h-5 w-5 text-white" />
                                            </div>
                                            <div>
                                                <CardTitle className="text-lg font-bold text-gray-900">Type & Status</CardTitle>
                                                <p className="text-xs text-gray-600">Configure instance type and availability</p>
                                            </div>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="p-6">
                                        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                                            <FormField
                                                name="type"
                                                type="select"
                                                label="Instance Type"
                                                required
                                                options={[
                                                    { value: 'public', label: 'Public' },
                                                    { value: 'private', label: 'Private' },
                                                ]}
                                            />
                                            <FormField
                                                name="status"
                                                type="select"
                                                label="Status"
                                                required
                                                options={statuses.length > 0 ? statuses : [
                                                    { value: '1', label: 'Active' },
                                                    { value: '0', label: 'Inactive' },
                                                ]}
                                            />
                                        </div>
                                        <div className="mt-4">
                                            <FormField
                                                name="is_default"
                                                type="checkbox"
                                                label="Set as default instance"
                                                description="This will be the primary instance used for new tenants"
                                            />
                                        </div>
                                    </CardContent>
                                </Card>
                            </div>

                            {/* Right Column - Settings & Configuration */}
                            <div className="space-y-6">
                                {/* API Configuration */}
                                <Card className="overflow-hidden border-0 shadow-lg">
                                    <CardHeader className="border-b bg-gradient-to-r from-amber-50 via-yellow-50 to-amber-50 px-6 py-5">
                                        <div className="flex items-center gap-3">
                                            <div className="rounded-xl bg-amber-500 p-2.5 shadow-md">
                                                <Shield className="h-5 w-5 text-white" />
                                            </div>
                                            <div>
                                                <CardTitle className="text-lg font-bold text-gray-900">API Configuration</CardTitle>
                                                <p className="text-xs text-gray-600">API credentials for instance communication</p>
                                            </div>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="space-y-5 p-6">
                                        <FormField
                                            name="settings.api_key"
                                            type="text"
                                            label="API Key"
                                            placeholder="Enter API key"
                                        />
                                        <FormField
                                            name="settings.api_secret"
                                            type="password"
                                            label="API Secret"
                                            placeholder="Enter API secret"
                                        />
                                        <FormField
                                            name="settings.webhook_url"
                                            type="url"
                                            label="Webhook URL"
                                            placeholder="https://webhook.example.com"
                                        />
                                        <Alert variant="default" className="bg-blue-50 border-blue-200">
                                            <Info className="h-4 w-4 text-blue-600" />
                                            <AlertDescription className="text-xs text-blue-700">
                                                API credentials are encrypted and should be kept secure.
                                            </AlertDescription>
                                        </Alert>
                                    </CardContent>
                                </Card>

                                {/* Limits & Features */}
                                <Card className="overflow-hidden border-0 shadow-lg">
                                    <CardHeader className="border-b bg-gradient-to-r from-green-50 via-emerald-50 to-green-50 px-6 py-5">
                                        <div className="flex items-center gap-3">
                                            <div className="rounded-xl bg-green-500 p-2.5 shadow-md">
                                                <LinkIcon className="h-5 w-5 text-white" />
                                            </div>
                                            <div>
                                                <CardTitle className="text-lg font-bold text-gray-900">Limits & Features</CardTitle>
                                                <p className="text-xs text-gray-600">Configure instance limits</p>
                                            </div>
                                        </div>
                                    </CardHeader>
                                    <CardContent className="space-y-5 p-6">
                                        <FormField
                                            name="settings.max_tenants"
                                            type="text"
                                            label="Max Tenants"
                                            placeholder="0 for unlimited"
                                        />
                                        <Alert variant="default" className="bg-gray-50 border-gray-200">
                                            <Info className="h-4 w-4 text-gray-600" />
                                            <AlertDescription className="text-xs text-gray-600">
                                                Set to 0 for unlimited tenants.
                                            </AlertDescription>
                                        </Alert>
                                    </CardContent>
                                </Card>
                            </div>
                        </div>
                    </Form>
                </div>

                {/* Action Buttons */}
                <div className="flex items-center justify-end gap-3 rounded-lg border-t bg-white p-6 shadow-sm">
                    <Button
                        variant="secondary"
                        size="lg"
                        className="border border-gray-300 bg-white px-6 font-semibold text-gray-700 shadow-sm hover:bg-gray-100"
                        onClick={() => router.visit(route('admin.saas_app_instances.index'))}
                        disabled={isSubmitting}
                    >
                        Cancel
                    </Button>
                    <Button
                        type="submit"
                        form="saas-app-instance-form"
                        variant="default"
                        size="lg"
                        className="flex items-center gap-2 bg-blue-600 px-8 font-bold text-white shadow-md hover:bg-blue-700"
                        disabled={isSubmitting}
                    >
                        {isSubmitting ? (
                            <>
                                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                                Saving...
                            </>
                        ) : (
                            <>
                                <Save className="mr-2 h-5 w-5" />
                                {isEdit ? 'Save Changes' : 'Create Application Instance'}
                            </>
                        )}
                    </Button>
                </div>

            </Card>
        </>
    );
}