"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,
  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 EditServicePage() {
  const router = useRouter();
  const { apiUrl } = useAppContext();
  const params = useParams();
  const oldSlug = 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: "",
    short_description: "",
    long_description: "",
    featureImage: "",
    featureImageAlt: "",
    mainImage: "",
    mainImageAlt: "",
    status: "active",
  });

  useEffect(() => {
    const fetchService = async () => {
      try {
        const res = await fetch(`${apiUrl}/api/services/${oldSlug}`);
        if (res.ok) {
          const data = await res.json();
          const s = data.service;
          setInitialData(s);
          setForm({
            title: s.title || "",
            slug: s.slug || "",
            short_description: s.short_description || "",
            long_description: s.long_description || "",
            featureImage: s.featureImage || "",
            featureImageAlt: s.featureImageAlt || "",
            mainImage: s.mainImage || "",
            mainImageAlt: s.mainImageAlt || "",
            status: s.status || "active",
          });
        } else {
          toast.error("Service not found");
          router.push("/admin/services");
        }
      } catch (err) {
        toast.error("Failed to fetch service");
        router.push("/admin/services");
      }
    };
    if (oldSlug && !initialData) {
      fetchService();
    }
  }, [oldSlug, apiUrl, router, initialData]);

  // Check slug uniqueness
  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/services/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, apiUrl]);

  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.short_description.trim()) {
      toast.error("Short description is required");
      return false;
    }
    if (!form.long_description.trim() || form.long_description === "<p></p>") {
      toast.error("Full description 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.short_description);
      formData.append("long_description", form.long_description);
      formData.append("status", form.status);
      formData.append("mainImageAlt", form.mainImageAlt);
      formData.append("featureImageAlt", form.featureImageAlt);

      const mainFile = getCurrentFile("mainImage");
      const featureFile = getCurrentFile("featureImage");

      if (mainFile) {
        // New main file uploaded
        formData.append("mainImage", mainFile);
      } else if (form.mainImage === "") {
        // User explicitly cleared the main image
        formData.append("existingMainImage", "");
      } else {
        // Keep the existing main image - don't send existingMainImage
        // Server will default to keeping the old one
      }

      if (featureFile) {
        // New feature file uploaded
        formData.append("featureImage", featureFile);
      } else if (form.featureImage === "") {
        // User explicitly cleared the feature image
        formData.append("existingFeatureImage", "");
      } else {
        // Keep the existing feature image - don't send existingFeatureImage
        // Server will default to keeping the old one
      }

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

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

  if (!initialData) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center h-64 text-muted-foreground">
          Loading service data...
        </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 Service</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">
                  Service Title <StatusIcon condition={!!form.title} />
                </Label>
                <Input
                  id="title"
                  value={form.title}
                  onChange={(e) => setForm({ ...form, title: e.target.value })}
                  placeholder="Enter service title"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="slug">
                  Slug <StatusIcon condition={!!form.slug} />
                  {isCheckingSlug && (
                    <span className="text-xs text-muted-foreground ml-2">
                      (checking...)
                    </span>
                  )}
                </Label>
                <div className="relative">
                  <Input
                    id="slug"
                    value={form.slug}
                    onChange={(e) =>
                      setForm({ ...form, slug: slugify(e.target.value) })
                    }
                    placeholder="service-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="short_description">
                Short Description{" "}
                <StatusIcon condition={!!form.short_description} />
              </Label>
              <Textarea
                id="short_description"
                value={form.short_description}
                onChange={(e) =>
                  setForm({ ...form, short_description: e.target.value })
                }
                placeholder="Brief overview of the service"
                rows={3}
              />
            </div>

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

            <div className="grid gap-6 md:grid-cols-2">
              <div className="space-y-2">
                <Label>
                  Featured Image <StatusIcon condition={!!form.featureImage} />
                </Label>
                <ImageDropZone
                  value={form.featureImage}
                  onChange={(value) =>
                    setForm((prev) => ({ ...prev, featureImage: value }))
                  }
                  alt={form.featureImageAlt}
                  onAltChange={(value) =>
                    setForm((prev) => ({ ...prev, featureImageAlt: value }))
                  }
                  fileKey="featureImage"
                />
              </div>

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

            <div className="space-y-2">
              <Label htmlFor="status">
                Status <StatusIcon condition={true} />
              </Label>
              <Select
                value={form.status}
                onValueChange={(val) => setForm({ ...form, status: val })}
              >
                <SelectTrigger className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectLabel>Service Status</SelectLabel>
                    <SelectItem value="active">Active</SelectItem>
                    <SelectItem value="inactive">Inactive</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 z-10">
              <Button type="submit" disabled={isLoading}>
                {isLoading ? "Saving..." : "Update Service"}
              </Button>
              <Button
                type="button"
                variant="outline"
                onClick={() => router.push("/admin/services")}
              >
                Cancel
              </Button>
            </div>
          </div>
        </form>
      </div>
    </AdminLayout>
  );
}