import Form from '@admin/components/form/Form';
import FormField from '@admin/components/form/FormField';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@admin/components/ui/card';
import { yupResolver } from '@hookform/resolvers/yup';
import { SubmitHandler } from 'react-hook-form';
import * as yup from 'yup';

// Sample data and validation schema
const schema = yup.object({
    // Text fields
    firstName: yup.string().required('First name is required'),
    email: yup.string().email('Invalid email').required('Email is required'),
    phone: yup.string(),
    website: yup.string().url('Invalid URL'),
    age: yup.number().min(0).max(120),

    // Password
    password: yup.string().min(8, 'Password must be at least 8 characters'),

    // Textarea
    bio: yup.string().max(500, 'Bio must be less than 500 characters'),

    // Select
    country: yup.string().required('Country is required'),

    // Multi-select
    skills: yup.array().of(yup.string()).min(1, 'Select at least one skill'),
    // Searchable multiselect
    tags: yup.array().of(yup.string()),

    // Radio
    gender: yup.string().required('Gender is required'),

    // Boolean fields
    newsletter: yup.boolean(),
    isActive: yup.boolean(),

    // Date fields
    birthDate: yup.string(),
    appointmentDateTime: yup.string(),
    preferredTime: yup.string(),

    // File uploads
    attachments: yup.mixed(),

    // Search
    searchQuery: yup.string(),

    // OTP
    verificationCode: yup.string().length(6, 'Verification code must be 6 digits'),
});

const defaultValues = {
    firstName: '',
    email: '',
    phone: '',
    website: '',
    age: '',
    password: '',
    bio: '',
    country: '',
    skills: [],
    tags: [],
    gender: '',
    newsletter: false,
    isActive: false,
    birthDate: '',
    appointmentDateTime: '',
    preferredTime: '',
    searchQuery: '',
    verificationCode: '',
};

// Sample options
const countryOptions = [
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'au', label: 'Australia' },
];

const skillOptions = [
    { value: 'javascript', label: 'JavaScript' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'react', label: 'React' },
    { value: 'nodejs', label: 'Node.js' },
    { value: 'python', label: 'Python' },
    { value: 'php', label: 'PHP' },
];

const genderOptions = [
    { value: 'male', label: 'Male' },
    { value: 'female', label: 'Female' },
    { value: 'other', label: 'Other' },
    { value: 'prefer-not-to-say', label: 'Prefer not to say' },
];

const searchSuggestions = ['React development', 'Vue.js framework', 'Angular tutorial', 'Node.js backend', 'TypeScript guide'];

const tagOptions = [
    { value: 'frontend', label: 'Frontend' },
    { value: 'backend', label: 'Backend' },
    { value: 'devops', label: 'DevOps' },
    { value: 'design', label: 'Design' },
    { value: 'qa', label: 'QA' },
];

const FormFieldExamples = () => {
    const handleSubmit: SubmitHandler<any> = async (data) => {
        console.log('Form data:', data);
        // Handle form submission
    };

    return (
        <div className="container mx-auto py-8">
            <Card className="mx-auto max-w-4xl">
                <CardHeader>
                    <CardTitle>Form Field Examples</CardTitle>
                    <CardDescription>Examples of all available form field types using the FormField component.</CardDescription>
                </CardHeader>
                <CardContent>
                    <Form submitHandler={handleSubmit} resolver={yupResolver(schema)} defaultValues={defaultValues}>
                        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                            {/* Text Fields */}
                            <FormField type="text" name="firstName" label="First Name" placeholder="Enter your first name" required />

                            <FormField type="email" name="email" label="Email Address" placeholder="Enter your email" required />

                            <FormField type="tel" name="phone" label="Phone Number" placeholder="Enter your phone number" />

                            <FormField type="url" name="website" label="Website" placeholder="https://example.com" />

                            <FormField type="number" name="age" label="Age" placeholder="Enter your age" />

                            {/* Password */}
                            <FormField
                                type="password"
                                name="password"
                                label="Password"
                                placeholder="Enter password"
                                description="Must be at least 8 characters"
                            />
                        </div>

                        {/* Textarea */}
                        <div className="mt-6">
                            <FormField
                                type="textarea"
                                name="bio"
                                label="Bio"
                                placeholder="Tell us about yourself"
                                rows={4}
                                description="Maximum 500 characters"
                            />
                        </div>

                        <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
                            {/* Select */}
                            <FormField
                                type="select"
                                name="country"
                                label="Country"
                                placeholder="Select your country"
                                options={countryOptions}
                                required
                            />

                            {/* Multi-select */}
                            <FormField
                                type="multiselect"
                                name="skills"
                                label="Skills"
                                placeholder="Select your skills"
                                options={skillOptions}
                                max={3}
                                description="Select up to 3 skills"
                            />
                        </div>

                        {/* Searchable MultiSelect example */}
                        <div className="mt-6">
                            <FormField
                                type="multiselect"
                                searchable
                                name="tags"
                                label="Tags"
                                placeholder="Search or create tags"
                                options={tagOptions}
                                max={5}
                                searchPlaceholder="Search tags..."
                                allowCustomOptions={false}
                                description="Search existing tags or add custom ones"
                            />
                        </div>

                        {/* Radio Group */}
                        <div className="mt-6">
                            <FormField type="radio" name="gender" label="Gender" options={genderOptions} orientation="horizontal" required />
                        </div>

                        <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
                            {/* Checkbox */}
                            <FormField
                                type="checkbox"
                                name="newsletter"
                                label="Newsletter Subscription"
                                checkboxLabel="Subscribe to our newsletter"
                            />

                            {/* Toggle */}
                            <FormField type="toggle" name="isActive" label="Account Status" toggleLabel="Active Account" />
                        </div>

                        <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-3">
                            {/* Date Fields */}
                            <FormField type="date" name="birthDate" label="Birth Date" />

                            <FormField type="datetime-local" name="appointmentDateTime" label="Appointment" />

                            <FormField type="time" name="preferredTime" label="Preferred Time" />
                        </div>

                        {/* Search with Autocomplete */}
                        <div className="mt-6">
                            <FormField
                                type="search"
                                name="searchQuery"
                                label="Search"
                                placeholder="Search for technologies..."
                                suggestions={searchSuggestions}
                                onSearch={(value) => console.log('Searching for:', value)}
                            />
                        </div>

                        {/* File uploads */}
                        <div className="mt-6">
                            <FormField
                                type="file"
                                name="attachments"
                                label="Attachments"
                                accept="image/*,application/pdf"
                                multiple
                                preview
                                dragDrop
                                description="Upload files (images or PDFs). Max size 5MB each."
                            />
                        </div>

                        {/* OTP Input */}
                        <div className="mt-6">
                            <FormField
                                type="otp"
                                name="verificationCode"
                                label="Verification Code"
                                description="Enter the 6-digit code sent to your email"
                                length={6}
                            />
                        </div>

                        {/* Submit Button */}
                        <div className="mt-8 flex justify-end">
                            <Button type="submit" className="px-8">
                                Submit Form
                            </Button>
                        </div>
                    </Form>
                </CardContent>
            </Card>
        </div>
    );
};

export default FormFieldExamples;