"use client";

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

interface SavedItemsProps {
  /** If provided, renders as an inline panel. Otherwise renders standalone. */
  onUnsave?: (messageId: string) => void;
  refreshTrigger?: number;
}

function getMessageText(msg: Message): string {
  return msg.text || msg.content || "";
}

function getDisplayName(msg: Message): string {
  return (
    msg.user?.name ||
    msg.user?.display_name ||
    msg.user?.displayName ||
    msg.user?.email ||
    "Unknown"
  );
}

function getChannelName(msg: Message): string {
  return (
    (msg as any).channel_name ||
    (msg as any).channelName ||
    (msg as any).channel?.name ||
    ""
  );
}

function getSavedAt(msg: Message): string {
  return (
    (msg as any).saved_at ||
    (msg as any).savedAt ||
    msg.created_at ||
    msg.createdAt ||
    ""
  );
}

function formatDate(iso: string): string {
  if (!iso) return "";
  try {
    const d = new Date(iso);
    return d.toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  } catch {
    return iso;
  }
}

export function SavedItems({ onUnsave, refreshTrigger }: SavedItemsProps) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    setLoading(true);
    setError("");
    getSavedMessages()
      .then((data) => {
        setMessages(Array.isArray(data) ? data : []);
      })
      .catch((err) => {
        console.error("Failed to load saved messages:", err);
        setError("Failed to load saved messages");
      })
      .finally(() => setLoading(false));
  }, [refreshTrigger]);

  const handleUnsave = (msgId: string) => {
    unsaveMessage(msgId)
      .then(() => {
        setMessages((prev) => prev.filter((m) => m.id !== msgId));
        onUnsave?.(msgId);
      })
      .catch((err) => {
        console.error("Failed to unsave message:", err);
      });
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center text-gray-400 animate-pulse py-12">
        Loading saved messages...
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center text-red-500 text-sm py-12">
        {error}
      </div>
    );
  }

  if (messages.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-16">
        <Bookmark size={48} className="text-gray-200 mb-4" />
        <p className="text-gray-400 text-sm">
          No saved messages yet. Bookmark messages to find them here.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {messages.map((msg) => {
        const channelName = getChannelName(msg);
        return (
          <div
            key={msg.id}
            className="group p-4 rounded-lg border border-[#E1E1E1] hover:border-slack-purple/30 bg-white shadow-sm"
          >
            <div className="flex items-start justify-between gap-2 mb-2">
              <div className="flex items-center gap-2 text-xs text-gray-500">
                {channelName && (
                  <span className="inline-flex items-center gap-0.5 bg-gray-100 px-2 py-0.5 rounded">
                    <Hash size={10} />
                    {channelName}
                  </span>
                )}
                <span>{formatDate(getSavedAt(msg))}</span>
              </div>
              <button
                onClick={() => handleUnsave(msg.id)}
                className="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-slack-red p-1 rounded transition-all flex-shrink-0"
                title="Remove from saved"
              >
                <Trash2 size={14} />
              </button>
            </div>
            <p className="text-sm text-gray-800 break-words whitespace-pre-wrap">
              {getMessageText(msg)}
            </p>
            <div className="mt-2 flex items-center gap-1 text-xs text-gray-400">
              <div className="w-5 h-5 rounded bg-slack-purple text-white flex items-center justify-center text-[10px] font-bold">
                {getDisplayName(msg)[0]?.toUpperCase() || "U"}
              </div>
              <span>{getDisplayName(msg)}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}