'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import {
  RiArrowLeftLine,
  RiSaveLine,
  RiImageAddLine,
} from '@remixicon/react';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardHeader,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useCreateBlog, useUpdateBlog, useBlogBilingual } from '../hooks';

interface BlogFormProps {
  blogId?: number;
}

export default function BlogForm({ blogId }: BlogFormProps) {
  const router = useRouter();
  const isEdit = !!blogId;
  const { data: blogData, isLoading } = useBlogBilingual(blogId ?? 0);
  const createMutation = useCreateBlog();
  const updateMutation = useUpdateBlog();

  const [form, setForm] = useState({
    title_en: '',
    title_ar: '',
    slug: '',
    description_en: '',
    description_ar: '',
    meta_title_en: '',
    meta_title_ar: '',
    meta_description_en: '',
    meta_description_ar: '',
    meta_keywords_en: '',
    meta_keywords_ar: '',
    status: '1',
  });
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [errors, setErrors] = useState<Record<string, string>>({});

  useEffect(() => {
    if (blogData && isEdit) {
      const enBlog = blogData.en as Record<string, unknown>;
      const arBlog = blogData.ar as Record<string, unknown>;

      setForm({
        title_en: String(enBlog?.title ?? ''),
        title_ar: String(arBlog?.title ?? ''),
        slug: String(enBlog?.slug ?? ''),
        description_en: String(enBlog?.description ?? ''),
        description_ar: String(arBlog?.description ?? ''),
        meta_title_en: String(enBlog?.meta_title ?? ''),
        meta_title_ar: String(arBlog?.meta_title ?? ''),
        meta_description_en: String(enBlog?.meta_description ?? ''),
        meta_description_ar: String(arBlog?.meta_description ?? ''),
        meta_keywords_en: String(enBlog?.meta_keywords ?? ''),
        meta_keywords_ar: String(arBlog?.meta_keywords ?? ''),
        status: String(enBlog?.status ?? '1'),
      });
      const img = enBlog?.image ?? arBlog?.image;
      if (img) setImagePreview(String(img));
    }
  }, [blogData, isEdit]);

  const handleChange = (key: string, value: string) => {
    setForm((prev) => ({ ...prev, [key]: value }));
    setErrors((prev) => {
      const next = { ...prev };
      delete next[key];
      return next;
    });
  };

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setImageFile(file);
      setImagePreview(URL.createObjectURL(file));
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setErrors({});

    const validationErrors: Record<string, string> = {};
    if (!form.title_en.trim()) validationErrors.title_en = 'English title is required';
    if (!form.title_ar.trim()) validationErrors.title_ar = 'Arabic title is required';
    if (!isEdit && !imageFile) validationErrors.image = 'Image is required';
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      toast.error(Object.values(validationErrors)[0]);
      return;
    }

    const fd = new FormData();
    fd.append('title_en', form.title_en);
    fd.append('title_ar', form.title_ar);
    if (imageFile) fd.append('image', imageFile);

    if (form.slug.trim()) fd.append('slug', form.slug.trim());
    if (form.description_en.trim()) fd.append('description_en', form.description_en.trim());
    if (form.description_ar.trim()) fd.append('description_ar', form.description_ar.trim());
    if (form.meta_title_en.trim()) fd.append('meta_title_en', form.meta_title_en.trim());
    if (form.meta_title_ar.trim()) fd.append('meta_title_ar', form.meta_title_ar.trim());
    if (form.meta_description_en.trim()) fd.append('meta_description_en', form.meta_description_en.trim());
    if (form.meta_description_ar.trim()) fd.append('meta_description_ar', form.meta_description_ar.trim());
    if (form.meta_keywords_en.trim()) fd.append('meta_keywords_en', form.meta_keywords_en.trim());
    if (form.meta_keywords_ar.trim()) fd.append('meta_keywords_ar', form.meta_keywords_ar.trim());
    fd.append('status', form.status);

    if (!isEdit) {
      fd.append('contents[0][title_en]', form.title_en);
      fd.append('contents[0][title_ar]', form.title_ar);
      fd.append('contents[0][content_type]', 'list');
      fd.append('contents[0][content_en][0][title]', form.title_en);
      fd.append('contents[0][content_en][0][description]', form.description_en || 'Content description');
      fd.append('contents[0][content_en][0][values][0][title]', form.title_en);
      fd.append('contents[0][content_ar][0][title]', form.title_ar);
      fd.append('contents[0][content_ar][0][description]', form.description_ar || 'وصف المحتوى');
      fd.append('contents[0][content_ar][0][values][0][title]', form.title_ar);
    }

    const onSuccess = () => {
      toast.success(isEdit ? 'Blog updated successfully' : 'Blog created successfully');
      router.push('/blogs');
    };

    const onError = (error: unknown) => {
      const resp = (error as { response?: { data?: { message?: string; errors?: Record<string, string[]> } } })?.response?.data;
      if (resp?.errors) {
        const fieldErrors: Record<string, string> = {};
        Object.entries(resp.errors).forEach(([k, v]) => {
          const msg = Array.isArray(v) ? v[0] : String(v);
          fieldErrors[k] = msg;
        });
        setErrors(fieldErrors);
        const allMessages = Object.values(fieldErrors);
        if (allMessages.length > 0) {
          toast.error(allMessages[0]);
        }
      } else {
        toast.error(resp?.message ?? 'Failed to save blog');
      }
    };

    if (isEdit) {
      updateMutation.mutate({ id: blogId!, data: fd }, { onSuccess, onError });
    } else {
      createMutation.mutate(fd, { onSuccess, onError });
    }
  };

  const isPending = createMutation.isPending || updateMutation.isPending;

  if (isEdit && isLoading) {
    return (
      <Card>
        <CardContent className="py-12 text-center text-muted-foreground">Loading blog...</CardContent>
      </Card>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className="flex items-center gap-3 mb-6">
        <Button type="button" variant="ghost" size="sm" onClick={() => router.push('/blogs')}>
          <RiArrowLeftLine className="size-4 mr-1" />
          Back
        </Button>
        <h1 className="text-xl font-semibold">{isEdit ? 'Edit Blog' : 'Create Blog'}</h1>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <h3 className="font-semibold">Blog Details</h3>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label htmlFor="title_en">Title (English) *</Label>
                  <Input
                    id="title_en"
                    value={form.title_en}
                    onChange={(e) => handleChange('title_en', e.target.value)}
                    placeholder="Enter blog title in English"
                  />
                  {errors.title_en && <p className="text-xs text-destructive">{errors.title_en}</p>}
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="title_ar">Title (Arabic) *</Label>
                  <Input
                    id="title_ar"
                    dir="rtl"
                    value={form.title_ar}
                    onChange={(e) => handleChange('title_ar', e.target.value)}
                    placeholder="أدخل عنوان المدونة"
                  />
                  {errors.title_ar && <p className="text-xs text-destructive">{errors.title_ar}</p>}
                </div>
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="slug">Slug</Label>
                <Input
                  id="slug"
                  value={form.slug}
                  onChange={(e) => handleChange('slug', e.target.value)}
                  placeholder="blog-url-slug"
                />
                {errors.slug && <p className="text-xs text-destructive">{errors.slug}</p>}
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label htmlFor="description_en">Description (English)</Label>
                  <Textarea
                    id="description_en"
                    value={form.description_en}
                    onChange={(e) => handleChange('description_en', e.target.value)}
                    placeholder="Blog description in English"
                    rows={3}
                  />
                  {errors.description_en && <p className="text-xs text-destructive">{errors.description_en}</p>}
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="description_ar">Description (Arabic)</Label>
                  <Textarea
                    id="description_ar"
                    dir="rtl"
                    value={form.description_ar}
                    onChange={(e) => handleChange('description_ar', e.target.value)}
                    placeholder="وصف المدونة بالعربية"
                    rows={3}
                  />
                  {errors.description_ar && <p className="text-xs text-destructive">{errors.description_ar}</p>}
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <h3 className="font-semibold">SEO Settings</h3>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label htmlFor="meta_title_en">Meta Title (English)</Label>
                  <Input
                    id="meta_title_en"
                    value={form.meta_title_en}
                    onChange={(e) => handleChange('meta_title_en', e.target.value)}
                    placeholder="SEO meta title"
                  />
                  {errors.meta_title_en && <p className="text-xs text-destructive">{errors.meta_title_en}</p>}
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="meta_title_ar">Meta Title (Arabic)</Label>
                  <Input
                    id="meta_title_ar"
                    dir="rtl"
                    value={form.meta_title_ar}
                    onChange={(e) => handleChange('meta_title_ar', e.target.value)}
                    placeholder="عنوان ميتا"
                  />
                  {errors.meta_title_ar && <p className="text-xs text-destructive">{errors.meta_title_ar}</p>}
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label htmlFor="meta_description_en">Meta Description (English)</Label>
                  <Textarea
                    id="meta_description_en"
                    value={form.meta_description_en}
                    onChange={(e) => handleChange('meta_description_en', e.target.value)}
                    placeholder="SEO meta description"
                    rows={2}
                  />
                  {errors.meta_description_en && <p className="text-xs text-destructive">{errors.meta_description_en}</p>}
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="meta_description_ar">Meta Description (Arabic)</Label>
                  <Textarea
                    id="meta_description_ar"
                    dir="rtl"
                    value={form.meta_description_ar}
                    onChange={(e) => handleChange('meta_description_ar', e.target.value)}
                    placeholder="وصف ميتا"
                    rows={2}
                  />
                  {errors.meta_description_ar && <p className="text-xs text-destructive">{errors.meta_description_ar}</p>}
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label htmlFor="meta_keywords_en">Meta Keywords (English)</Label>
                  <Input
                    id="meta_keywords_en"
                    value={form.meta_keywords_en}
                    onChange={(e) => handleChange('meta_keywords_en', e.target.value)}
                    placeholder="keyword1, keyword2, keyword3"
                  />
                  {errors.meta_keywords_en && <p className="text-xs text-destructive">{errors.meta_keywords_en}</p>}
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="meta_keywords_ar">Meta Keywords (Arabic)</Label>
                  <Input
                    id="meta_keywords_ar"
                    dir="rtl"
                    value={form.meta_keywords_ar}
                    onChange={(e) => handleChange('meta_keywords_ar', e.target.value)}
                    placeholder="كلمة1، كلمة2، كلمة3"
                  />
                  {errors.meta_keywords_ar && <p className="text-xs text-destructive">{errors.meta_keywords_ar}</p>}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <h3 className="font-semibold">Publish</h3>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-1.5">
                <Label htmlFor="status">Status</Label>
                <Select value={form.status} onValueChange={(v) => handleChange('status', v)}>
                  <SelectTrigger id="status">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1">Published</SelectItem>
                    <SelectItem value="0">Draft</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              {isEdit && blogData?.en?.created_by && (
                <div className="text-sm text-muted-foreground">
                  <span className="font-medium text-foreground">Created by:</span>{' '}
                  {(blogData.en.created_by as unknown as { user?: { user_name?: string } })?.user?.user_name ?? 'Unknown'}
                </div>
              )}
              {isEdit && blogData?.en?.created_at && (
                <div className="text-sm text-muted-foreground">
                  <span className="font-medium text-foreground">Created:</span>{' '}
                  {new Date(String(blogData.en.created_at)).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                </div>
              )}
              <Button type="submit" className="w-full" disabled={isPending}>
                <RiSaveLine className="size-4 mr-1.5" />
                {isPending ? 'Saving...' : isEdit ? 'Update Blog' : 'Create Blog'}
              </Button>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <h3 className="font-semibold">Featured Image {!isEdit && '*'}</h3>
            </CardHeader>
            <CardContent>
              <label
                htmlFor="blog-image"
                className="flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-6 cursor-pointer hover:border-primary/50 transition-colors"
              >
                {imagePreview ? (
                  <img src={imagePreview} alt="Preview" className="max-h-40 rounded-lg object-cover" />
                ) : (
                  <>
                    <RiImageAddLine className="size-8 text-muted-foreground mb-2" />
                    <span className="text-sm text-muted-foreground">Click to upload image</span>
                    <span className="text-xs text-muted-foreground mt-1">JPG, PNG — max 20MB</span>
                  </>
                )}
                <input
                  id="blog-image"
                  type="file"
                  accept="image/jpeg,image/png,image/jpg"
                  className="hidden"
                  onChange={handleImageChange}
                />
              </label>
              {imagePreview && (
                <p className="text-xs text-muted-foreground mt-2 text-center">Click to change image</p>
              )}
              {errors.image && <p className="text-xs text-destructive mt-1">{errors.image}</p>}
            </CardContent>
          </Card>
        </div>
      </div>
    </form>
  );
}