import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
import { Bookmark, Trash2 } from 'lucide-react';
import { useEditorStore } from '@/core/store';
import { useSecureFileOpen } from '@/hooks/useSecureFileOpen';
import { isSecureItem } from '@/lib/security-utils';
import { Button } from '@/components/ui/button';
import { appleListItem, appleSpringGentle } from '@/lib/apple-animations';

export const BookmarksPanel: React.FC = () => {
  const { bookmarks, files, removeBookmark } = useEditorStore();
  const { openFile, UnlockDialog } = useSecureFileOpen();

  const getFileName = (fileId: string) => {
    return files.find((f) => f.id === fileId)?.name || 'Unknown';
  };

  const visibleBookmarks = useMemo(() => {
    return bookmarks.filter((b) => {
      const file = files.find((f) => f.id === b.fileId);
      return file && !isSecureItem(file, files);
    });
  }, [bookmarks, files]);

  return (
    <div className="h-full flex flex-col">
      <div className="flex items-center justify-between px-3 py-2 border-b border-sidebar-border">
        <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
          Bookmarks
        </span>
        <span className="text-xs text-muted-foreground">{visibleBookmarks.length}</span>
      </div>

      <div className="flex-1 overflow-auto py-1 apple-scroll flex flex-col min-h-0">
        {visibleBookmarks.length === 0 ? (
          <div className="flex-1 flex flex-col items-center justify-center px-6 py-12 min-h-0">
            <div className="w-20 h-20 rounded-2xl bg-muted/50 border border-border flex items-center justify-center mb-4">
              <Bookmark className="w-10 h-10 text-muted-foreground/60" />
            </div>
            <h3 className="text-sm font-medium text-foreground mb-1">No bookmarks yet</h3>
            <p className="text-xs text-muted-foreground text-center max-w-[200px] mb-2">
              Add bookmarks by clicking in the gutter next to a line in the editor.
            </p>
            <p className="text-[11px] text-muted-foreground/70">
              Click a bookmark to jump to that line.
            </p>
          </div>
        ) : (
          visibleBookmarks.map((bookmark) => (
            <motion.div
              key={bookmark.id}
              {...appleListItem}
              transition={appleSpringGentle}
              className="group flex items-center gap-2 px-3 py-2 hover:bg-sidebar-accent cursor-pointer"
              onClick={() => openFile(bookmark.fileId)}
            >
              <Bookmark className="w-4 h-4 text-muted-foreground flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <p className="text-sm truncate">
                  {bookmark.name || `Line ${bookmark.line}`}
                </p>
                <p className="text-xs text-muted-foreground truncate">
                  {getFileName(bookmark.fileId)} · Line {bookmark.line}
                </p>
              </div>
              <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-6 w-6 text-destructive"
                  onClick={(e) => {
                    e.stopPropagation();
                    removeBookmark(bookmark.id);
                  }}
                  title="Remove bookmark"
                >
                  <Trash2 className="w-3 h-3" />
                </Button>
              </div>
            </motion.div>
          ))
        )}
      </div>
      {UnlockDialog}
    </div>
  );
};

export default BookmarksPanel;