"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { isStoredUploadUrl } from "@/lib/uploads/url";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent } from "@/components/ui/card";

type SliderImage = { id: string; imageUrl: string; orderIndex: number };

export function SliderManager() {
  const [images, setImages] = useState<SliderImage[]>([]);
  const [loading, setLoading] = useState(true);
  const [newUrl, setNewUrl] = useState("");
  const [adding, setAdding] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [uploading, setUploading] = useState(false);

  async function load() {
    const res = await fetch("/api/admin/slider");
    if (res.ok) {
      const data = await res.json();
      setImages(Array.isArray(data) ? data : []);
    }
    setLoading(false);
  }

  useEffect(() => {
    load();
  }, []);

  async function addByUrl() {
    const url = newUrl.trim();
    if (!url) return;
    setError(null);
    setAdding(true);
    try {
      const res = await fetch("/api/admin/slider", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ imageUrl: url }),
      });
      const data = await res.json();
      if (res.ok) {
        setNewUrl("");
        load();
      } else {
        setError(data.error || "خطا در افزودن");
      }
    } finally {
      setAdding(false);
    }
  }

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setError(null);
    setUploading(true);
    try {
      const form = new FormData();
      form.set("file", file);
      const uploadRes = await fetch("/api/admin/upload", { method: "POST", body: form });
      const uploadData = await uploadRes.json();
      if (!uploadRes.ok || !uploadData.url) {
        setError(uploadData.error || "خطا در آپلود");
        e.target.value = "";
        return;
      }
      const res = await fetch("/api/admin/slider", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ imageUrl: uploadData.url }),
      });
      if (res.ok) {
        load();
      } else {
        const data = await res.json();
        setError(data.error || "خطا در افزودن");
      }
    } finally {
      setUploading(false);
      e.target.value = "";
    }
  }

  async function remove(id: string) {
    if (!confirm("این تصویر از اسلایدر حذف شود؟")) return;
    const res = await fetch(`/api/admin/slider/${id}`, { method: "DELETE" });
    if (res.ok) load();
  }

  if (loading) {
    return <p className="text-muted-foreground">در حال بارگذاری...</p>;
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardContent className="pt-6 space-y-4">
          <h2 className="font-semibold">افزودن تصویر</h2>
          {error && (
            <p className="text-sm text-destructive bg-destructive/10 p-2 rounded" role="alert">
              {error}
            </p>
          )}
          <div className="flex flex-wrap gap-3 items-end">
            <div className="flex-1 min-w-[200px]">
              <Label className="text-xs">آدرس تصویر</Label>
              <div className="flex gap-2 mt-1">
                <Input
                  value={newUrl}
                  onChange={(e) => setNewUrl(e.target.value)}
                  placeholder="https://..."
                  className="flex-1"
                />
                <Button onClick={addByUrl} disabled={adding || !newUrl.trim()}>
                  {adding ? "..." : "افزودن"}
                </Button>
              </div>
            </div>
            <div>
              <Label className="text-xs block mb-1">یا آپلود فایل</Label>
              <label className="cursor-pointer inline-block">
                <input
                  type="file"
                  accept="image/jpeg,image/png,image/webp"
                  className="sr-only"
                  disabled={uploading}
                  onChange={handleUpload}
                />
                <Button type="button" variant="outline" disabled={uploading} asChild>
                  <span>{uploading ? "در حال آپلود..." : "انتخاب فایل"}</span>
                </Button>
              </label>
            </div>
          </div>
        </CardContent>
      </Card>

      <div>
        <h2 className="font-semibold mb-3">تصاویر اسلایدر ({images.length})</h2>
        {images.length === 0 ? (
          <p className="text-muted-foreground text-sm">
            هنوز تصویری اضافه نشده. با فرم بالا تصویر اضافه کنید.
          </p>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            {images.map((img, i) => (
              <Card key={img.id} className="overflow-hidden">
                <div className="relative aspect-video bg-muted">
                  <Image
                    src={img.imageUrl.startsWith("/") ? img.imageUrl : "/cards/placeholder.svg"}
                    alt=""
                    fill
                    className="object-cover"
                    unoptimized={img.imageUrl.startsWith("http") || isStoredUploadUrl(img.imageUrl)}
                    sizes="200px"
                  />
                  <span className="absolute top-1 right-1 bg-black/60 text-white text-xs px-2 py-0.5 rounded">
                    {i + 1}
                  </span>
                </div>
                <CardContent className="p-2 flex justify-between items-center">
                  <span className="text-xs text-muted-foreground truncate max-w-[120px]">
                    {img.imageUrl.slice(0, 30)}…
                  </span>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="text-destructive hover:text-destructive"
                    onClick={() => remove(img.id)}
                  >
                    حذف
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}