/**
 * ReaderToolbar — fixed bottom toolbar for the reading view.
 */

import { useTranslation } from "react-i18n-lite";
import type { ReadingProgress } from "../../types/reader";

interface ReaderToolbarProps {
  bookTitle: string;
  chapterTitle: string;
  progress: ReadingProgress | null;
  onBack?: () => void;
  onToggleToc: () => void;
  onToggleSettings: () => void;
  onToggleMarkers?: () => void;
}

export default function ReaderToolbar({
  bookTitle,
  chapterTitle,
  progress,
  onBack,
  onToggleToc,
  onToggleSettings,
  onToggleMarkers,
}: ReaderToolbarProps) {
  const { t } = useTranslation();
  const percentage = progress?.percentage ?? 0;

  return (
    <>
      <header className="reader-top-bar">
        {onBack ? (
          <button
            type="button"
            className="reader-bar-btn"
            onClick={onBack}
            aria-label={t("reader.backToLibraryAria")}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M20 12H4M10 18l-6-6 6-6" />
            </svg>
          </button>
        ) : (
          <button
            type="button"
            className="reader-bar-btn"
            onClick={onToggleToc}
            aria-label={t("reader.tocAria")}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="3" y1="6" x2="21" y2="6" />
              <line x1="3" y1="12" x2="21" y2="12" />
              <line x1="3" y1="18" x2="21" y2="18" />
            </svg>
          </button>
        )}
        <div className="reader-bar-title">
          <span className="reader-bar-book">{bookTitle}</span>
          <span className="reader-bar-chapter">{chapterTitle}</span>
        </div>
        <div className="reader-bar-actions">
          {onBack && (
            <button
              type="button"
              className="reader-bar-btn"
              onClick={onToggleToc}
              aria-label={t("reader.tocAria")}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="3" y1="6" x2="21" y2="6" />
                <line x1="3" y1="12" x2="21" y2="12" />
                <line x1="3" y1="18" x2="21" y2="18" />
              </svg>
            </button>
          )}
          {onToggleMarkers && (
            <button
              type="button"
              className="reader-bar-btn"
              onClick={onToggleMarkers}
              aria-label={t("annotations.inBookPanel")}
            >
              <svg width="20" height="20" 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>
            </button>
          )}
        <button
          type="button"
          className="reader-bar-btn"
          onClick={onToggleSettings}
          aria-label={t("reader.settingsAria")}
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="3" />
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
          </svg>
        </button>
        </div>
      </header>

      <div className="reader-progress-bar">
        <div
          className="reader-progress-fill"
          style={{ width: `${Math.min(percentage, 100)}%` }}
        />
      </div>
    </>
  );
}
