'use client';
import Form from '@admin/components/form/Form';
import FormField from '@admin/components/form/FormField';
import { Button } from '@admin/components/ui/button';
import { zodResolver } from '@hookform/resolvers/zod';
import { Plus } from 'lucide-react';
import React, { useEffect, useMemo, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import PhoneInput from 'react-phone-number-input';
import 'react-phone-number-input/style.css';
import { route } from 'ziggy-js';
import { z } from 'zod';

const CustomPhoneInput = React.memo((props: any) => (
    <input
        {...props}
        className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
        autoComplete="tel"
    />
));

const PhoneInputField = ({ serverError }: { serverError?: string }) => {
    const { watch, setValue } = useFormContext();
    const phoneValue = watch('primary_phone');

    const handlePhoneChange = (value: string | undefined) => {
        setValue('primary_phone', value || '', {
            shouldDirty: true,
            shouldTouch: true,
            shouldValidate: false,
        });
    };

    return (
        <div className="space-y-2">
            <label className="block text-sm font-medium text-gray-700">Phone Number</label>

            <PhoneInput
                international
                countryCallingCodeEditable={false}
                value={phoneValue || ''}
                onChange={handlePhoneChange}
                defaultCountry="US"
                placeholder="Enter phone number"
                className={`w-full ${serverError ? 'border-red-500' : ''}`}
                inputComponent={CustomPhoneInput}
                onBlur={() => {
                    setValue('primary_phone', phoneValue || '', { shouldValidate: true });
                }}
                style={
                    {
                        '--PhoneInputCountryFlag-height': '1em',
                        '--PhoneInput-color--focus': '#3b82f6',
                    } as any
                }
            />
            {serverError && <p className="text-sm text-red-500">{serverError}</p>}
        </div>
    );
};

// Login checkbox component that uses form context
const LoginCheckboxField = () => {
    const { watch, setValue } = useFormContext();
    const isLoginEnabled = watch('is_login');

    return (
        <div className="space-y-4">
            <label className="flex items-center space-x-2">
                <input
                    type="checkbox"
                    className="h-4 w-4 rounded border-gray-300"
                    checked={isLoginEnabled || false}
                    onChange={(e) => {
                        setValue('is_login', e.target.checked, { shouldValidate: false });
                        // Clear password if disabling login
                        if (!e.target.checked) {
                            setValue('password', '', { shouldValidate: false });
                        }
                    }}
                />
                <span className="text-sm text-gray-700">Allow login access</span>
            </label>

            {isLoginEnabled && <FormField name="password" label="Password" type="password" placeholder="Enter password for login access" required />}
        </div>
    );
};

export type ContactFormValues = z.infer<typeof ContactFormSchema>;

export type NormalizedContactPayload = {
    name: string;
    email: string;
    phone: string;
};

interface ContactFormProps {
    mode: 'add' | 'edit';
    initialContact?: any;
    onSubmitContact: (payload: NormalizedContactPayload) => void;
    onCancel?: () => void;
    className?: string;
    title?: string;
    appName?: string;
    serverErrors?: Record<string, string>;
}

const ContactFormSchema = z.object({
    name: z.string().min(3, 'Name must be at least 3 characters'),
    primary_email: z.string().email('Please enter a valid email').min(1, 'Email is required'),
    primary_phone: z.string().optional().or(z.literal('')),
    country_code: z.string().optional().or(z.literal('')),
    is_login: z.boolean().optional(),
    password: z.string().optional().or(z.literal('')),
    app_name: z.string().min(1, 'App name is required'),
    source: z.string().min(1, 'Source is required'),
    assigned_to: z
        .array(z.union([z.number(), z.string()]))
        .optional()
        .default([]),
    contact_owner: z.union([z.number(), z.string()]).optional().nullable(),
    type: z.number().default(1),
    category: z.number().default(1),
    status: z.number().default(1),
});

export default function ContactForm({
    mode,
    initialContact,
    onSubmitContact,
    onCancel,
    className,
    title = 'Contact',
    appName = 'main',
    serverErrors = {},
}: ContactFormProps) {
    console.log('🚀 ~ ContactForm ~ initialContact:', initialContact);
    const [users, setUsers] = useState<Array<{ label: string; value: number }>>([]);

    // Fetch users for assignment dropdowns
    useEffect(() => {
        const fetchUsers = async () => {
            try {
                const response = await fetch(route('users.api'));

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                console.log('🚀 ~ fetchUsers ~ result:', result);

                if (result.success) {
                    console.log('🚀 ~ Setting users data:', result.data);
                    setUsers(result.data);
                } else {
                    console.error('Failed to fetch users:', result.message);
                }
            } catch (error) {
                console.error('Failed to fetch users:', error);
            }
        };
        fetchUsers();
    }, []);

    const defaultValues = useMemo(() => {
        // Debug: Log the initial contact data to see the structure
        console.log('🚀 ~ ContactForm ~ initialContact:', initialContact);
        console.log('🚀 ~ ContactForm ~ initialContact?.assigned_users:', initialContact?.assigned_users);
        console.log('🚀 ~ ContactForm ~ initialContact?.manager:', initialContact?.manager);

        // Handle both possible data structures: assigned_users (from API) or assigned_to (legacy)
        const assignedData = initialContact?.assigned_users || initialContact?.assigned_to || [];
        const assignedUserIds = Array.isArray(assignedData) ? assignedData.map((user: any) => String(user.id)) : [];

        // Handle both possible data structures: manager (from API) or owner (legacy)
        const ownerData = initialContact?.manager || initialContact?.owner;
        const contactOwnerId = ownerData?.id ? String(ownerData.id) : null;

        console.log('🚀 ~ Extracted assignedUserIds:', assignedUserIds);
        console.log('🚀 ~ Extracted contactOwnerId:', contactOwnerId);

        return {
            name: initialContact?.name || '',
            primary_email: initialContact?.primary_email || '',
            primary_phone: initialContact?.primary_phone || '',
            country_code: initialContact?.country_code || '',
            is_login: initialContact?.is_login || false,
            password: '',
            app_name: appName || 'main',
            source: initialContact?.source || 'lead',
            // Extract assigned user IDs from assigned_users array
            assigned_to: assignedUserIds,
            // Extract contact owner ID from manager object
            contact_owner: contactOwnerId,
            type: initialContact?.type ?? 1,
            category: initialContact?.category ?? 1,
            status: initialContact?.status ?? 1, // Use ?? to allow 0 (inactive) status
        };
    }, [initialContact, appName]);

    const resolver = zodResolver(ContactFormSchema);

    const handleSubmit = async (values: ContactFormValues) => {
        const payload: any = {
            name: values.name,
            primary_email: values.primary_email || '',
            primary_phone: values.primary_phone || '',
            is_login: values.is_login || false,
            password: values.is_login ? values.password || '' : '',
            app_name: values.app_name || appName || 'main',
            source: values.source || 'lead',
            // Keep as strings to match Edit page behavior - backend handles conversion
            assigned_to: Array.isArray(values.assigned_to) ? values.assigned_to.map((id) => String(id)) : [],
            contact_owner: values.contact_owner ? String(values.contact_owner) : null,
            type: values.type ?? 1,
            category: values.category ?? 1,
            status: values.status ?? 1, // Use ?? to allow 0 (inactive) status
        };
        // console.log('🚀 ~ handleSubmit ~ payload:', payload);

        onSubmitContact(payload);
    };

    console.log('🚀 ~ ContactForm ~ Final defaultValues:', defaultValues);
    console.log('🚀 ~ ContactForm ~ Users options:', users);

    return (
        <div className={['space-y-6 p-2', className].filter(Boolean).join(' ')}>
            <Form submitHandler={handleSubmit} defaultValues={defaultValues} formClassNames="space-y-6" resolver={resolver}>
                <div>
                    <FormField name="name" label="Name" type="text" placeholder="e.g. John Smith" required />
                    {serverErrors.name && <p className="mt-1 text-sm text-red-500">{serverErrors.name}</p>}
                </div>

                <div>
                    <FormField name="primary_email" label="Primary Email" type="email" placeholder="e.g. john@example.com" required />
                    {serverErrors.primary_email && <p className="mt-1 text-sm text-red-500">{serverErrors.primary_email}</p>}
                </div>

                <PhoneInputField serverError={serverErrors.primary_phone} />

                <div className="grid grid-cols-2 gap-2">
                    <FormField
                        name="source"
                        label="Source"
                        type="select"
                        options={[
                            { label: 'Lead', value: 'lead' },
                            { label: 'Direct', value: 'direct' },
                            { label: 'Referral', value: 'referral' },
                            { label: 'Official', value: 'official' },
                            { label: 'Website', value: 'website' },
                            { label: 'Facebook', value: 'facebook' },
                        ]}
                        placeholder="Select source"
                    />
                    <FormField
                        name="status"
                        label="Status"
                        type="select"
                        options={[
                            { label: 'Active', value: 1 },
                            { label: 'Inactive', value: 0 },
                        ]}
                        className="h-10"
                    />
                </div>

                <div className="grid grid-cols-2 gap-2">
                    <FormField
                        name="assigned_to"
                        label="Assigned To"
                        type="multiselect"
                        options={users.length > 0 ? users : []}
                        placeholder="Select users"
                    />
                    <FormField
                        name="contact_owner"
                        label="Contact Owner"
                        type="select"
                        options={users.length > 0 ? users : []}
                        placeholder="Select owner"
                    />
                </div>

                <div className="grid grid-cols-2 gap-2">
                    <FormField
                        name="type"
                        label="Contact Type"
                        type="select"
                        options={[
                            { label: 'Individual', value: 1 },
                            { label: 'Company', value: 2 },
                        ]}
                        placeholder="Select type"
                    />

                    <FormField
                        name="category"
                        label="Contact Category"
                        type="select"
                        options={[
                            { label: 'General', value: 1 },
                            { label: 'Customer', value: 2 },
                            { label: 'Supplier', value: 3 },
                            { label: 'Partner', value: 4 },
                        ]}
                        placeholder="Select category"
                    />
                </div>

                <LoginCheckboxField />

                <div className="flex justify-end gap-3">
                    {onCancel && (
                        <Button variant="outline" type="button" onClick={onCancel}>
                            Cancel
                        </Button>
                    )}
                    <Button className="hover:bg-success-800 bg-success text-white" type="submit">
                        <Plus className="h-4 w-4" />
                        {mode === 'add' ? 'Add Contact' : 'Save Contact'}
                    </Button>
                </div>
            </Form>
        </div>
    );
}