"use client";

import { useEffect, useState } from "react";
import { getSavedMessages, unsaveMessage, Message } from "@/lib/api";
import { Bookmark, X, Trash2 } from "lucide-react";

interface SavedItemsPanelProps {
  open: boolean;
  onClose: () => void;
}

export function SavedItemsPanel({ open, onClose }: SavedItemsPanelProps) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (open) {
      setLoading(true);
      getSavedMessages()
        .then(setMessages)
        .catch(console.error)
        .finally(() => setLoading(false));
    }
  }, [open]);

  const handleRemove = (msgId: string) => {
    unsaveMessage(msgId)
      .then(() => {
        setMessages((prev) => prev.filter((m) => m.id !== msgId));
      })
      .catch(console.error);
  };

  return (
    <>
      {/* Backdrop */}
      {open && (
        <div className="fixed inset-0 bg-black/30 z-40" onClick={onClose} />
      )}
      {/* Panel */}
      <div
        className={`fixed top-0 right-0 h-full w-80 bg-white shadow-2xl border-l border-gray-200 z-50 transform transition-transform duration-300 ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
          <h3 className="font-bold text-gray-800 flex items-center gap-2">
            <Bookmark size={18} className="text-slack-purple" />
            Saved Items
          </h3>
          <button
            onClick={onClose}
            className="p-1 rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-600"
          >
            <X size={18} />
          </button>
        </div>

        {/* Content */}
        <div className="overflow-y-auto h-[calc(100%-56px)] p-3">
          {loading ? (
            <div className="text-sm text-gray-400 animate-pulse">Loading saved messages...</div>
          ) : messages.length === 0 ? (
            <div className="text-center py-12">
              <Bookmark size={40} className="mx-auto mb-3 text-gray-200" />
              <p className="text-sm text-gray-400">No saved messages yet.</p>
            </div>
          ) : (
            <div className="space-y-2">
              {messages.map((msg) => (
                <div
                  key={msg.id}
                  className="group p-3 rounded-lg border border-gray-200 hover:border-slack-purple/30 bg-white"
                >
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex-1 min-w-0">
                      <p className="text-sm text-gray-700 break-words">
                        {msg.text || msg.content || ""}
                      </p>
                      <p className="text-xs text-gray-400 mt-1">
                        {msg.user?.name || msg.user?.email || "Unknown"}
                      </p>
                    </div>
                    <button
                      onClick={() => handleRemove(msg.id)}
                      className="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-slack-red p-1 rounded transition-all flex-shrink-0"
                    >
                      <Trash2 size={14} />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </>
  );
}