"use client";

import { useState, useEffect } from "react";
import { useRouter } from "@/hooks/useRouter";
import { useParams } from "next/navigation";
import { toast } from "sonner";
import { AdminLayout } from "@/components/layout/AdminLayout";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  ImageDropZone,
  getCurrentFile,
  clearCurrentFile,
  clearAllFiles,
} from "@/components/ui/ImageDropZone";
import { TiptapEditor } from "@/components/ui/TiptapEditor";
import { useImageModal } from "@/context/ImageModalContext";
import { fetchWithAuth } from "@/lib/api";
import { useAppContext } from "@/context/AppContext";
import StatusIcon from "@/components/reusable/StatusIcon";
import { slugify } from "@/lib/slugify";

export default function EditBlogPage() {
  const router = useRouter();
  const { apiUrl } = useAppContext();
  const params = useParams();
  const slug = params.slug as string;
  const [isLoading, setIsLoading] = useState(false);
  const [isCheckingSlug, setIsCheckingSlug] = useState(false);
  const [slugAvailable, setSlugAvailable] = useState<boolean | null>(null);
  const [initialData, setInitialData] = useState<any>(null);

  const [form, setForm] = useState({
    title: "",
    slug: "",
    slugChecked: false,
    shortDescription: "",
    description: "",
    coverImage: "",
    coverImageAlt: "",
    status: "draft",
  });

  console.log("Initial form state:", form);

  useEffect(() => {
    const fetchBlog = async () => {
      try {
        const res = await fetch(`${apiUrl}/api/blogs/${slug}`);
        if (res.ok) {
          const data = await res.json();
          const blog = data.blog;
          setInitialData(blog);
          setForm({
            title: blog.title || "",
            slug: blog.slug || "",
            slugChecked: true,
            shortDescription:
              blog.short_description || blog.shortDescription || "",
            description: blog.details || blog.description || "",
            coverImage: blog.coverImage || "",
            coverImageAlt: blog.coverImageAlt || "",
            status: blog.status || "draft",
          });
        }
      } catch (err) {
        toast.error("Failed to fetch blog");
        router.push("/admin/blogs");
      }
    };
    if (slug && !initialData) {
      fetchBlog();
    }
  }, [slug, router, initialData]);

  useEffect(() => {
    if (form.title && initialData && form.title !== initialData.title) {
      const newSlug = slugify(form.title);
      if (newSlug !== form.slug) {
        setForm((prev) => ({ ...prev, slug: newSlug, slugChecked: false }));
        setSlugAvailable(null);
      }
    }
  }, [form.title, initialData]);

  useEffect(() => {
    const checkSlug = async () => {
      if (!form.slug || form.slug.length < 2) return;
      if (initialData && form.slug === initialData.slug) {
        setSlugAvailable(true);
        return;
      }
      setIsCheckingSlug(true);
      try {
        const res = await fetch(`${apiUrl}/api/blogs/check-slug/${form.slug}`);
        const data = await res.json();
        setSlugAvailable(!data.exists);
      } catch {
        setSlugAvailable(null);
      } finally {
        setIsCheckingSlug(false);
      }
    };
    const timer = setTimeout(checkSlug, 500);
    return () => clearTimeout(timer);
  }, [form.slug, initialData]);

  const validate = () => {
    if (!form.title.trim()) {
      toast.error("Title is required");
      return false;
    }
    if (!form.slug.trim()) {
      toast.error("Slug is required");
      return false;
    }
    if (slugAvailable === false) {
      toast.error("Slug is already taken");
      return false;
    }
    if (!form.shortDescription.trim()) {
      toast.error("Short description is required");
      return false;
    }
    if (!form.description.trim() || form.description === "<p></p>") {
      toast.error("Description is required");
      return false;
    }
    // Cover image is optional on edit - if cleared, it will be removed on submit
    if (!form.coverImageAlt.trim()) {
      toast.error("Cover image alt text is required");
      return false;
    }
    return true;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;

    setIsLoading(true);
    try {
      const formData = new FormData();

      formData.append("title", form.title);
      formData.append("slug", form.slug);
      formData.append("short_description", form.shortDescription);
      formData.append("description", form.description);
      formData.append("status", form.status);
      formData.append("coverImageAlt", form.coverImageAlt);

      const currentFile = getCurrentFile("blog-cover");
      if (currentFile) {
        // New file uploaded
        formData.append("coverImage", currentFile);
      } else if (form.coverImage === "") {
        // User explicitly cleared the image
        formData.append("existingImage", "");
      } else {
        // Keep the existing image - don't send existingImage
        // Server will default to keeping the old one
      }

      const res = await fetchWithAuth(
        `${apiUrl}/api/blogs/${slug}`,
        {
          method: "PUT",
          body: formData,
        },
        apiUrl,
      );

      const data = await res.json();
      if (res.ok) {
        toast.success("Blog updated successfully!");
        clearAllFiles();
        router.push("/admin/blogs");
      } else {
        toast.error(data.message || "Failed to update blog");
      }
    } catch {
      toast.error("Something went wrong");
    } finally {
      setIsLoading(false);
    }
  };

  if (!initialData) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center h-64">
          <p className="text-muted-foreground">Loading...</p>
        </div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout>
      <div className="flex justify-center">
        <form onSubmit={handleSubmit} className="w-full max-w-7xl space-y-6">
          <h1 className="text-2xl font-bold">Edit Blog</h1>
          <div className="border border-gray-300 dark:border-gray-600 p-4 rounded-2xl space-y-6">
            <div className="grid gap-6 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="title">
                  Title <StatusIcon condition={!!form.title} />
                </Label>
                <Input
                  id="title"
                  value={form.title}
                  onChange={(e) => setForm({ ...form, title: e.target.value })}
                  placeholder="Enter blog title"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="slug">
                  Slug <StatusIcon condition={!!form.slug} />
                  {isCheckingSlug && (
                    <span className="text-xs text-muted-foreground">
                      (checking...)
                    </span>
                  )}
                </Label>
                <div className="relative">
                  <Input
                    id="slug"
                    value={form.slug}
                    onChange={(e) =>
                      setForm({ ...form, slug: slugify(e.target.value) })
                    }
                    placeholder="blog-slug"
                  />
                  {slugAvailable === true && (
                    <span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-green-500">
                      Available
                    </span>
                  )}
                  {slugAvailable === false && (
                    <span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-red-500">
                      Taken
                    </span>
                  )}
                </div>
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="shortDescription">
                Short Description{" "}
                <StatusIcon condition={!!form.shortDescription} />
              </Label>
              <div className="relative">
                <Textarea
                  id="shortDescription"
                  value={form.shortDescription}
                  maxLength={200}
                  rows={3}
                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
                    const value = e.target.value.slice(0, 200); // absolute enforcement
                    setForm({ ...form, shortDescription: value });
                  }}
                  placeholder="Enter short description"
                  className="max-h-30 overflow-y-auto"
                />

                <div className="absolute bottom-1 right-3 text-sm text-muted-foreground text-right">
                  {form.shortDescription.length}/200
                </div>
              </div>
            </div>

            <div className="space-y-2">
              <Label>
                Description <StatusIcon condition={!!form.description} />
              </Label>
              <TiptapEditor
                value={form.description}
                onChange={(value) => setForm({ ...form, description: value })}
              />
            </div>

            <div className="space-y-2">
              <Label>
                Cover Image <StatusIcon condition={!!form.coverImage} />
              </Label>
              <ImageDropZone
                value={form.coverImage}
                onChange={(value) =>
                  setForm((prev) => ({ ...prev, coverImage: value }))
                }
                alt={form.coverImageAlt}
                onAltChange={(value) =>
                  setForm((prev) => ({ ...prev, coverImageAlt: value }))
                }
                fileKey="blog-cover"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="status">
                Status <StatusIcon condition={!!form.status} />
              </Label>
              <Select
                value={form.status}
                onValueChange={(value) => setForm({ ...form, status: value })}
              >
                <SelectTrigger className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectLabel>Blog Status</SelectLabel>
                    <SelectItem value="draft">Draft</SelectItem>
                    <SelectItem value="published">Published</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </div>

            <div className="flex gap-2 justify-end bg-card border-t borer-gray-200 px-4 py-3 sticky bottom-0 rounded-b-lg">
              <Button type="submit" disabled={isLoading}>
                {isLoading ? "Saving..." : "Update Blog"}
              </Button>
              <Button
                type="button"
                variant="outline"
                onClick={() => router.push("/admin/blogs")}
              >
                Cancel
              </Button>
            </div>
          </div>
        </form>
      </div>
    </AdminLayout>
  );
}