'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 { z } from 'zod';

export type AnnouncementFormValues = z.infer<typeof AnnouncementFormSchema>;

export type NormalizedAnnouncementPayload = {
    title: string;
    description?: string;
    coverImage?: string;
};

interface AnnouncementFormProps {
    onBack: () => void;
    onSubmit: (data: NormalizedAnnouncementPayload) => void;
    defaultValues?: Partial<NormalizedAnnouncementPayload>;
    mode: 'create' | 'edit';
}

const AnnouncementFormSchema = z.object({
    title: z.string().min(1, 'Title is required'),
    description: z.string().optional().or(z.literal('')),
    coverImage: z.string().optional().or(z.literal('')),
});

export default function AnnouncementForm({ onBack, onSubmit, defaultValues, mode }: AnnouncementFormProps) {
    const initialValues = {
        title: defaultValues?.title || '',
        description: defaultValues?.description || '',
        coverImage: defaultValues?.coverImage || '',
    };

    const handleSubmit = (values: AnnouncementFormValues) => {
        onSubmit({
            title: values.title,
            description: values.description || undefined,
            coverImage: values.coverImage || undefined,
        });
        onBack();
    };

    return (
        <div className="flex h-full flex-col">
            <div className="flex-1 overflow-y-auto p-2">
                <Form submitHandler={handleSubmit} resolver={zodResolver(AnnouncementFormSchema)} defaultValues={initialValues}>
                    <div className="space-y-4">
                        <FormField name="title" label="Title" type="text" placeholder="Enter announcement title" required />
                        <FormField
                            name="description"
                            label="Full Description"
                            type="textarea"
                            placeholder="Full details of the announcement"
                            description="The complete announcement details"
                        />

                        <FormField
                            name="coverImage"
                            label="Cover Image URL"
                            type="text"
                            placeholder="https://example.com/image.jpg"
                            description="Optional: URL for an image to display with the announcement"
                        />
                    </div>

                    <div className="mt-6 flex justify-end space-x-2">
                        <Button type="button" variant="outline" onClick={onBack}>
                            Cancel
                        </Button>
                        <Button type="submit">{mode === 'create' ? 'Create' : 'Update'}</Button>
                    </div>
                </Form>
            </div>
        </div>
    );
}