import { invoke } from '@tauri-apps/api/core';
import { createSignal } from 'solid-js';

const colorSwatches = [
  { name: 'Primary', class: 'bg-primary' },
  { name: 'Primary Light', class: 'bg-primary-light' },
  { name: 'Primary Dark', class: 'bg-primary-dark' },
  { name: 'Secondary', class: 'bg-secondary' },
  { name: 'Secondary Light', class: 'bg-secondary-light' },
  { name: 'Secondary Dark', class: 'bg-secondary-dark' },
  { name: 'Error', class: 'bg-error' },
  { name: 'Warning', class: 'bg-warning' },
  { name: 'Success', class: 'bg-success' },
  { name: 'Surface', class: 'bg-surface' },
  { name: 'Surface Raised', class: 'bg-surface-raised' },
  { name: 'Background', class: 'bg-background' },
  { name: 'Border', class: 'bg-border' },
];

const typeSizes = [
  { label: 'xs / 12px', token: 'var(--hh-text-xs)' },
  { label: 'sm / 14px', token: 'var(--hh-text-sm)' },
  { label: 'base / 16px', token: 'var(--hh-text-base)' },
  { label: 'lg / 18px', token: 'var(--hh-text-lg)' },
  { label: 'xl / 20px', token: 'var(--hh-text-xl)' },
  { label: '2xl / 24px', token: 'var(--hh-text-2xl)' },
  { label: '3xl / 32px', token: 'var(--hh-text-3xl)' },
  { label: '4xl / 40px', token: 'var(--hh-text-4xl)' },
];

const glowStates = [
  { label: 'Default', intensity: 'var(--hh-glow-intensity-default)', blur: 'var(--hh-glow-blur-md)' },
  { label: 'Focus', intensity: 'var(--hh-glow-intensity-focus)', blur: 'var(--hh-glow-blur-lg)' },
  { label: 'Hover', intensity: 'var(--hh-glow-intensity-hover)', blur: 'var(--hh-glow-blur-lg)' },
  { label: 'Active', intensity: 'var(--hh-glow-intensity-active)', blur: 'var(--hh-glow-blur-xl)' },
];

const surfaceTiers = [
  { label: 'Opaque', token: 'var(--hh-surface-opaque)' },
  { label: 'Translucent', token: 'var(--hh-surface-translucent)' },
  { label: 'Glass', token: 'var(--hh-surface-glass)' },
  { label: 'Ghost', token: 'var(--hh-surface-ghost)' },
];

