<script setup lang="ts">
import type { AppThemeId } from '~/types/app-theme'

const { themeId, themeOptions, applyTheme } = useAppTheme()

const themeGradients: Record<string, string> = {
  light: 'from-sky-100 via-blue-50 to-indigo-100',
  purple: 'from-violet-100 via-fuchsia-50 to-purple-100',
  dark: 'from-slate-700 via-slate-800 to-slate-900',
  'dark-purple': 'from-violet-900 via-purple-950 to-slate-900'
}

const themeIcons: Record<string, string> = {
  light: 'i-heroicons-sun',
  purple: 'i-heroicons-sparkles',
  dark: 'i-heroicons-moon',
  'dark-purple': 'i-heroicons-star'
}
</script>

<template>
  <div class="space-y-6">
    <div>
      <p class="text-sm leading-relaxed text-[var(--text-muted)]">
        Choose a theme for the entire application. Colors, inputs, buttons, cards, sidebar, and top bar all follow your choice.
        Your preference is saved to this browser.
      </p>
    </div>

    <!-- Theme grid -->
    <div class="grid gap-4 sm:grid-cols-2">
      <button
        v-for="opt in themeOptions"
        :key="opt.id"
        type="button"
        class="app-theme-card text-left"
        :class="themeId === opt.id ? 'app-theme-card-selected' : ''"
        @click="applyTheme(opt.id as AppThemeId)"
      >
        <!-- Header -->
        <div class="flex items-start justify-between gap-3">
          <div class="flex items-center gap-2.5">
            <div
              class="flex h-8 w-8 items-center justify-center rounded-lg"
              :class="themeId === opt.id ? 'bg-[var(--brand-soft)] text-[var(--brand)]' : 'bg-[var(--badge-muted-bg)] text-[var(--text-muted)]'"
            >
              <UIcon :name="themeIcons[opt.id]" class="h-4 w-4" />
            </div>
            <div>
              <p class="font-semibold text-[var(--text-primary)]">{{ opt.label }}</p>
              <p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ opt.description }}</p>
            </div>
          </div>
          <Transition
            enter-active-class="transition duration-200 ease-out"
            enter-from-class="opacity-0 scale-75"
            enter-to-class="opacity-100 scale-100"
            leave-active-class="transition duration-150 ease-in"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0 scale-75"
          >
            <UIcon
              v-if="themeId === opt.id"
              name="i-heroicons-check-circle-solid"
              class="h-6 w-6 shrink-0 text-[var(--brand)]"
            />
          </Transition>
        </div>

        <!-- Gradient preview bar -->
        <div
          class="mt-4 h-8 overflow-hidden rounded-lg bg-gradient-to-r"
          :class="themeGradients[opt.id]"
        />

        <!-- Component preview (scoped to this theme) -->
        <div
          class="mt-3 rounded-lg border border-[var(--sidebar-border)] bg-[var(--page-bg)] p-3"
          :data-theme="opt.id"
        >
          <div class="space-y-3">
            <!-- Buttons row -->
            <div>
              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Buttons</p>
              <div class="flex flex-wrap gap-1.5">
                <UButton size="xs" color="primary">Primary</UButton>
                <UButton size="xs" color="primary" variant="soft">Soft</UButton>
                <UButton size="xs" color="primary" variant="outline">Outline</UButton>
                <UButton size="xs" color="neutral" variant="ghost">Ghost</UButton>
              </div>
            </div>
            <!-- Input preview -->
            <div>
              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Input</p>
              <div class="max-w-[200px]">
                <UInput size="xs" placeholder="Search policies..." icon="i-heroicons-magnifying-glass" disabled />
              </div>
            </div>
            <!-- Badges row -->
            <div>
              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Badges</p>
              <div class="flex flex-wrap gap-1.5">
                <UBadge color="primary" variant="soft" size="xs">Active</UBadge>
                <UBadge color="success" variant="soft" size="xs">Bound</UBadge>
                <UBadge color="warning" variant="soft" size="xs">Pending</UBadge>
                <UBadge color="error" variant="soft" size="xs">Overdue</UBadge>
              </div>
            </div>
          </div>
        </div>
      </button>
    </div>

    <!-- Extra info -->
    <div class="rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-4 shadow-sm">
      <div class="flex gap-3">
        <UIcon name="i-heroicons-information-circle" class="mt-0.5 h-5 w-5 shrink-0 text-[var(--brand)]" />
        <div class="text-sm text-[var(--text-muted)]">
          <p>
            Theme applies instantly to all pages including sidebar navigation, cards, inputs, buttons, badges, and KPI panels.
            You can also quickly switch themes from the
            <UIcon name="i-heroicons-swatch" class="inline h-3.5 w-3.5" />
            icon in the top bar.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
