"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { useDropzone } from "react-dropzone";
import { Howl } from "howler";

// ─── Types ──────────────────────────────────────────────────────────

type LibrarySound = {
  id: string;
  originalName: string;
  url: string;
  duration: number;
};

type LibraryImage = {
  id: string;
  originalName: string;
  url: string;
  mimeType: string;
  fileSize: number;
};

type FreesoundResult = {
  id: number;
  name: string;
  duration: number;
  previewUrl: string | null;
};

export type DragData =
  | { type: "sound"; url: string; originalName: string }
  | { type: "image"; url: string; originalName: string }
  | { type: "emoji"; emoji: string };

// ─── Howl helper ────────────────────────────────────────────────────

const howlCache = new Map<string, Howl>();

function playPreview(url: string) {
  let h = howlCache.get(url);
  if (!h) {
    h = new Howl({ src: [url], format: ["mp3", "ogg"], volume: 0.4, preload: true });
    howlCache.set(url, h);
  }
  h.play();
}

// ─── Emoji Picker (inline, searchable) ──────────────────────────────

const EMOJI_LIST = [
  "😀", "😂", "🤣", "😍", "🥰", "😘", "😊", "😎", "🤩", "🥳", "🤯", "😱",
  "😈", "🤡", "💀", "👻", "👽", "🤖", "🎃", "😺", "🙈", "🙉", "🙊", "💩",
  "🔥", "🌊", "💥", "💫", "⭐", "🌟", "✨", "⚡", "☄️", "💧", "🧊", "🌋",
  "🎉", "🎊", "🎈", "🎁", "🏆", "🥇", "💎", "🔮", "🪄", "🧨", "🔫", "⚔️",
  "🛡️", "🚀", "🛸", "🚁", "⚓", "🌀", "🌈", "🌪️", "☢️", "☣️", "⚕️", "🧬",
  "💉", "💊", "🩸", "🧪", "🔬", "🔭", "📡", "🎯", "🎲", "♟️", "🧩", "🎭",
  "🎵", "🎶", "🎺", "📯", "🔔", "🎤", "🎧", "📢", "📣", "🔊", "🔇", "💤",
  "💣", "🔪", "🪦", "⚰️", "🪤", "🧲", "🗝️", "🔑", "🔓", "🔒", "🛠️", "⛓️",
  "🧹", "🪠", "🔧", "⚙️", "📦", "📀", "💿", "📹", "📸", "📷", "🖼️", "🎨",
  "🍺", "🍻", "🍷", "🥃", "🍸", "🍹", "🧉", "🍕", "🍔", "🌭", "🍿", "🧀",
  "🥜", "🌶️", "🍄", "🥚", "🧅", "🥕", "🥦", "🫁", "🧠", "👀", "👁️", "🫀",
  "💋", "🫂", "🤝", "👍", "👎", "👊", "✊", "🤛", "🤜", "👆", "👇", "🖕",
  "💪", "🦵", "🦶", "👂", "👃", "🧑‍🚀", "🧑‍🔧", "🧑‍⚕️", "🧑‍✈️", "🧑‍🏫", "🧑‍🎤", "🧑‍🍳",
  "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮",
  "🦈", "🐙", "🦑", "🐋", "🐬", "🦭", "🐊", "🦎", "🐍", "🐢", "🦖", "🦕",
  "🦟", "🦗", "🐛", "🪱", "🦋", "🐌", "🐞", "🐜", "🦂", "🕷️", "🦀", "🪸",
];

function EmojiPickerGrid({ onSelect }: { onSelect: (emoji: string) => void }) {
  const [search, setSearch] = useState("");
  const filtered = search ? EMOJI_LIST.filter(e => e.includes(search)) : EMOJI_LIST;

  return (
    <div className="space-y-2">
      <input
        type="text"
        placeholder="Search emoji..."
        value={search}
        onChange={e => setSearch(e.target.value)}
        className="w-full bg-slate-800/60 border border-slate-700/30 rounded px-2 py-1.5 text-xs font-mono text-slate-200 placeholder:text-slate-600 outline-none focus:border-cyan-500/50"
      />
      <div className="grid grid-cols-10 gap-1 max-h-48 overflow-y-auto">
        {filtered.map(e => (
          <button
            key={e}
            draggable
            onDragStart={ev => {
              ev.dataTransfer.setData("application/json", JSON.stringify({ type: "emoji", emoji: e } satisfies DragData));
            }}
            onClick={() => onSelect(e)}
            className="w-8 h-8 flex items-center justify-center text-base rounded hover:bg-slate-700/60 cursor-pointer active:scale-90 transition-transform"
          >
            {e}
          </button>
        ))}
      </div>
    </div>
  );
}

