"use client";
import React, { useState, useRef } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Search, UploadCloud, Check, Image as ImageIcon } from "lucide-react";
import { toast } from "sonner";

interface MediaPickerProps {
  onSelect: (url: string) => void;
  media: any[];
  trigger?: React.ReactNode;
}

export function MediaPicker({ onSelect, media: initialMedia, trigger }: MediaPickerProps) {
  const [open, setOpen] = useState(false);
  const [media, setMedia] = useState(initialMedia);
  const [selected, setSelected] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [uploading, setUploading] = useState(false);
  const fileRef = useRef<HTMLInputElement>(null);

  const filtered = media.filter(m => !search || m.filename.includes(search) || (m.alt && m.alt.includes(search)));

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files?.[0]) return;
    setUploading(true);
    const formData = new FormData();
    formData.append("file", e.target.files[0]);
    try {
      const res = await fetch("/api/upload", { method: "POST", body: formData });
      const data = await res.json();
      if (data.success) {
        setMedia(prev => [data.media, ...prev]);
        setSelected(data.media.url);
        toast.success("آپلود موفق");
      }
    } catch { toast.error("خطا در آپلود"); }
    setUploading(false);
    if (fileRef.current) fileRef.current.value = "";
  };

  const handleConfirm = () => {
    if (selected) { onSelect(selected); setOpen(false); }
  };

  return (
    <>
      <div onClick={() => setOpen(true)} className="cursor-pointer">
        {trigger || (
          <Button type="button" variant="outline" className="gap-2">
            <ImageIcon className="w-4 h-4" /> انتخاب از رسانه‌ها
          </Button>
        )}
      </div>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
          <DialogHeader>
            <DialogTitle>انتخاب رسانه</DialogTitle>
          </DialogHeader>
          <div className="flex gap-3 items-center border-b pb-3">
            <div className="relative flex-1">
              <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input placeholder="جستجو..." className="pr-9" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <input ref={fileRef} type="file" accept="image/*,video/*" className="hidden" onChange={handleUpload} />
            <Button variant="outline" className="gap-2 shrink-0" onClick={() => fileRef.current?.click()} disabled={uploading}>
              <UploadCloud className="w-4 h-4" />{uploading ? "آپلود..." : "آپلود جدید"}
            </Button>
          </div>
          <div className="flex-1 overflow-y-auto">
            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3 p-1">
              {filtered.map(m => (
                <div key={m.id} onClick={() => setSelected(m.url)}
                  className={`relative aspect-square rounded-lg overflow-hidden border-2 cursor-pointer transition-all ${selected === m.url ? "border-indigo-500 ring-2 ring-indigo-500/30" : "border-transparent hover:border-muted-foreground/30"}`}>
                  {m.mimeType?.startsWith("image/") ? (
                    <img src={m.url} alt={m.alt || m.filename} className="w-full h-full object-cover" />
                  ) : (
                    <div className="w-full h-full bg-muted flex items-center justify-center text-xs text-muted-foreground p-2 text-center">{m.filename}</div>
                  )}
                  {selected === m.url && (
                    <div className="absolute inset-0 bg-indigo-500/20 flex items-center justify-center">
                      <Check className="w-6 h-6 text-indigo-600 bg-white rounded-full p-1" />
                    </div>
                  )}
                </div>
              ))}
              {filtered.length === 0 && (
                <div className="col-span-full text-center py-12 text-muted-foreground text-sm">رسانه‌ای یافت نشد.</div>
              )}
            </div>
          </div>
          <div className="border-t pt-3 flex gap-3 justify-end">
            <Button variant="outline" onClick={() => setOpen(false)}>انصراف</Button>
            <Button className="bg-indigo-600 hover:bg-indigo-700" onClick={handleConfirm} disabled={!selected}>
              <Check className="w-4 h-4 ml-2" /> انتخاب رسانه
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}