"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 { useAppContext } from "@/context/AppContext";
import StatusIcon from "@/components/reusable/StatusIcon";
import { fetchWithAuth } from "@/lib/api";

export default function EditVideoPage() {
  const router = useRouter();
  const { apiUrl } = useAppContext();
  const params = useParams();
  const videoId = params.id as string;
  const [isLoading, setIsLoading] = useState(false);
  const [initialData, setInitialData] = useState<any>(null);

  const [form, setForm] = useState({
    title: "",
    short_description: "",
    thumbnail: "",
    thumbnailAlt: "",
    videoUrl: "",
    status: "draft",
  });

  useEffect(() => {
    const fetchVideo = async () => {
      try {
        const res = await fetch(`${apiUrl}/api/videos/${videoId}`);
        if (res.ok) {
          const data = await res.json();
          const v = data.video;
          setInitialData(v);

          setForm({
            title: v.title || "",
            short_description: v.short_description || "",
            thumbnail: v.thumbnail || "",
            thumbnailAlt: v.thumbnailAlt || "",
            videoUrl: v.videoUrl || "",
            status: v.status || "draft",
          });
        } else {
          toast.error("Video not found");
          router.push("/admin/videos");
        }
      } catch (err) {
        toast.error("Failed to fetch video");
        router.push("/admin/videos");
      }
    };
    if (videoId && !initialData) {
      fetchVideo();
    }
  }, [videoId, apiUrl, router, initialData]);

  const validate = () => {
    if (!form.title.trim()) {
      toast.error("Title is required");
      return false;
    }
    if (!form.short_description.trim()) {
      toast.error("Short description is required");
      return false;
    }
    if (!form.videoUrl.trim()) {
      toast.error("Video is required");
      return false;
    }
    // Thumbnail is optional on edit - if cleared, it will be removed on submit
    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("short_description", form.short_description);
      formData.append("videoUrl", form.videoUrl);
      formData.append("status", form.status);
      formData.append("thumbnailAlt", form.thumbnailAlt);

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

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

      if (res.ok) {
        toast.success("Video updated successfully!");
        clearAllFiles();
        router.push("/admin/videos");
      } else {
        const data = await res.json();
        toast.error(data.message || "Failed to update video");
      }
    } 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 video 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 Video</h1>
          <div className="border border-gray-300 dark:border-gray-600 p-4 rounded-2xl space-y-6">
            <div className="space-y-2">
              <Label htmlFor="title">
                Video Title <StatusIcon condition={!!form.title} />
              </Label>
              <Input
                id="title"
                value={form.title}
                onChange={(e) => setForm({ ...form, title: e.target.value })}
                placeholder="Enter video title"
              />
            </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 video"
                rows={3}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="videoUrl">
                Video URL <StatusIcon condition={!!form.videoUrl} />
              </Label>
              <Input
                id="videoUrl"
                value={form.videoUrl}
                onChange={(e) => setForm({ ...form, videoUrl: e.target.value })}
                placeholder="Enter YouTube or Vimeo URL"
              />
            </div>

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

            <div className="space-y-2">
              <Label htmlFor="status">
                Status <StatusIcon condition={true} />
              </Label>
              <Select
                value={form.status}
                onValueChange={(value) => setForm({ ...form, status: value })}
              >
                <SelectTrigger className="w-full">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectLabel>Video Status</SelectLabel>
                    <SelectItem value="draft">Draft</SelectItem>
                    <SelectItem value="published">Published</SelectItem>
                    <SelectItem value="archived">Archived</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 Video"}
              </Button>
              <Button
                type="button"
                variant="outline"
                onClick={() => router.push("/admin/videos")}
              >
                Cancel
              </Button>
            </div>
          </div>
        </form>
      </div>
    </AdminLayout>
  );
}