"use client";

import { useState, useTransition } from "react";
import { createProduct, uploadImage } from "@/lib/content-actions";
import { Plus, Upload } from "lucide-react";

export default function NewProductForm() {
  const [open, setOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [imageUrl, setImageUrl] = useState("");
  const [isRealPhoto, setIsRealPhoto] = useState(true);

  function handleSubmit(formData: FormData) {
    setError(null);
    startTransition(async () => {
      const result = await createProduct(formData);
      if (result.ok) {
        setOpen(false);
      } else {
        setError(result.error || "تعذّر الإضافة");
      }
    });
  }

  function handleUpload(file: File | null) {
    if (!file) return;
    const formData = new FormData();
    formData.set("file", file);
    startTransition(async () => {
      const result = await uploadImage(formData);
      if (result.ok && result.url) setImageUrl(result.url);
    });
  }

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        className="flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-black/20 bg-white py-4 text-sm font-medium text-[#6B6B6B] transition hover:border-[#C9A24A] hover:text-[#8a6d1f]"
      >
        <Plus size={16} /> إضافة منتج / تصنيف جديد
      </button>
    );
  }

  return (
    <form action={handleSubmit} className="rounded-2xl border border-[#C9A24A]/40 bg-white p-6">
      <h3 className="mb-4 font-bold text-[#1A1A1A]">منتج جديد</h3>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">معرف فريد (slug بالإنجليزية)</label>
          <input name="slug" required className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]" placeholder="new-product-slug" />
        </div>
        <div>
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">الاسم</label>
          <input name="name" required className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]" />
        </div>
        <div>
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">الاسم المختصر</label>
          <input name="short_name" className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]" />
        </div>
        <div>
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">اسم الأيقونة (lucide-react)</label>
          <input name="icon" defaultValue="Package" className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]" />
        </div>
        <div className="sm:col-span-2">
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">صورة المنتج</label>
          <div className="grid gap-3 sm:grid-cols-[auto_1fr]">
            <div className="flex w-full shrink-0 flex-col items-center gap-2 sm:w-32">
              <div className="flex h-20 w-full items-center justify-center overflow-hidden rounded-lg border border-black/10 bg-[#F5F3EF]">
                {imageUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={imageUrl} alt="" className="h-full w-full object-cover" />
                ) : (
                  <span className="text-[10px] text-[#B0B0B0]">بدون صورة</span>
                )}
              </div>
              <label className="flex w-full cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-[#1A1A1A] px-3 py-1.5 text-[11px] font-semibold text-white transition hover:bg-black">
                <Upload size={12} />
                {isPending ? "جارِ الرفع..." : "رفع صورة"}
                <input
                  type="file"
                  accept="image/*"
                  className="hidden"
                  disabled={isPending}
                  onChange={(e) => handleUpload(e.target.files?.[0] || null)}
                />
              </label>
            </div>
            <div>
              <p className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">أو ضع رابط الصورة مباشرة</p>
              <input
                name="image_url"
                value={imageUrl}
                onChange={(e) => setImageUrl(e.target.value)}
                dir="ltr"
                className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]"
              />
              <label className="mt-3 flex w-fit cursor-pointer items-center gap-2 text-sm font-medium text-[#1A1A1A]">
                <input
                  type="checkbox"
                  name="is_real_photo"
                  checked={isRealPhoto}
                  onChange={(e) => setIsRealPhoto(e.target.checked)}
                  className="h-4 w-4 accent-[#C9A24A]"
                />
                صورة حقيقية من موقع العمل
              </label>
            </div>
          </div>
        </div>
        <div className="sm:col-span-2">
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">الوصف المختصر</label>
          <input name="tagline" className="w-full rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]" />
        </div>
        <div className="sm:col-span-2">
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">الوصف الكامل</label>
          <textarea name="description" rows={2} className="w-full resize-none rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]" />
        </div>
        <div className="sm:col-span-2">
          <label className="mb-1.5 block text-sm font-semibold text-[#1A1A1A]">المميزات (كل ميزة في سطر)</label>
          <textarea name="features" rows={3} className="w-full resize-none rounded-lg border border-black/10 bg-[#F5F3EF] px-4 py-2.5 text-sm outline-none focus:border-[#C9A24A]" />
        </div>
      </div>

      {error && <p className="mt-3 text-xs text-red-500">{error}</p>}

      <div className="mt-4 flex items-center gap-3">
        <button type="submit" disabled={isPending} className="rounded-lg bg-[#1A1A1A] px-4 py-2 text-sm font-semibold text-white transition hover:bg-black disabled:opacity-60">
          {isPending ? "جارِ الإضافة..." : "إضافة المنتج"}
        </button>
        <button type="button" onClick={() => setOpen(false)} className="rounded-lg px-4 py-2 text-sm font-medium text-[#6B6B6B]">
          إلغاء
        </button>
      </div>
    </form>
  );
}