"use client";

import { useEffect, useState, useRef } from "react";
import { getCustomEmojis, uploadCustomEmoji, CustomEmoji } from "@/lib/api";
import { Plus, Smile, Trash2, Upload } from "lucide-react";

export function EmojisTab() {
  const [emojis, setEmojis] = useState<CustomEmoji[]>([]);
  const [loading, setLoading] = useState(true);
  const [name, setName] = useState("");
  const [file, setFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState("");
  const fileRef = useRef<HTMLInputElement>(null);

  const loadEmojis = () => {
    setLoading(true);
    getCustomEmojis()
      .then(setEmojis)
      .catch(console.error)
      .finally(() => setLoading(false));
  };

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

  const handleUpload = () => {
    if (!name.trim() || !file) {
      setError("Please provide a name and file.");
      return;
    }
    setError("");
    setUploading(true);
    uploadCustomEmoji(name.trim(), file)
      .then((emoji) => {
        setEmojis((prev) => [...prev, emoji]);
        setName("");
        setFile(null);
        if (fileRef.current) fileRef.current.value = "";
      })
      .catch((e) => setError(e.message || "Upload failed"))
      .finally(() => setUploading(false));
  };

  return (
    <div className="space-y-6">
      {/* Upload form */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 className="font-bold text-gray-800 mb-4 flex items-center gap-2">
          <Plus size={18} className="text-slack-purple" />
          Add Custom Emoji
        </h3>
        <div className="flex flex-wrap items-end gap-4">
          <div>
            <label className="block text-xs font-semibold text-gray-500 mb-1">Name</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="emoji_name"
              className="px-3 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-slack-purple focus:border-transparent text-sm"
            />
          </div>
          <div>
            <label className="block text-xs font-semibold text-gray-500 mb-1">Image</label>
            <input
              ref={fileRef}
              type="file"
              accept="image/png,image/jpeg,image/gif"
              onChange={(e) => setFile(e.target.files?.[0] || null)}
              className="text-sm text-gray-600 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-slack-purple file:text-white file:cursor-pointer file:text-sm hover:file:bg-slack-darkpurple"
            />
          </div>
          <button
            onClick={handleUpload}
            disabled={uploading}
            className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
          >
            <Upload size={14} />
            {uploading ? "Uploading..." : "Upload"}
          </button>
        </div>
        {error && <p className="mt-2 text-xs text-slack-red">{error}</p>}
      </div>

      {/* Emoji grid */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 className="font-bold text-gray-800 mb-4 flex items-center gap-2">
          <Smile size={18} className="text-slack-purple" />
          Custom Emojis ({emojis.length})
        </h3>
        {loading ? (
          <div className="text-sm text-gray-400 animate-pulse">Loading emojis...</div>
        ) : emojis.length === 0 ? (
          <div className="text-center py-8">
            <Smile size={48} className="mx-auto mb-3 text-gray-200" />
            <p className="text-sm text-gray-400">No custom emojis yet.</p>
          </div>
        ) : (
          <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4">
            {emojis.map((emoji) => (
              <div
                key={emoji.id}
                className="flex flex-col items-center gap-1 p-3 rounded-lg border border-gray-200 hover:border-slack-purple hover:bg-slack-purple/5 transition-colors group"
              >
                <img src={emoji.url} alt={emoji.name} className="w-10 h-10 object-contain" />
                <span className="text-xs text-gray-600 truncate max-w-full">:{emoji.name}:</span>
                <button
                  className="opacity-0 group-hover:opacity-100 text-slack-red hover:bg-slack-red/10 rounded p-1 transition-all"
                  title="Delete emoji"
                >
                  <Trash2 size={12} />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}