"use client";

import { useEffect, useState, useCallback } from "react";
import { api } from "@/app/adminx/admin-api";
import { Card, Button, Input, SectionTitle, ErrorNote } from "@/app/adminx/ui";

interface Media {
  id: number;
  filename: string;
  url: string;
  mime: string;
  size: number;
  createdAt: string;
}

export function MediaSection() {
  const [items, setItems] = useState<Media[]>([]);
  const [q, setQ] = useState("");
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState("");
  const [copied, setCopied] = useState<number | null>(null);

  const load = useCallback(async () => {
    const data = await api.get(`media${q ? `?q=${encodeURIComponent(q)}` : ""}`);
    setItems(data.media);
  }, [q]);

  useEffect(() => {
    const t = setTimeout(load, 250);
    return () => clearTimeout(t);
  }, [load]);

  async function upload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true);
    setError("");
    try {
      const form = new FormData();
      form.append("file", file);
      const res = await fetch("/api/admin/media", {
        method: "POST",
        headers: { "X-CSRF-Token": document.cookie.split("; ").find((r) => r.startsWith("csrf="))?.split("=")[1] ?? "" },
        credentials: "include",
        body: form,
      });
      const json = await res.json();
      if (!res.ok || json.ok === false) throw new Error(json.error || "Upload failed");
      await load();
    } catch (err: any) {
      setError(err.message);
    } finally {
      setUploading(false);
      e.target.value = "";
    }
  }

  async function remove(m: Media) {
    if (!confirm("Delete this image?")) return;
    await api.del(`media?id=${m.id}`);
    await load();
  }

  async function copy(m: Media) {
    const full = `${window.location.origin}${m.url}`;
    try {
      await navigator.clipboard.writeText(m.url);
      setCopied(m.id);
      setTimeout(() => setCopied(null), 1500);
    } catch {
      /* ignore */
    }
  }

  return (
    <div>
      <SectionTitle
        title="Media Library"
        action={
          <label className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-indigo-600 px-3.5 py-2 text-sm font-semibold text-white transition hover:bg-indigo-700">
            {uploading ? "Uploading…" : "Upload Image"}
            <input type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={upload} disabled={uploading} />
          </label>
        }
      />
      <ErrorNote message={error} />

      <div className="mb-4">
        <Input placeholder="Search images…" value={q} onChange={(e) => setQ(e.target.value)} />
      </div>

      {items.length === 0 ? (
        <Card className="p-10 text-center text-sm text-slate-500">No images yet. Upload JPG, PNG or WebP.</Card>
      ) : (
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
          {items.map((m) => (
            <div key={m.id} className="group overflow-hidden rounded-xl border border-slate-200 bg-white">
              <div className="aspect-square overflow-hidden bg-slate-100">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={m.url} alt={m.filename} className="h-full w-full object-cover" loading="lazy" />
              </div>
              <div className="p-2">
                <p className="truncate text-xs text-slate-500">{m.filename}</p>
                <div className="mt-2 flex gap-1">
                  <Button variant="ghost" className="px-2 py-1 text-xs" onClick={() => copy(m)}>
                    {copied === m.id ? "Copied ✓" : "Copy URL"}
                  </Button>
                  <Button variant="ghost" className="px-2 py-1 text-xs text-red-600 hover:bg-red-50" onClick={() => remove(m)}>
                    Delete
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}