'use client'

import { ACCENT_PRESET_LIST } from '@actuate-media/cms-core/appearance'
import type { ColorMode, SidebarDensity } from '@actuate-media/cms-core/appearance'
import { Check, Monitor, Moon, Sun } from 'lucide-react'

import { SettingsSourceBadge } from './components.js'
import type { UseAppearanceSettings } from './useAppearanceSettings.js'

const COLOR_MODES: { value: ColorMode; label: string; Icon: typeof Sun }[] = [
  { value: 'light', label: 'Light', Icon: Sun },
  { value: 'dark', label: 'Dark', Icon: Moon },
  { value: 'system', label: 'System', Icon: Monitor },
]

const DENSITIES: { value: SidebarDensity; label: string }[] = [
  { value: 'default', label: 'Default' },
  { value: 'compact', label: 'Compact' },
]

function SegmentedGroup<T extends string>({
  label,
  value,
  options,
  canEdit,
  onChange,
}: {
  label: string
  value: T
  options: { value: T; label: string; Icon?: typeof Sun }[]
  canEdit: boolean
  onChange: (v: T) => void
}) {
  return (
    <div
      role="radiogroup"
      aria-label={label}
      className="border-border bg-muted inline-flex flex-wrap rounded-md border p-0.5"
    >
      {options.map(({ value: v, label: text, Icon }) => {
        const active = value === v
        return (
          <button
            key={v}
            type="button"
            role="radio"
            aria-checked={active}
            disabled={!canEdit}
            onClick={() => onChange(v)}
            className={`inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
              active
                ? 'bg-card text-foreground shadow-sm'
                : 'text-muted-foreground hover:text-foreground'
            }`}
          >
            {Icon && <Icon size={14} aria-hidden="true" />}
            {text}
          </button>
        )
      })}
    </div>
  )
}

export function AdminThemeCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit: boolean }) {
  return (
    <section className="border-border bg-card rounded-lg border p-6">
      <header className="mb-4">
        <h3 className="text-foreground text-lg font-medium">Admin theme</h3>
        <p className="text-muted-foreground mt-0.5 text-sm">
          Controls the default look of the admin. Individual users can override the color mode.
        </p>
      </header>

      <div className="space-y-5">
        <div>
          <div className="mb-2 flex items-center gap-2">
            <span className="text-foreground text-base font-medium">Color mode</span>
            <SettingsSourceBadge meta={s.sources.colorMode} />
          </div>
          <SegmentedGroup
            label="Color mode"
            value={s.appearance.colorMode}
            options={COLOR_MODES}
            canEdit={canEdit}
            onChange={s.setColorMode}
          />
        </div>

        <div>
          <div className="mb-2 flex items-center gap-2">
            <span className="text-foreground text-base font-medium">Accent color</span>
            <SettingsSourceBadge meta={s.sources.accent} />
          </div>
          <div
            role="radiogroup"
            aria-label="Accent color"
            className="flex flex-wrap items-center gap-3"
          >
            {ACCENT_PRESET_LIST.map((preset) => {
              const active = s.appearance.accent === preset.name
              const editable = s.sources.accent?.editable !== false
              return (
                <button
                  key={preset.name}
                  type="button"
                  role="radio"
                  aria-checked={active}
                  aria-label={preset.label}
                  title={preset.label}
                  disabled={!canEdit || !editable}
                  onClick={() => s.setAccent(preset.name)}
                  className={`focus-visible:ring-ring relative flex h-9 w-9 items-center justify-center rounded-full transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
                    active ? 'ring-foreground ring-2 ring-offset-2' : ''
                  }`}
                  style={{ backgroundColor: preset.swatch }}
                >
                  {active && <Check size={16} className="text-white" aria-hidden="true" />}
                </button>
              )
            })}
            {/* Text label so accent is not communicated by color alone. */}
            <span className="text-muted-foreground text-sm">
              {ACCENT_PRESET_LIST.find((p) => p.name === s.appearance.accent)?.label ??
                s.appearance.accent}
            </span>
          </div>
        </div>

        <div>
          <div className="mb-2 flex items-center gap-2">
            <span className="text-foreground text-base font-medium">Sidebar density</span>
          </div>
          <SegmentedGroup
            label="Sidebar density"
            value={s.appearance.density}
            options={DENSITIES}
            canEdit={canEdit}
            onChange={s.setDensity}
          />
        </div>
      </div>
    </section>
  )
}
