"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { uploadMedia } from "@/actions/admin-media";

type MediaFile = { name: string; url: string };

function validImageUrl(url: string): string {
  if (!url.startsWith("/")) return "";
  if (/[<>"']/.test(url)) return "";
  if (/(data|javascript|vbscript|file):/i.test(url)) return "";
  return url;
}

export function AdminMediaGrid() {
  const [files, setFiles] = useState<MediaFile[]>([]);
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState({ current: 0, total: 0 });
  const fileRef = useRef<HTMLInputElement>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/media");
      const data = await res.json();
      setFiles(data.files ?? []);
    } catch { /* ignore */ }
    setLoading(false);
  }, []);

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

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const files = e.target.files;
    if (!files || files.length === 0) return;
    setUploading(true);
    setProgress({ current: 0, total: files.length });
    
    const fileArray = Array.from(files);
    
    await Promise.all(fileArray.map(async (file) => {
      const fd = new FormData();
      fd.set("file", file);
      try {
        await uploadMedia(fd);
      } catch (err) {
        console.error(err);
      }
      setProgress(prev => ({ ...prev, current: prev.current + 1 }));
    }));

    await load();
    setUploading(false);
    setProgress({ current: 0, total: 0 });
    if (fileRef.current) fileRef.current.value = "";
  }

  function copyUrl(url: string) {
    navigator.clipboard.writeText(window.location.origin + url).catch(() => {});
  }

  return (
    <div className="admin-card mb-4">
      <div className="flex items-center justify-between mb-3">
        <strong>{files.length} image{files.length !== 1 ? "s" : ""}</strong>
        <label className="btn btn-primary cursor-pointer text-sm">
          {uploading ? "Uploading…" : "Upload image"}
          <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} multiple className="hidden" />
        </label>
      </div>

      {uploading && (
        <div className="mb-4">
          <div className="flex justify-between text-xs mb-1">
            <span>Uploading images...</span>
            <span>{progress.current} / {progress.total}</span>
          </div>
          <div className="h-2 w-full bg-[var(--color-primary)]/10 rounded-full overflow-hidden">
            <div 
              className="h-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-300" 
              style={{ width: `${(progress.current / progress.total) * 100}%` }}
            />
          </div>
        </div>
      )}

      {loading ? (
        <p className="text-xs text-gray-500 dark:text-gray-400">Loading…</p>
      ) : files.length === 0 ? (
        <p className="text-xs text-gray-500 dark:text-gray-400">No images yet. Upload one above.</p>
      ) : (
        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-3">
          {files.map((f) => (
            <div key={f.name} className="border border-[var(--color-text-muted)]/14 rounded-[10px] overflow-hidden bg-[var(--color-background)]">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={validImageUrl(f.url)} alt={f.name} className="w-full h-[120px] object-cover block" />
              <div className="p-2">
                <p className="text-xs text-[var(--color-text-muted)] m-0 mb-1 overflow-hidden text-ellipsis whitespace-nowrap">
                  {f.name}
                </p>
                <button type="button" onClick={() => copyUrl(f.url)} className="btn btn-outline text-xs p-1 w-full">
                  Copy URL
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}