'use client'

import {
  ChevronLeft,
  Undo2,
  Redo2,
  Monitor,
  Tablet,
  Smartphone,
  Loader2,
  Sparkles,
} from 'lucide-react'
import type { DeviceMode, PageSettings } from '../../hooks/useBuilderState.js'

export interface BuilderToolbarProps {
  collectionSlug: string
  pageSettings: PageSettings
  status: 'DRAFT' | 'PUBLISHED' | 'SCHEDULED'
  dirty: boolean
  saving: boolean
  canUndo: boolean
  canRedo: boolean
  deviceMode: DeviceMode
  onNavigate: (path: string) => void
  onTitleChange: (title: string) => void
  onUndo: () => void
  onRedo: () => void
  onDeviceMode: (mode: DeviceMode) => void
  onSave: () => void
  onPublish: () => void
  onOpenAI?: () => void
}

const STATUS_STYLES: Record<string, string> = {
  DRAFT: 'bg-muted text-muted-foreground',
  PUBLISHED: 'bg-primary/10 text-primary',
  SCHEDULED: 'bg-accent text-accent-foreground',
}

export function BuilderToolbar({
  collectionSlug,
  pageSettings,
  status,
  dirty,
  saving,
  canUndo,
  canRedo,
  deviceMode,
  onNavigate,
  onTitleChange,
  onUndo,
  onRedo,
  onDeviceMode,
  onSave,
  onPublish,
  onOpenAI,
}: BuilderToolbarProps) {
  const collectionLabel = collectionSlug.charAt(0).toUpperCase() + collectionSlug.slice(1)

  return (
    <div
      className="bg-card border-border flex h-14 shrink-0 items-center gap-3 border-b px-4"
      role="toolbar"
      aria-label="Page builder toolbar"
    >
      {/* Back button */}
      <button
        onClick={() => onNavigate(`/collections/${collectionSlug}`)}
        className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm transition-colors"
        aria-label={`Back to ${collectionLabel}`}
      >
        <ChevronLeft size={16} />
        <span className="hidden sm:inline">{collectionLabel}</span>
      </button>

      {/* Divider */}
      <div className="bg-border h-6 w-px" />

      {/* Page title */}
      <input
        type="text"
        value={pageSettings.title}
        onChange={(e) => onTitleChange(e.target.value)}
        placeholder="Untitled Page"
        className="text-foreground focus-visible:ring-ring placeholder:text-muted-foreground min-w-0 flex-1 rounded-sm border-none bg-transparent text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
        aria-label="Page title"
      />

      {/* Status badge */}
      <span
        className={`rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap ${STATUS_STYLES[status] ?? STATUS_STYLES.DRAFT}`}
      >
        {status}
      </span>

      {/* Unsaved indicator */}
      {dirty && !saving && (
        <span
          className="bg-destructive h-2 w-2 shrink-0 rounded-full"
          title="Unsaved changes"
          aria-label="Unsaved changes"
        />
      )}

      {/* Divider */}
      <div className="bg-border h-6 w-px" />

      {/* Undo / Redo */}
      <div className="flex items-center gap-1">
        <button
          onClick={onUndo}
          disabled={!canUndo}
          className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1.5 transition-colors disabled:pointer-events-none disabled:opacity-30"
          aria-label="Undo"
        >
          <Undo2 size={16} />
        </button>
        <button
          onClick={onRedo}
          disabled={!canRedo}
          className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1.5 transition-colors disabled:pointer-events-none disabled:opacity-30"
          aria-label="Redo"
        >
          <Redo2 size={16} />
        </button>
      </div>

      {/* Divider */}
      <div className="bg-border h-6 w-px" />

      {/* Device toggle */}
      <div className="bg-muted flex items-center gap-0.5 rounded-md p-0.5">
        <DeviceButton
          active={deviceMode === 'desktop'}
          onClick={() => onDeviceMode('desktop')}
          label="Desktop view"
        >
          <Monitor size={16} />
        </DeviceButton>
        <DeviceButton
          active={deviceMode === 'tablet'}
          onClick={() => onDeviceMode('tablet')}
          label="Tablet view"
        >
          <Tablet size={16} />
        </DeviceButton>
        <DeviceButton
          active={deviceMode === 'mobile'}
          onClick={() => onDeviceMode('mobile')}
          label="Mobile view"
        >
          <Smartphone size={16} />
        </DeviceButton>
      </div>

      {/* Divider */}
      <div className="bg-border h-6 w-px" />

      {/* AI Generate */}
      {onOpenAI && (
        <>
          <button
            onClick={onOpenAI}
            className="text-primary bg-primary/10 hover:bg-primary/20 flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors"
            aria-label="Generate page with AI"
          >
            <Sparkles size={14} />
            <span className="hidden sm:inline">AI</span>
          </button>
          <div className="bg-border h-6 w-px" />
        </>
      )}

      {/* Save / Publish */}
      <div className="flex items-center gap-2">
        <button
          onClick={onSave}
          disabled={saving || !dirty}
          className="bg-muted text-muted-foreground hover:bg-muted/80 flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50"
        >
          {saving && <Loader2 size={14} className="animate-spin" />}
          {saving ? 'Saving...' : 'Save'}
        </button>
        <button
          onClick={onPublish}
          disabled={saving}
          className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50"
        >
          Publish
        </button>
      </div>
    </div>
  )
}

function DeviceButton({
  active,
  onClick,
  label,
  children,
}: {
  active: boolean
  onClick: () => void
  label: string
  children: React.ReactNode
}) {
  return (
    <button
      onClick={onClick}
      className={`rounded-md p-1.5 transition-colors ${
        active
          ? 'bg-background text-foreground shadow-sm'
          : 'text-muted-foreground hover:text-foreground'
      }`}
      aria-label={label}
      aria-pressed={active}
    >
      {children}
    </button>
  )
}
