import React, { useState } from 'react'
import { Bookmark } from './Settings'

interface BookmarksBarProps {
  bookmarks: Bookmark[]
  onOpen: (b: Bookmark) => void
  onRemove: (index: number) => void
}

const BookmarksBar: React.FC<BookmarksBarProps> = ({ bookmarks, onOpen, onRemove }) => {
  const [expanded, setExpanded] = useState(false)

  if (!bookmarks.length) return null

  return (
    <div className="bookmarks-bar">
      <div className="bookmarks-bar-header" onClick={() => setExpanded(e => !e)}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
        </svg>
        <span>Закладки ({bookmarks.length})</span>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          {expanded ? <polyline points="18 15 12 9 6 15" /> : <polyline points="6 9 12 15 18 9" />}
        </svg>
      </div>

      <div className={`bookmarks-collapse${expanded ? ' open' : ''}`}>
        <div className="bookmarks-collapse-inner">
        <div className="bookmarks-list">
          {bookmarks.map((b, i) => {
            const hasMoviePoster = !!b.poster && b.poster !== b.siteIcon
            return (
              <div key={i} className="bookmark-card" onClick={() => onOpen(b)}>
                <div className="bookmark-poster">
                  {b.poster
                    ? <img src={b.poster} alt={b.title} onError={e => {
                        const t = e.currentTarget
                        t.style.display = 'none'
                        const ph = t.nextElementSibling as HTMLElement | null
                        if (ph) ph.style.display = 'flex'
                      }} />
                    : null}
                  <div className="bookmark-poster-placeholder" style={b.poster ? { display: 'none' } : undefined}>
                    {b.title.charAt(0).toUpperCase()}
                  </div>
                </div>
                <div className="bookmark-info">
                  <div className="bookmark-title" title={b.title}>{b.title}</div>
                  {b.source && (
                    <div className="bookmark-source-row">
                      {hasMoviePoster && b.siteIcon && (
                        <img className="bookmark-source-icon" src={b.siteIcon} alt="" onError={e => { e.currentTarget.style.display = 'none' }} />
                      )}
                      <span className="bookmark-source">{b.source}</span>
                    </div>
                  )}
                </div>
                <button
                  className="bookmark-remove"
                  onClick={e => { e.stopPropagation(); onRemove(i) }}
                  title="Удалить закладку"
                >✕</button>
              </div>
            )
          })}
        </div>
        </div>
      </div>
    </div>
  )
}

export default BookmarksBar