// ─── Sounds Tab ─────────────────────────────────────────────────────

function SoundsTab() {
  const [sounds, setSounds] = useState<LibrarySound[]>([]);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState<FreesoundResult[]>([]);
  const [searching, setSearching] = useState(false);
  const [showSearch, setShowSearch] = useState(false);
  const searchTimer = useRef<ReturnType<typeof setInterval>>(undefined);

  const fetchSounds = useCallback(async () => {
    try {
      const res = await fetch("/api/sounds");
      const data = await res.json();
      setSounds(data.sounds || []);
    } catch {}
  }, []);

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

  const { getRootProps, getInputProps } = useDropzone({
    onDrop: async (files) => {
      if (!files.length) return;
      setUploading(true);
      setProgress(0);
      const formData = new FormData();
      files.forEach(f => formData.append("files", f));
      try {
        const xhr = new XMLHttpRequest();
        xhr.upload.onprogress = e => {
          if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100));
        };
        await new Promise<void>((resolve, reject) => {
          xhr.onload = () => { if (xhr.status === 200) resolve(); else reject(); };
          xhr.onerror = () => reject();
          xhr.open("POST", "/api/sounds");
          xhr.send(formData);
        });
        await fetchSounds();
      } catch {}
      setUploading(false);
    },
    accept: { "audio/ogg": [".ogg"] },
    multiple: true,
  });

  const deleteSound = async (filename: string) => {
    await fetch(`/api/sounds?filename=${encodeURIComponent(filename)}`, { method: "DELETE" });
    await fetchSounds();
  };

  // Freesound search with debounce
  const doSearch = useCallback(async (q: string) => {
    if (!q.trim()) { setSearchResults([]); return; }
    setSearching(true);
    try {
      const res = await fetch(`/api/sounds/search?q=${encodeURIComponent(q)}&page=1`);
      const data = await res.json();
      setSearchResults(data.results || []);
    } catch {}
    setSearching(false);
  }, []);

  useEffect(() => {
    clearTimeout(searchTimer.current);
    if (!searchQuery.trim()) { setSearchResults([]); return; }
    searchTimer.current = setTimeout(() => doSearch(searchQuery), 300);
    return () => clearTimeout(searchTimer.current);
  }, [searchQuery, doSearch]);

  const importSound = async (result: FreesoundResult) => {
    if (!result.previewUrl) return;
    await fetch("/api/sounds/import", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: result.name, duration: result.duration, previewUrl: result.previewUrl }),
    });
    await fetchSounds();
  };

  return (
    <div className="space-y-2 p-3">
      {uploading && (
        <div className="space-y-1">
          <div className="flex justify-between text-[9px] font-mono text-slate-500">
            <span>Uploading...</span>
            <span>{progress}%</span>
          </div>
          <div className="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
            <div className="h-full bg-cyan-500 transition-all duration-200" style={{ width: `${progress}%` }} />
          </div>
        </div>
      )}

      <div {...getRootProps()} className="border-2 border-dashed border-slate-700/40 rounded-lg p-3 text-center cursor-pointer hover:border-cyan-600/40 transition-colors">
        <input {...getInputProps()} />
        <p className="text-[10px] font-mono text-slate-500">Drop OGG files here or click to upload</p>
      </div>

      {/* Library */}
      {sounds.length > 0 && (
        <div className="max-h-36 overflow-y-auto space-y-1">
          {sounds.map(s => {
            const filename = s.url.split("/").pop() || "";
            return (
              <SoundRow
                key={s.id}
                label={s.originalName}
                duration={s.duration}
                url={s.url}
                onPlay={() => playPreview(s.url)}
                onDelete={() => deleteSound(filename)}
              />
            );
          })}
        </div>
      )}

      {/* Freesound toggle */}
      <button
        type="button"
        onClick={() => setShowSearch(!showSearch)}
        className="text-[10px] font-mono text-slate-500 hover:text-slate-300 cursor-pointer"
      >
        {showSearch ? "▾ Hide Online Search" : "▸ Search Freesound"}
      </button>

      {showSearch && (
        <div className="space-y-2">
          <input
            type="text"
            placeholder="Search online sounds..."
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
            className="w-full bg-slate-800/60 border border-slate-700/30 rounded px-2 py-1.5 text-xs font-mono text-slate-200 placeholder:text-slate-600 outline-none focus:border-cyan-500/50"
          />
          {searching && <p className="text-[9px] font-mono text-slate-600 italic">Searching...</p>}
          <div className="max-h-36 overflow-y-auto space-y-1">
            {searchResults.map(r => (
              <FreesoundRow
                key={r.id}
                name={r.name}
                duration={r.duration}
                onPreview={() => r.previewUrl && playPreview(r.previewUrl)}
                onImport={() => importSound(r)}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Images Tab ─────────────────────────────────────────────────────

function ImagesTab() {
  const [images, setImages] = useState<LibraryImage[]>([]);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);

  const fetchImages = useCallback(async () => {
    try {
      const res = await fetch("/api/images");
      const data = await res.json();
      setImages(data.images || []);
    } catch {}
  }, []);

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

  const { getRootProps, getInputProps } = useDropzone({
    onDrop: async (files) => {
      if (!files.length) return;
      setUploading(true);
      setProgress(0);
      const formData = new FormData();
      files.forEach(f => formData.append("files", f));
      try {
        const xhr = new XMLHttpRequest();
        xhr.upload.onprogress = e => {
          if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100));
        };
        await new Promise<void>((resolve, reject) => {
          xhr.onload = () => { if (xhr.status === 200) resolve(); else reject(); };
          xhr.onerror = () => reject();
          xhr.open("POST", "/api/images");
          xhr.send(formData);
        });
        await fetchImages();
      } catch {}
      setUploading(false);
    },
    accept: { "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"] },
    multiple: true,
  });

  const deleteImage = async (filename: string) => {
    await fetch(`/api/images?filename=${encodeURIComponent(filename)}`, { method: "DELETE" });
    await fetchImages();
  };

  return (
    <div className="space-y-2 p-3">
      {uploading && (
        <div className="space-y-1">
          <div className="flex justify-between text-[9px] font-mono text-slate-500">
            <span>Uploading...</span>
            <span>{progress}%</span>
          </div>
          <div className="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
            <div className="h-full bg-cyan-500 transition-all duration-200" style={{ width: `${progress}%` }} />
          </div>
        </div>
      )}

      <div {...getRootProps()} className="border-2 border-dashed border-slate-700/40 rounded-lg p-3 text-center cursor-pointer hover:border-cyan-600/40 transition-colors">
        <input {...getInputProps()} />
        <p className="text-[10px] font-mono text-slate-500">Drop images here or click to upload</p>
      </div>

      <div className="grid grid-cols-6 gap-1.5 max-h-48 overflow-y-auto">
        {images.map(img => {
          const filename = img.url.split("/").pop() || "";
          return (
            <div
              key={img.id}
              draggable
              onDragStart={ev => {
                ev.dataTransfer.setData("application/json", JSON.stringify({ type: "image", url: img.url, originalName: img.originalName } satisfies DragData));
              }}
              className="relative group aspect-square rounded border border-slate-700/30 bg-slate-800/40 overflow-hidden cursor-grab active:cursor-grabbing"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={img.url} alt={img.originalName} className="w-full h-full object-cover" />
              <button
                type="button"
                onClick={() => deleteImage(filename)}
                className="absolute top-0.5 right-0.5 w-4 h-4 flex items-center justify-center rounded bg-red-900/80 text-[8px] text-red-300 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
              >
                ✕
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Shared Row Components ──────────────────────────────────────────

function SoundRow({ label, duration, url, onPlay, onDelete }: {
  label: string; duration: number; url: string; onPlay: () => void; onDelete: () => void;
}) {
  return (
    <div
      draggable
      onDragStart={ev => {
        ev.dataTransfer.setData("application/json", JSON.stringify({ type: "sound", url, originalName: label } satisfies DragData));
      }}
      className="flex items-center gap-2 px-2 py-1.5 rounded bg-slate-800/30 border border-slate-700/20 text-[10px] font-mono cursor-grab active:cursor-grabbing hover:bg-slate-700/30 transition-colors group"
    >
      <span className="text-xs">🔊</span>
      <span className="flex-1 truncate text-slate-300">{label}</span>
      <span className="text-slate-600 shrink-0">{duration.toFixed(1)}s</span>
      <button type="button" onClick={e => { e.stopPropagation(); onPlay(); }} className="px-1.5 py-0.5 rounded hover:bg-slate-700/50 text-slate-400 hover:text-cyan-300 cursor-pointer">▶</button>
      <button type="button" onClick={e => { e.stopPropagation(); onDelete(); }} className="px-1.5 py-0.5 rounded hover:bg-red-800/50 text-red-400 cursor-pointer">✕</button>
    </div>
  );
}

function FreesoundRow({ name, duration, onPreview, onImport }: {
  name: string; duration: number; onPreview: () => void; onImport: () => void;
}) {
  return (
    <div className="flex items-center gap-2 px-2 py-1.5 rounded bg-slate-800/20 border border-slate-700/15 text-[10px] font-mono">
      <span className="text-xs">🌐</span>
      <span className="flex-1 truncate text-slate-400">{name}</span>
      <span className="text-slate-600 shrink-0">{duration.toFixed(1)}s</span>
      <button type="button" onClick={onPreview} className="px-1.5 py-0.5 rounded hover:bg-slate-700/50 text-slate-400 hover:text-cyan-300 cursor-pointer">▶</button>
      <button type="button" onClick={onImport} className="px-1.5 py-0.5 rounded bg-cyan-800/40 text-cyan-400 hover:bg-cyan-700/50 cursor-pointer">Import</button>
    </div>
  );
}

// ─── Main ResourceBrowser ───────────────────────────────────────────

type Tab = "sounds" | "images" | "emojis";

export function ResourceBrowser({ visible, onClose }: { visible: boolean; onClose: () => void }) {
  const [tab, setTab] = useState<Tab>("sounds");

  if (!visible) return null;

  return (
    <div className="border-t border-slate-700/30 bg-slate-950/95 mt-3">
      {/* Tab bar */}
      <div className="flex items-center px-2 border-b border-slate-700/20">
        {([
          { key: "sounds" as const, label: "🔊 Sounds" },
          { key: "images" as const, label: "🖼️ Images" },
          { key: "emojis" as const, label: "😀 Emojis" },
        ]).map(t => (
          <button
            key={t.key}
            onClick={() => setTab(t.key)}
            className={`px-3 py-2 text-[10px] font-mono border-b-2 transition-colors cursor-pointer ${
              tab === t.key
                ? "border-cyan-500 text-cyan-300"
                : "border-transparent text-slate-600 hover:text-slate-400"
            }`}
          >
            {t.label}
          </button>
        ))}
        <div className="flex-1" />
        <button onClick={onClose} className="px-2 py-2 text-[10px] font-mono text-slate-600 hover:text-slate-300 cursor-pointer">
          ✕ Close
        </button>
      </div>

      {/* Content */}
      <div className="max-h-72 overflow-y-auto">
        {tab === "sounds" && <SoundsTab />}
        {tab === "images" && <ImagesTab />}
        {tab === "emojis" && <EmojisTab />}
      </div>
    </div>
  );
}

function EmojisTab() {
  const handleSelect = (emoji: string) => {
    // Dispatch a custom event so ItemEditor can pick it up
    window.dispatchEvent(new CustomEvent("emoji-select", { detail: { emoji } }));
  };

  return <div className="p-3"><EmojiPickerGrid onSelect={handleSelect} /></div>;
}