export function ThemeDemo() {
  const [themeInput, setThemeInput] = createSignal('');
  const [themeError, setThemeError] = createSignal('');
  const [currentTheme, setCurrentTheme] = createSignal(
    document.documentElement.dataset.theme || 'cyberpunk'
  );

  const applyTheme = async (name: string) => {
    try {
      setThemeError('');
      const validated = await invoke<string>('set_theme', { theme: name });
      document.documentElement.dataset.theme = validated;
      setCurrentTheme(validated);
    } catch (err) {
      setThemeError(String(err));
    }
  };

  const resetTheme = () => applyTheme('cyberpunk');
  const tryTheme = () => {
    const name = themeInput().trim();
    if (name) applyTheme(name);
  };

  return (
    <section class="space-y-8">
      <h2 class="text-xl font-bold text-secondary font-display hh-divider-glow">
        Theme System
      </h2>

      {/* === 1. Color Palette === */}
      <div class="hh-panel">
        <h3 class="font-display text-secondary text-lg hh-divider-glow">
          Color Palette
        </h3>
        <div class="grid grid-cols-4 gap-4">
          {colorSwatches.map((swatch) => (
            <div class="flex flex-col items-center gap-2">
              <div
                class={`w-15 h-15 border border-border-bright ${swatch.class}`}
              />
              <span class="font-mono text-text-muted text-xs text-center">{swatch.name}</span>
            </div>
          ))}
          {/* Text color swatch (special - shows text samples) */}
          <div class="flex flex-col items-center gap-2">
            <div class="w-15 h-15 border border-border-bright bg-background flex flex-col items-center justify-center gap-0.5 px-1">
              <span class="text-text text-[8px] leading-none">Text</span>
              <span class="text-text-muted text-[8px] leading-none">Muted</span>
              <span class="text-text-dim text-[8px] leading-none">Dim</span>
            </div>
            <span class="font-mono text-text-muted text-xs text-center">Text</span>
          </div>
        </div>
      </div>

      {/* === 2. Glow Effects === */}
      <div class="hh-panel">
        <h3 class="font-display text-secondary text-lg hh-divider-glow">
          Glow Effects
        </h3>
        <div class="flex flex-wrap gap-6">
          {glowStates.map((state) => (
            <div class="flex flex-col items-center gap-2">
              <div
                class="w-20 h-20 border border-primary bg-surface-raised flex items-center justify-center"
                style={{
                  "box-shadow": `0 0 ${state.blur} var(--hh-glow-spread-sm) color-mix(in srgb, var(--hh-color-primary) calc(${state.intensity} * 100%), transparent)`,
                }}
              >
                <span class="font-mono text-primary text-xs">{state.label}</span>
              </div>
              <span class="font-mono text-text-muted text-xs">{state.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* === 3. Surface Transparency === */}
      <div class="hh-panel">
        <h3 class="font-display text-secondary text-lg hh-divider-glow">
          Surface Transparency
        </h3>
        <div class="hh-pattern-bg p-4">
          <div class="flex flex-wrap gap-4">
            {surfaceTiers.map((tier) => (
              <div class="flex flex-col items-center gap-2">
                <div
                  class="w-28 h-20 border border-border-bright flex items-center justify-center"
                  style={{
                    "background": `color-mix(in srgb, var(--hh-color-surface) calc(${tier.token} * 100%), transparent)`,
                    "backdrop-filter": "blur(6px)",
                    "-webkit-backdrop-filter": "blur(6px)",
                  }}
                >
                  <span class="font-mono text-text text-xs">{tier.label}</span>
                </div>
                <span class="font-mono text-text-muted text-xs">{tier.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* === 4. Typography Scale === */}
      <div class="hh-panel">
        <h3 class="font-display text-secondary text-lg hh-divider-glow">
          Typography Scale
        </h3>
        <div class="grid grid-cols-2 gap-x-8 gap-y-1">
          {/* Left column: Fira Code (mono) */}
          <div class="space-y-2">
            <h4 class="font-mono text-primary text-sm mb-3 font-semibold">Fira Code (mono)</h4>
            {typeSizes.map((size) => (
              <div class="flex items-baseline gap-3">
                <span class="font-mono text-text-dim text-xs w-24 shrink-0">{size.label}</span>
                <span class="font-mono text-text truncate" style={{ "font-size": size.token }}>
                  HoloHue System Online
                </span>
              </div>
            ))}
          </div>
          {/* Right column: Share Tech (display) */}
          <div class="space-y-2">
            <h4 class="font-display text-primary text-sm mb-3 font-semibold">Share Tech (display)</h4>
            {typeSizes.map((size) => (
              <div class="flex items-baseline gap-3">
                <span class="font-mono text-text-dim text-xs w-24 shrink-0">{size.label}</span>
                <span class="font-display text-text truncate" style={{ "font-size": size.token }}>
                  HoloHue System Online
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* === 5. Theme Switch Control === */}
      <div class="hh-panel">
        <h3 class="font-display text-secondary text-lg hh-divider-glow">
          Theme Switch
        </h3>
        <div class="space-y-4">
          <div class="flex items-center gap-3">
            <span class="font-mono text-text-muted text-sm">Active theme:</span>
            <span class="font-mono text-primary text-sm font-semibold">{currentTheme()}</span>
          </div>

          <div class="flex items-center gap-3">
            <button onClick={resetTheme} class="hh-btn hh-btn--primary">
              Reset to Cyberpunk
            </button>
          </div>

          <div class="flex items-center gap-3">
            <input
              type="text"
              placeholder="Enter theme name..."
              value={themeInput()}
              onInput={(e) => setThemeInput(e.currentTarget.value)}
              onKeyDown={(e) => { if (e.key === 'Enter') tryTheme(); }}
              class="hh-input"
            />
            <button onClick={tryTheme} class="hh-btn">
              Apply
            </button>
          </div>

          {themeError() && (
            <div class="bg-error/10 border border-error/30 px-3 py-2">
              <span class="font-mono text-error text-sm">{themeError()}</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}