import { zodResolver } from '@hookform/resolvers/zod';
import { Link, router } from '@inertiajs/react';
import { Star } from 'lucide-react';
import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { FormSection, FormSwitch } from '@/components/admin/form-language';
import FormImageUpload from '@/components/admin/FormImageUpload';
import type { SelectedMedia } from '@/components/admin/FormImageUpload';
import GalleryPicker from '@/components/admin/GalleryPicker';
import type { GalleryChange } from '@/components/admin/GalleryPicker';
import RichTextEditor from '@/components/rich-text-editor';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
import { testimonialSchema } from '@/lib/validators/testimonial';
import type { TestimonialFormValues } from '@/lib/validators/testimonial';
import { index, store, update } from '@/routes/admin/testimonials';
import type { TestimonialAdmin } from '@/types/models';

type Props = {
    mode: 'create' | 'edit';
    testimonial?: TestimonialAdmin;
    nextOrder?: number;
};

export default function TestimonialForm({
    mode,
    testimonial,
    nextOrder,
}: Props) {
    const isCreate = mode === 'create';
    const [avatarFile, setAvatarFile] = useState<File | null>(null);
    const [avatarMedia, setAvatarMedia] = useState<SelectedMedia | null>(null);
    const [removeAvatar, setRemoveAvatar] = useState(false);
    const [gallery, setGallery] = useState<GalleryChange>({
        files: [],
        mediaIds: [],
        removedIds: [],
        order: [],
    });
    const [hoverRating, setHoverRating] = useState(0);

    const {
        register,
        control,
        handleSubmit,
        formState: { isSubmitting },
    } = useForm<TestimonialFormValues>({
        resolver: zodResolver(testimonialSchema),
        defaultValues: {
            author_name: testimonial?.author_name ?? '',
            author_position: testimonial?.author_position ?? '',
            company: testimonial?.company ?? '',
            content: testimonial?.content ?? '',
            rating: testimonial?.rating ?? 5,
            is_active: testimonial?.is_active ?? true,
            sort_order: testimonial?.sort_order ?? nextOrder ?? 0,
        },
    });

    const onSubmit = (values: TestimonialFormValues) => {
        const formData = new FormData();

        formData.append('author_name', values.author_name);
        formData.append('author_position', values.author_position ?? '');
        formData.append('company', values.company ?? '');
        formData.append('content', values.content);
        formData.append('rating', String(values.rating));
        formData.append('is_active', values.is_active ? '1' : '0');
        formData.append('sort_order', String(values.sort_order ?? 0));

        if (avatarFile) {
            formData.append('avatar', avatarFile);
        } else if (avatarMedia) {
            formData.append('avatar_media_id', String(avatarMedia.id));
        } else if (removeAvatar) {
            formData.append('remove_avatar', '1');
        }

        gallery.files.forEach((file) => {
            formData.append('gallery[]', file);
        });

        gallery.mediaIds.forEach((id) => {
            formData.append('gallery_media_ids[]', String(id));
        });

        gallery.removedIds.forEach((id) => {
            formData.append('gallery_removed[]', String(id));
        });

        gallery.order.forEach((token) => {
            formData.append('gallery_order[]', token);
        });

        if (isCreate) {
            router.post(store(), formData, { preserveScroll: true });
        } else if (testimonial) {
            router.put(update(testimonial.id), formData, {
                preserveScroll: true,
            });
        }
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
            <FormSection
                title="Konten"
                description="Data testimoni klien — nama, jabatan, perusahaan, dan isi testimoni."
            >
                <div className="grid gap-6 sm:grid-cols-3 sm:items-start">
                    <div className="space-y-2">
                        <Label htmlFor="author_name">
                            Nama Klien{' '}
                            <span className="text-destructive">*</span>
                        </Label>
                        <Input
                            id="author_name"
                            placeholder="mis. Budi Santoso"
                            {...register('author_name')}
                        />
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="author_position">Jabatan</Label>
                        <Input
                            id="author_position"
                            placeholder="mis. Direktur"
                            {...register('author_position')}
                        />
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="company">Perusahaan</Label>
                        <Input
                            id="company"
                            placeholder="mis. PT Retail Maju"
                            {...register('company')}
                        />
                    </div>

                    <Controller
                        control={control}
                        name="content"
                        render={({ field }) => (
                            <div className="space-y-2 sm:col-span-3">
                                <Label>
                                    Isi Testimoni{' '}
                                    <span className="text-destructive">*</span>
                                </Label>
                                <RichTextEditor
                                    value={field.value}
                                    onChange={field.onChange}
                                    placeholder="Ulasan klien tentang kerja sama..."
                                />
                            </div>
                        )}
                    />
                </div>
            </FormSection>

            <FormSection
                title="Pengaturan"
                description="Rating, urutan tampilan, dan status publikasi testimoni."
            >
                <div className="grid gap-6 sm:grid-cols-3 sm:items-start">
                    <Controller
                        control={control}
                        name="rating"
                        render={({ field }) => (
                            <div className="space-y-2">
                                <Label>Rating</Label>
                                <div className="flex items-center gap-1 pt-1">
                                    {[1, 2, 3, 4, 5].map((star) => (
                                        <button
                                            key={star}
                                            type="button"
                                            aria-label={`Rating ${star}`}
                                            onClick={() => field.onChange(star)}
                                            onMouseEnter={() =>
                                                setHoverRating(star)
                                            }
                                            onMouseLeave={() =>
                                                setHoverRating(0)
                                            }
                                            className="transition-transform hover:scale-110"
                                        >
                                            <Star
                                                className={cn(
                                                    'size-6 transition-colors',
                                                    (hoverRating ||
                                                        field.value) >= star
                                                        ? 'fill-amber-400 text-amber-400'
                                                        : 'text-muted-foreground/40',
                                                )}
                                            />
                                        </button>
                                    ))}
                                </div>
                            </div>
                        )}
                    />
                    <div className="space-y-2">
                        <Label htmlFor="sort_order">Urutan</Label>
                        <Input
                            id="sort_order"
                            type="number"
                            min={0}
                            placeholder="0"
                            className="w-20 text-center"
                            {...register('sort_order')}
                        />
                        <p className="text-xs text-muted-foreground">
                            Semakin kecil angkanya, semakin awal posisinya.
                        </p>
                    </div>
                    <Controller
                        control={control}
                        name="is_active"
                        render={({ field }) => (
                            <div className="space-y-2">
                                <Label htmlFor="is_active">Aktif</Label>
                                <FormSwitch
                                    label=""
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                    name="is_active"
                                    boxed
                                    showLabel={false}
                                />
                                <p className="text-xs text-muted-foreground">
                                    Testimoni aktif ditampilkan di carousel
                                    Home.
                                </p>
                            </div>
                        )}
                    />
                </div>
            </FormSection>

            <FormSection
                title="Media"
                description="Foto avatar klien dan galeri hasil kerja (opsional)."
            >
                <div className="grid gap-6 lg:grid-cols-2">
                    <FormImageUpload
                        label="Foto Avatar (opsional)"
                        existingUrl={testimonial?.avatar_url}
                        selectedMedia={avatarMedia}
                        onChange={setAvatarFile}
                        onSelectMedia={setAvatarMedia}
                        onClear={() => setRemoveAvatar(true)}
                        showLibraryButton={false}
                        hint="PNG, JPG, atau WEBP — maks. 2 MB"
                    />

                    <GalleryPicker
                        label="Galeri (maks. 8 gambar)"
                        existing={testimonial?.gallery ?? []}
                        max={8}
                        onChange={setGallery}
                    />
                </div>
            </FormSection>

            <div className="flex gap-3">
                <Button type="submit" disabled={isSubmitting}>
                    {isCreate ? 'Simpan Testimoni' : 'Simpan Perubahan'}
                </Button>
                <Button type="button" variant="outline" asChild>
                    <Link href={index()}>Batal</Link>
                </Button>
            </div>
        </form>
    );
}