import Form from '@/components/form/Form';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Plus } from 'lucide-react';
import { useMemo } from 'react';
import { useFormContext } from 'react-hook-form';

interface ItemFormWithHookFormProps {
    formData: any;
    initialData?: any;
    onSubmit: (data: any) => void;
    submitButtonText: string;
    isEdit?: boolean;
}
interface TFormData {
    name: string;
    slug: string;
}

// Form fields component that uses React Hook Form context
function ItemFormFields({
    initialFormData,
    isEdit = false,
    submitButtonText,
}: {
    initialFormData: TFormData;
    isEdit?: boolean;
    submitButtonText: string;
}) {
    const {
        watch,
        setValue,
        formState: { errors },
    } = useFormContext();
    // Removed activeTab state as we're using sections now
    const formData = watch();

    // Generate slug from name
    const generateSlug = (name: string) => {
        return name
            .toLowerCase()
            .trim()
            .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
            .replace(/\s+/g, '-') // Replace spaces with hyphens
            .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
            .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
    };

    // Auto-generate slug when name changes (only for create mode)
    const roleSlug = useMemo(() => {
        return isEdit ? formData.slug : generateSlug(formData.name || '');
    }, [formData.name, formData.slug, isEdit]);

    // Handle role name change
    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setValue('name', value);
        if (!isEdit) {
            setValue('slug', generateSlug(value));
        }
    };

    return (
        <div className="space-y-4">
            {/* Permissions Section */}
            <Card className="border shadow-none">
                <CardHeader className="px-2 pt-2 pb-3">
                    <CardTitle className="text-lg sm:text-xl">Item Information</CardTitle>
                    {errors.permissions && <p className="mt-1 text-sm text-red-600">{(errors.permissions as any)?.message}</p>}
                </CardHeader>
                <CardContent className="pb-1">
                    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
                        {/* Item Name */}
                        <div>
                            <Label htmlFor="role-name" className="mb-2 block text-sm font-medium">
                                Item Name *
                            </Label>
                            <Input
                                id="role-name"
                                placeholder="Admin"
                                value={formData.name || ''}
                                onChange={handleNameChange}
                                className={`text-base sm:text-lg ${errors.name ? 'border-red-500 focus:border-red-500' : ''}`}
                            />
                            {errors.name && <p className="mt-2 text-sm text-red-600">{(errors.name as any)?.message}</p>}
                        </div>

                        {/* Item Slug */}
                        <div>
                            <Label htmlFor="role-slug" className="mb-2 block text-sm font-medium">
                                Slug
                            </Label>
                            <Input
                                id="role-slug"
                                value={roleSlug}
                                disabled
                                className="bg-gray-50 text-base text-gray-600 sm:text-lg"
                                placeholder="Auto-generated from role name"
                            />
                            <p className="mt-1 text-xs text-gray-500">
                                {isEdit ? 'Slug cannot be changed when editing' : 'This field is automatically generated from the role name'}
                            </p>
                        </div>
                    </div>
                </CardContent>
            </Card>

            {/* Submit button */}
            <div className="flex gap-3 sm:flex-row sm:justify-end">
                <Button type="button" variant="outline" onClick={() => history.back()} className="w-full sm:w-auto">
                    Close
                </Button>

                <Button type="submit" className="w-full bg-success text-white hover:bg-brand-800 sm:w-auto">
                    <Plus className="h-4 w-4" />
                    {isEdit ? 'Update Item' : 'Create Item'}
                </Button>
            </div>
        </div>
    );
}

export default function ItemForm({ formData = {}, onSubmit, submitButtonText, isEdit = false }: ItemFormWithHookFormProps) {
    const defaultValues = {
        name: '',
        slug: '',
    };

    return (
        <Form defaultValues={defaultValues} submitHandler={onSubmit} formClassNames="space-y-6">
            <ItemFormFields initialFormData={formData} isEdit={isEdit} submitButtonText={submitButtonText} />
        </Form>
    );
}