"use client";

import { useEffect, useState } from "react";
import { getBookmarks, addBookmark, deleteBookmark, BookmarkItem } from "@/lib/api";
import { Bookmark, Plus, Trash2, X, Link as LinkIcon, ExternalLink } from "lucide-react";

interface BookmarksProps {
  channelId: string;
}

export function Bookmarks({ channelId }: BookmarksProps) {
  const [bookmarks, setBookmarks] = useState<BookmarkItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showForm, setShowForm] = useState(false);
  const [title, setTitle] = useState("");
  const [url, setUrl] = useState("");
  const [emoji, setEmoji] = useState("📌");
  const [saving, setSaving] = useState(false);

  const loadBookmarks = () => {
    setLoading(true);
    setError("");
    getBookmarks(channelId)
      .then((data) => setBookmarks(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load bookmarks:", err);
        setError("Failed to load bookmarks");
      })
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    loadBookmarks();
  }, [channelId]); // eslint-disable-line react-hooks/exhaustive-deps

  const handleAdd = () => {
    if (!title.trim()) return;
    setSaving(true);
    addBookmark(channelId, {
      title: title.trim(),
      url: url.trim() || undefined,
      emoji: emoji || undefined,
    })
      .then((newBookmark) => {
        setBookmarks((prev) => [...prev, newBookmark]);
        setTitle("");
        setUrl("");
        setEmoji("📌");
        setShowForm(false);
      })
      .catch((err) => {
        console.error("Failed to add bookmark:", err);
        setError("Failed to add bookmark");
      })
      .finally(() => setSaving(false));
  };

  const handleDelete = (bookmarkId: string) => {
    deleteBookmark(channelId, bookmarkId)
      .then(() => {
        setBookmarks((prev) => prev.filter((b) => b.id !== bookmarkId));
      })
      .catch((err) => console.error("Failed to delete bookmark:", err));
  };

  return (
    <div className="space-y-3">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h4 className="text-xs font-semibold text-gray-500 uppercase flex items-center gap-1.5">
          <Bookmark size={14} />
          Bookmarks ({bookmarks.length})
        </h4>
        <button
          onClick={() => setShowForm(!showForm)}
          className="p-1 rounded text-gray-400 hover:text-slack-purple hover:bg-gray-100 transition-colors"
        >
          {showForm ? <X size={14} /> : <Plus size={14} />}
        </button>
      </div>

      {/* Form */}
      {showForm && (
        <div className="p-3 rounded-lg border border-gray-200 bg-gray-50 space-y-2">
          <div className="flex gap-2">
            <input
              type="text"
              value={emoji}
              onChange={(e) => setEmoji(e.target.value)}
              placeholder="Emoji"
              maxLength={2}
              className="w-12 px-2 py-1.5 rounded-md border border-gray-300 text-center text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
            <input
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="Bookmark title"
              className="flex-1 px-2 py-1.5 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
            />
          </div>
          <input
            type="url"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            placeholder="URL (optional)"
            className="w-full px-2 py-1.5 rounded-md border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-slack-purple"
          />
          {error && <p className="text-xs text-slack-red">{error}</p>}
          <button
            onClick={handleAdd}
            disabled={saving || !title.trim()}
            className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-slack-purple text-white text-xs font-medium hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
          >
            <Plus size={12} />
            {saving ? "Adding..." : "Add Bookmark"}
          </button>
        </div>
      )}

      {/* List */}
      {loading ? (
        <div className="text-xs text-gray-400 animate-pulse">Loading bookmarks...</div>
      ) : bookmarks.length === 0 ? (
        <p className="text-xs text-gray-400">No bookmarks yet.</p>
      ) : (
        <div className="space-y-2 max-h-64 overflow-y-auto">
          {bookmarks.map((bm) => (
            <div
              key={bm.id}
              className="group p-2 rounded-md bg-gray-50 border border-gray-100 hover:border-gray-200 transition-colors"
            >
              <div className="flex items-start justify-between gap-2">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-1.5">
                    {bm.emoji && <span className="text-sm">{bm.emoji}</span>}
                    {bm.url ? (
                      <a
                        href={bm.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-sm text-gray-700 hover:text-slack-purple truncate flex items-center gap-0.5"
                      >
                        <LinkIcon size={10} className="flex-shrink-0" />
                        {bm.title}
                        <ExternalLink size={9} className="flex-shrink-0 opacity-50" />
                      </a>
                    ) : (
                      <span className="text-sm text-gray-700 truncate">{bm.title}</span>
                    )}
                  </div>
                  {bm.created_at && (
                    <p className="text-xs text-gray-400 mt-0.5">
                      {new Date(bm.created_at).toLocaleDateString("en-US", {
                        month: "short",
                        day: "numeric",
                      })}
                    </p>
                  )}
                </div>
                <button
                  onClick={() => handleDelete(bm.id)}
                  className="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-slack-red p-0.5 rounded transition-all flex-shrink-0"
                >
                  <Trash2 size={12} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default Bookmarks;