import Form from '@/components/form/Form';
import FormField from '@/components/form/FormField';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
import { yupResolver } from '@hookform/resolvers/yup';
import { Head, router, usePage } from '@inertiajs/react';
import { ArrowLeft, ChevronRight, Save } from 'lucide-react';
import * as yup from 'yup';

const asFlagNumber = (value: unknown, originalValue: unknown) => {
    if (typeof originalValue === 'boolean') {
        return originalValue ? 1 : 0;
    }

    if (originalValue === '1' || originalValue === 1 || originalValue === 'true') {
        return 1;
    }

    if (originalValue === '0' || originalValue === 0 || originalValue === 'false') {
        return 0;
    }

    return value;
};

// Validation schema
const schema = yup.object({
    country: yup.string().required('Country is required'),
    status: yup.number().transform(asFlagNumber).oneOf([1, 0], 'Invalid status').required('Status is required'),
    is_default: yup.number().transform(asFlagNumber).oneOf([1, 0], 'Invalid default status').required('Default status is required'),
    is_default_website: yup
        .number()
        .transform(asFlagNumber)
        .oneOf([1, 0], 'Invalid default website status')
        .required('Default website status is required'),
});

interface Props {
    language: {
        id: number;
        name: string;
        code: string;
        icon: string | null;
        status: number;
        is_default: number;
        is_default_website: number;
        created_at: string;
        updated_at: string;
    };
}

export default function Edit({ language }: Props) {
    const { errors, countries } = usePage<any>().props;
    console.log(countries);

    console.log('🔍 Language data:', language);
    console.log('🔍 Countries:', countries);

    // Transform countries object to options array
    const countryOptions = countries
        ? Object.entries(countries).map(([code, data]: [string, any]) => ({
              label: `${data.flag} ${data.language} ${data.name}`,
              value: code,
          }))
        : [];

    console.log('🔍 Country Options:', countryOptions);

    const defaultValues = {
        country: language.code || '', // Use existing language code as default country
        status: language.status,
        is_default: language.is_default,
        is_default_website: language.is_default_website,
    };

    console.log('🔍 Default Values:', defaultValues);

    const handleSubmit = (formData: any) => {
        console.log('🚀 ~ Edit handleSubmit ~ formData:', formData);

        const payload: any = { ...formData };

        // Ensure checkbox/select values are sent as numeric flags expected by the backend.
        payload.status = asFlagNumber(payload.status, payload.status);
        payload.is_default = asFlagNumber(payload.is_default, payload.is_default);
        payload.is_default_website = asFlagNumber(payload.is_default_website, payload.is_default_website);

        // Extract country code, name, and flag from selection
        if (payload.country && countries) {
            const selectedCountry = countries[payload.country];
            payload.name = selectedCountry.name; // Country name becomes language name
            payload.code = payload.country; // Country code becomes language code
            payload.icon = selectedCountry.flag; // Flag emoji becomes icon
            delete payload.country; // Remove temporary country field
        }

        // Icon is now just the flag emoji string, no need for file handling

        // Add _method for Laravel to recognize this as PUT
        payload._method = 'PUT';

        console.log('🚀 ~ Final payload to submit:', payload);

        router.post(route('language.update', language.id), payload, {
            forceFormData: true,
            onSuccess: () => {
                console.log('✅ Language updated successfully');
            },
            onError: (errors) => {
                console.error('❌ Form submission errors:', errors);
            },
        });
    };

    return (
        <>
            <Head title={`Edit Language: ${language.name}`} />
            <SettingsLayout tab="platform">
                <div className="mx-auto flex w-full flex-1 flex-col gap-4 p-3 sm:gap-6 sm:p-2">
                    {/* Header Section */}
                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <div className="flex items-start gap-3 sm:gap-4">
                            <Button
                                variant="outline"
                                size="icon"
                                onClick={() => history.back()}
                                className="shrink-0 border-none bg-muted hover:bg-muted/80"
                            >
                                <ArrowLeft className="h-4 w-4" color="black" />
                            </Button>
                            <div>
                                <h1 className="text-xl font-bold tracking-tight sm:text-2xl">Edit Language</h1>
                                <p className="text-sm text-gray-600">Update language information: {language.name}</p>
                            </div>
                        </div>
                        <div className="hidden items-center space-x-2 text-sm text-gray-500 sm:flex">
                            <span>Language</span>
                            <ChevronRight className="h-4 w-4" />
                            <span className="font-medium text-primary">Edit</span>
                        </div>
                    </div>

                    {/* Main content */}
                    <Card className="p-4">
                        <Form
                            key={language.id}
                            resolver={yupResolver(schema)}
                            defaultValues={defaultValues}
                            submitHandler={handleSubmit}
                            externalErrors={errors}
                            className="space-y-6"
                        >
                            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                                <FormField
                                    type="select"
                                    name="country"
                                    label="Country"
                                    placeholder="Select a country"
                                    required
                                    searchable
                                    options={countryOptions}
                                />

                                <FormField
                                    type="select"
                                    name="status"
                                    label="Status"
                                    required
                                    options={[
                                        { label: 'Active', value: 1 },
                                        { label: 'Inactive', value: 0 },
                                    ]}
                                />

                                <FormField type="checkbox" name="is_default" label="Default Language" />

                                <FormField type="checkbox" name="is_default_website" label="Default Website Language" />
                            </div>

                            <div className="mt-6 flex justify-end gap-3">
                                <Button type="button" variant="outline" onClick={() => history.back()}>
                                    Cancel
                                </Button>
                                <Button type="submit">
                                    <Save className="h-4 w-4" />
                                    Update Language
                                </Button>
                            </div>
                        </Form>
                    </Card>
                </div>
            </SettingsLayout>
        </>
    );
}

Edit.layout = (page: React.ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Settings', href: route('settings.company.edit') },
            { title: 'Languages', href: route('language.index') },
            { title: 'Edit', href: '#' },
        ]}
        title="Edit Language"
    >
        {page}
    </AppLayout>
);