'use client';

import { useTheme } from '../../lib/theme';
import { useLibraryLayout, LibraryLayoutType } from '../../hooks/useLibraryLayout';

type FontFamily = 'serif' | 'sans' | 'mono';
type FontSize = 'small' | 'medium' | 'large' | 'extra-large';
type ReadingWidth = 'narrow' | 'medium' | 'wide';

interface Settings {
  theme: 'light' | 'dark';
  fontFamily: FontFamily;
  fontSize: FontSize;
  readingWidth: ReadingWidth;
  readingSpeed: number; // words per minute
}

interface AppearanceSettingsProps {
  settings: Settings;
  onSettingChange: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
}

export default function AppearanceSettings({
  settings,
  onSettingChange
}: AppearanceSettingsProps) {
  const { layout, setLayout } = useLibraryLayout();

  return (
    <div className="space-y-6">
      {/* Theme Settings */}
      <div className="theme-card theme-shadow rounded-lg p-6">
        <h2 className="text-xl font-semibold theme-header mb-4">Theme</h2>

        <div>
          <label className="block text-sm font-medium theme-header mb-2">
            Color Theme
          </label>
          <div className="flex gap-4">
            <button
              onClick={() => onSettingChange('theme', 'light')}
              className={`px-4 py-2 rounded-lg border transition-colors ${
                settings.theme === 'light'
                  ? 'theme-accent-bg text-white border-transparent'
                  : 'theme-card theme-text theme-border hover:border-gray-400'
              }`}
            >
              ☀️ Light
            </button>
            <button
              onClick={() => onSettingChange('theme', 'dark')}
              className={`px-4 py-2 rounded-lg border transition-colors ${
                settings.theme === 'dark'
                  ? 'theme-accent-bg text-white border-transparent'
                  : 'theme-card theme-text theme-border hover:border-gray-400'
              }`}
            >
              🌙 Dark
            </button>
          </div>
        </div>
      </div>

      {/* Library Layout */}
      <div className="theme-card theme-shadow rounded-lg p-6">
        <h2 className="text-xl font-semibold theme-header mb-4">Library Layout</h2>

        <div className="space-y-3">
          <div className="flex gap-4 flex-wrap">
            <button
              onClick={() => setLayout('sidebar')}
              className={`px-4 py-2 rounded-lg border transition-colors ${
                layout === 'sidebar'
                  ? 'theme-accent-bg text-white border-transparent'
                  : 'theme-card theme-text theme-border hover:border-gray-400'
              }`}
            >
              📋 Sidebar Layout
            </button>
            <button
              onClick={() => setLayout('toolbar')}
              className={`px-4 py-2 rounded-lg border transition-colors ${
                layout === 'toolbar'
                  ? 'theme-accent-bg text-white border-transparent'
                  : 'theme-card theme-text theme-border hover:border-gray-400'
              }`}
            >
              🛠️ Toolbar Layout
            </button>
            <button
              onClick={() => setLayout('minimal')}
              className={`px-4 py-2 rounded-lg border transition-colors ${
                layout === 'minimal'
                  ? 'theme-accent-bg text-white border-transparent'
                  : 'theme-card theme-text theme-border hover:border-gray-400'
              }`}
            >
              ✨ Minimal Layout
            </button>
          </div>
          <div className="text-sm theme-text">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3">
              <div className="text-xs">
                <strong>Sidebar:</strong> Filters and controls in a side panel, maximum space for stories
              </div>
              <div className="text-xs">
                <strong>Toolbar:</strong> Everything visible at once with integrated search and tag filters
              </div>
              <div className="text-xs">
                <strong>Minimal:</strong> Clean, content-focused design with floating controls
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Reading Experience */}
      <div className="theme-card theme-shadow rounded-lg p-6">
        <h2 className="text-xl font-semibold theme-header mb-4">Reading Experience</h2>

        <div className="space-y-6">
          {/* Font Family */}
          <div>
            <label className="block text-sm font-medium theme-header mb-2">
              Font Family
            </label>
            <div className="flex gap-4 flex-wrap">
              <button
                onClick={() => onSettingChange('fontFamily', 'serif')}
                className={`px-4 py-2 rounded-lg border transition-colors font-serif ${
                  settings.fontFamily === 'serif'
                    ? 'theme-accent-bg text-white border-transparent'
                    : 'theme-card theme-text theme-border hover:border-gray-400'
                }`}
              >
                Serif
              </button>
              <button
                onClick={() => onSettingChange('fontFamily', 'sans')}
                className={`px-4 py-2 rounded-lg border transition-colors font-sans ${
                  settings.fontFamily === 'sans'
                    ? 'theme-accent-bg text-white border-transparent'
                    : 'theme-card theme-text theme-border hover:border-gray-400'
                }`}
              >
                Sans Serif
              </button>
              <button
                onClick={() => onSettingChange('fontFamily', 'mono')}
                className={`px-4 py-2 rounded-lg border transition-colors font-mono ${
                  settings.fontFamily === 'mono'
                    ? 'theme-accent-bg text-white border-transparent'
                    : 'theme-card theme-text theme-border hover:border-gray-400'
                }`}
              >
                Monospace
              </button>
            </div>
          </div>

          {/* Font Size */}
          <div>
            <label className="block text-sm font-medium theme-header mb-2">
              Font Size
            </label>
            <div className="flex gap-4 flex-wrap">
              {(['small', 'medium', 'large', 'extra-large'] as FontSize[]).map((size) => (
                <button
                  key={size}
                  onClick={() => onSettingChange('fontSize', size)}
                  className={`px-4 py-2 rounded-lg border transition-colors capitalize ${
                    settings.fontSize === size
                      ? 'theme-accent-bg text-white border-transparent'
                      : 'theme-card theme-text theme-border hover:border-gray-400'
                  }`}
                >
                  {size.replace('-', ' ')}
                </button>
              ))}
            </div>
          </div>

          {/* Reading Width */}
          <div>
            <label className="block text-sm font-medium theme-header mb-2">
              Reading Width
            </label>
            <div className="flex gap-4">
              {(['narrow', 'medium', 'wide'] as ReadingWidth[]).map((width) => (
                <button
                  key={width}
                  onClick={() => onSettingChange('readingWidth', width)}
                  className={`px-4 py-2 rounded-lg border transition-colors capitalize ${
                    settings.readingWidth === width
                      ? 'theme-accent-bg text-white border-transparent'
                      : 'theme-card theme-text theme-border hover:border-gray-400'
                  }`}
                >
                  {width}
                </button>
              ))}
            </div>
          </div>

          {/* Reading Speed */}
          <div>
            <label className="block text-sm font-medium theme-header mb-2">
              Reading Speed (words per minute)
            </label>
            <div className="flex items-center gap-4">
              <input
                type="range"
                min="100"
                max="400"
                step="25"
                value={settings.readingSpeed}
                onChange={(e) => onSettingChange('readingSpeed', parseInt(e.target.value))}
                className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
              />
              <div className="min-w-[80px] text-center">
                <span className="text-lg font-medium theme-header">{settings.readingSpeed}</span>
                <div className="text-xs theme-text">WPM</div>
              </div>
            </div>
            <div className="flex justify-between text-xs theme-text mt-1">
              <span>Slow (100)</span>
              <span>Average (200)</span>
              <span>Fast (400)</span>
            </div>
          </div>
        </div>
      </div>

      {/* Preview */}
      <div className="theme-card theme-shadow rounded-lg p-6">
        <h2 className="text-xl font-semibold theme-header mb-4">Preview</h2>

        <div
          className="p-4 theme-card border theme-border rounded-lg"
          style={{
            fontFamily: settings.fontFamily === 'serif' ? 'Georgia, Times, serif'
              : settings.fontFamily === 'sans' ? 'Inter, system-ui, sans-serif'
              : 'Monaco, Consolas, monospace',
            fontSize: settings.fontSize === 'small' ? '14px'
              : settings.fontSize === 'medium' ? '16px'
              : settings.fontSize === 'large' ? '18px'
              : '20px',
            maxWidth: settings.readingWidth === 'narrow' ? '600px'
              : settings.readingWidth === 'medium' ? '800px'
              : '1000px',
          }}
        >
          <h3 className="text-xl font-bold theme-header mb-2">Sample Story Title</h3>
          <p className="theme-text mb-4">by Sample Author</p>
          <p className="theme-text leading-relaxed">
            This is how your story text will look with the current settings.
            The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
            et dolore magna aliqua.
          </p>
        </div>
      </div>
    </div>
  );
}