'use client'

import { X } from 'lucide-react'
import type { PostHeaderConfig } from '../../lib/post-editor-service.js'

interface PostHeaderPanelProps {
  header: PostHeaderConfig
  canEdit: boolean
  onClose: () => void
  onChange: (patch: Partial<PostHeaderConfig>) => void
}

const LABEL = 'text-foreground mb-1 block text-xs font-medium'
const INPUT =
  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'

const TOGGLES: Array<{ key: keyof PostHeaderConfig; label: string }> = [
  { key: 'showFeaturedImage', label: 'Featured image' },
  { key: 'showExcerpt', label: 'Excerpt' },
  { key: 'showAuthor', label: 'Author' },
  { key: 'showDate', label: 'Date' },
  { key: 'showCategory', label: 'Category' },
  { key: 'showReadingTime', label: 'Reading time' },
]

/** Inspector panel for the post header layout (template-level design config). */
export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHeaderPanelProps) {
  return (
    <aside
      role="dialog"
      aria-label="Edit post header"
      className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
    >
      <div className="border-border flex items-center justify-between border-b px-4 py-3">
        <div className="min-w-0">
          <h2 className="text-foreground truncate text-sm font-medium">Post header</h2>
          <p className="text-muted-foreground text-xs">Layout for every post of this type</p>
        </div>
        <button
          type="button"
          onClick={onClose}
          aria-label="Close header panel"
          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
        >
          <X className="h-4 w-4" aria-hidden />
        </button>
      </div>

      <div className="flex-1 space-y-6 overflow-y-auto p-4">
        <fieldset disabled={!canEdit} className="space-y-3">
          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
            Layout
          </legend>
          <div>
            <label className={LABEL} htmlFor="ph-layout">
              Header style
            </label>
            <select
              id="ph-layout"
              className={INPUT}
              value={header.layout}
              onChange={(e) => onChange({ layout: e.target.value as PostHeaderConfig['layout'] })}
            >
              <option value="centered">Centered</option>
              <option value="left">Left-aligned</option>
              <option value="overlay">Image overlay</option>
            </select>
          </div>
        </fieldset>

        <fieldset disabled={!canEdit} className="space-y-2">
          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
            Show in header
          </legend>
          {TOGGLES.map((t) => {
            const value = header[t.key] === true
            return (
              <button
                key={t.key}
                type="button"
                role="switch"
                aria-checked={value}
                disabled={!canEdit}
                onClick={() => onChange({ [t.key]: !value } as Partial<PostHeaderConfig>)}
                className="border-border text-foreground hover:bg-accent flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm disabled:opacity-50"
              >
                <span>{t.label}</span>
                <span
                  aria-hidden
                  className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${
                    value ? 'bg-primary' : 'bg-muted'
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      value ? 'translate-x-4' : 'translate-x-0.5'
                    }`}
                  />
                </span>
              </button>
            )
          })}
        </fieldset>
      </div>
    </aside>
  )
}
