import React from 'react';
import type { EditorStore } from '../../store/editorStore';
import type { Breakpoint } from '../../types';
import { SHORTCUT_LABELS } from '../../hooks/useShortcuts';

declare const jalpiEditorConfig: { adminUrl: string; previewUrl: string };

interface Props {
  store:            EditorStore;
  postTitle:        string;
  showElements:     boolean;
  onToggleElements: () => void;
  onSave:           () => void;
  onPublish:        () => void;
  onPreview:        () => void;
  onOpenRevisions:  () => void;
}

// ── Icons ─────────────────────────────────────────────────────────────────────

const ElementsIcon = () => (
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
    <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
  </svg>
);

const DesktopIcon = () => (
  <svg width="16" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="3" width="20" height="14" rx="2"/>
    <line x1="8" y1="21" x2="16" y2="21"/>
    <line x1="12" y1="17" x2="12" y2="21"/>
  </svg>
);

const LaptopIcon = () => (
  <svg width="16" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9"/>
    <path d="M2 16h20"/>
  </svg>
);

const TabletIcon = () => (
  <svg width="13" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="2" width="16" height="20" rx="2"/>
    <circle cx="12" cy="17.5" r="1.25" fill="currentColor" stroke="none"/>
  </svg>
);

const MobileIcon = () => (
  <svg width="10" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <rect x="5" y="2" width="14" height="20" rx="2"/>
    <circle cx="12" cy="17.5" r="1.25" fill="currentColor" stroke="none"/>
  </svg>
);

const UndoIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>
  </svg>
);

const RedoIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M15 14l5-5-5-5"/><path d="M20 9H9.5a5.5 5.5 0 0 0 0 11H13"/>
  </svg>
);

const EyeIcon = () => (
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
    <circle cx="12" cy="12" r="3"/>
  </svg>
);

const ChevronDown = () => (
  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="6 9 12 15 18 9"/>
  </svg>
);

const DotsIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <circle cx="12" cy="5" r="1" fill="currentColor" stroke="none"/>
    <circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/>
    <circle cx="12" cy="19" r="1" fill="currentColor" stroke="none"/>
  </svg>
);

// ── Component ─────────────────────────────────────────────────────────────────

export function TopBar({
  store, postTitle, showElements, onToggleElements,
  onSave, onPublish, onPreview, onOpenRevisions,
}: Props) {
  const { state } = store;

  const breakpoints: { id: Breakpoint; icon: React.ReactElement; label: string }[] = [
    { id: 'desktop', icon: <DesktopIcon />, label: 'Desktop' },
    { id: 'tablet',  icon: <TabletIcon />,  label: 'Tablet' },
    { id: 'mobile',  icon: <MobileIcon />,  label: 'Mobile' },
  ];

  return (
    <div className="jalpi-topbar">
      {/* ── Left ──────────────────────────────────────────── */}
      <div className="jalpi-topbar__left">
        {/* Elements panel toggle */}
        <button
          className={`jalpi-topbar__icon-btn${showElements ? ' is-active' : ''}`}
          onClick={onToggleElements}
          title={showElements ? 'Hide Elements Panel' : 'Show Elements Panel'}
        >
          <ElementsIcon />
        </button>

        <div className="jalpi-topbar__divider" />

        {/* Logo */}
        <a className="jalpi-topbar__logo" href={jalpiEditorConfig.adminUrl} title="Back to WordPress">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <rect width="22" height="22" rx="6" fill="url(#cbLogo2)"/>
            <path d="M5 7h7M5 11h9M5 15h5" stroke="#fff" strokeWidth="1.75" strokeLinecap="round"/>
            <path d="M16 13.5l2-1.5-2-1.5" stroke="rgba(255,255,255,0.7)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M13 16l2-9" stroke="rgba(255,255,255,0.5)" strokeWidth="1.25" strokeLinecap="round"/>
            <defs>
              <linearGradient id="cbLogo2" x1="0" y1="0" x2="22" y2="22">
                <stop offset="0%" stopColor="#1a1a1a"/>
                <stop offset="100%" stopColor="#444444"/>
              </linearGradient>
            </defs>
          </svg>
          <span>Jalpi Page Builder</span>
        </a>

        <div className="jalpi-topbar__divider" />

        {/* Page title */}
        <div className="jalpi-topbar__page-title">
          <span className="jalpi-topbar__title">{postTitle || 'Untitled'}</span>
          {state.isDirty && <span className="jalpi-topbar__dirty">●</span>}
          <span className="jalpi-topbar__title-caret"><ChevronDown /></span>
        </div>
      </div>

      {/* ── Center: breakpoints ───────────────────────────── */}
      <div className="jalpi-topbar__center">
        {breakpoints.map((bp) => (
          <button
            key={bp.id}
            className={`jalpi-topbar__bp-btn${state.breakpoint === bp.id ? ' is-active' : ''}`}
            onClick={() => store.setBreakpoint(bp.id)}
            title={bp.label}
          >
            <span className="jalpi-topbar__bp-icon">{bp.icon}</span>
            <span className="jalpi-topbar__bp-label">{bp.label}</span>
          </button>
        ))}
      </div>

      {/* ── Right ─────────────────────────────────────────── */}
      <div className="jalpi-topbar__right">
        {/* Undo / Redo */}
        <button
          className="jalpi-topbar__icon-btn"
          onClick={store.undo}
          disabled={state.historyIndex <= 0}
          title={`Undo (${SHORTCUT_LABELS.undo})`}
        >
          <UndoIcon />
        </button>
        <button
          className="jalpi-topbar__icon-btn"
          onClick={store.redo}
          disabled={state.historyIndex >= state.history.length - 1}
          title={`Redo (${SHORTCUT_LABELS.redo})`}
        >
          <RedoIcon />
        </button>

        <div className="jalpi-topbar__divider" />

        {/* Zoom */}
        <div className="jalpi-topbar__zoom-wrap">
          <button className="jalpi-topbar__zoom-btn" onClick={() => store.setZoom(state.zoom - 10)} title="Zoom out">−</button>
          <span className="jalpi-topbar__zoom-label">{state.zoom}%</span>
          <button className="jalpi-topbar__zoom-btn" onClick={() => store.setZoom(state.zoom + 10)} title="Zoom in">+</button>
        </div>

        <div className="jalpi-topbar__divider" />

        {/* Preview */}
        <button className="jalpi-topbar__icon-btn" onClick={onPreview} title="Preview in browser">
          <EyeIcon />
        </button>

        <div className="jalpi-topbar__divider" />

        {/* Save / Publish */}
        <button
          className="jalpi-btn jalpi-btn--secondary"
          onClick={onSave}
          disabled={state.isSaving || !state.isDirty}
          title={`Save (${SHORTCUT_LABELS.save})`}
        >
          {state.isSaving ? 'Saving…' : 'Save'}
        </button>
        <button
          className="jalpi-btn jalpi-btn--primary"
          onClick={onPublish}
          disabled={state.isPublishing}
          title="Publish page"
        >
          {state.isPublishing ? 'Publishing…' : 'Publish'}
        </button>

        {/* 3-dot menu */}
        <button className="jalpi-topbar__icon-btn" title="More options">
          <DotsIcon />
        </button>
      </div>
    </div>
  );
}
