"use client";

import { useState, useTransition } from "react";
import Image from "next/image";
import { uploadLogo } from "@/lib/content-actions";
import { Upload } from "lucide-react";

export default function LogoUploader({ currentUrl }: { currentUrl: string }) {
  const [preview, setPreview] = useState(currentUrl);
  const [isPending, startTransition] = useTransition();
  const [message, setMessage] = useState<string | null>(null);

  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setMessage(null);

    const localPreview = URL.createObjectURL(file);
    setPreview(localPreview);

    const formData = new FormData();
    formData.set("file", file);

    startTransition(async () => {
      const result = await uploadLogo(formData);
      if (result.ok && result.url) {
        setPreview(result.url);
        setMessage("تم رفع الشعار وتحديثه في الموقع ✓");
      } else {
        setMessage(result.error || "تعذّر رفع الشعار");
      }
    });
  }

  return (
    <div className="rounded-2xl border border-black/10 bg-white p-6">
      <h3 className="mb-4 font-bold text-[#1A1A1A]">شعار الموقع</h3>
      <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center">
        <div className="flex h-20 w-32 items-center justify-center rounded-lg border border-black/10 bg-[#F5F3EF]">
          {preview && (
            <Image
              src={preview}
              alt="الشعار الحالي"
              width={120}
              height={70}
              unoptimized
              className="max-h-16 w-auto object-contain"
            />
          )}
        </div>
        <div>
          <label className="flex w-fit cursor-pointer items-center gap-2 rounded-lg bg-[#1A1A1A] px-4 py-2 text-sm font-semibold text-white transition hover:bg-black">
            <Upload size={15} />
            {isPending ? "جارِ الرفع..." : "رفع شعار جديد"}
            <input type="file" accept="image/*" className="hidden" onChange={handleFileChange} disabled={isPending} />
          </label>
          <p className="mt-2 text-xs text-[#8A8A8A]">PNG أو SVG بخلفية شفافة يُفضّل.</p>
          {message && (
            <p className={`mt-2 text-xs ${message.includes("✓") ? "text-emerald-600" : "text-red-500"}`}>{message}</p>
          )}
        </div>
      </div>
    </div>
  );
}