opsxsql/frontend/src/pages/AppearanceSettings.tsx

import { useState, useEffect, useCallback } from 'react';
import { useTheme, THEME_OPTIONS, type Theme } from '@/hooks/useTheme';
import { LOGIN_STYLE_OPTIONS, type LoginStyle } from '@/pages/LoginPage';
import { Check, Save, Loader2 } from 'lucide-react';
import api from '@/api/request';
import { toast } from '@/hooks/useToast';

// Login style preview color themes (independent from app theme)
const LOGIN_PREVIEW_COLORS: Record<LoginStyle, { bg: string; accent: string; label: string }> = {
  split: { bg: 'linear-gradient(135deg, #080c14 0%, #0c1420 100%)', accent: '#00d4aa', label: '晶格科技' },
  centered: { bg: 'linear-gradient(180deg, #0a0a1a 0%, #1a1035 50%, #2d1810 100%)', accent: '#fbbf24', label: '晨曦微光' },
  sidepanel: { bg: 'linear-gradient(180deg, #020810 0%, #062030 100%)', accent: '#06b6d4', label: '深海鲸歌' },
  fullimage: { bg: '#0d1117', accent: '#6366f1', label: 'GitHub/AWS' },
  minimal: { bg: 'linear-gradient(160deg, #0a0a1a 0%, #0f0a2a 40%, #150825 70%, #0a0a1a 100%)', accent: '#ec4899', label: 'Premium Dark' },
};

export default function AppearanceSettings() {
  const { theme, setTheme } = useTheme();
  const [loginStyle, setLoginStyle] = useState<LoginStyle>('split');
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(true);
  const [dirty, setDirty] = useState(false);

  useEffect(() => {
    api.get<{ theme?: string; login_style?: string }>('/user/preferences')
      .then(prefs => {
        if (prefs?.theme) {
          const t = prefs.theme;
          if (t === 'dark' || t === 'light') {
            setTheme(t === 'dark' ? 'ocean-deep' : 'light-professional');
          } else if (THEME_OPTIONS.some(o => o.id === t)) {
            setTheme(t as Theme);
          }
        }
        if (prefs?.login_style) setLoginStyle(prefs.login_style as LoginStyle);
      })
      .catch(() => {
        const stored = localStorage.getItem('login-style') as LoginStyle | null;
        if (stored) setLoginStyle(stored);
      })
      .finally(() => setLoading(false));
  }, []);

  const handleThemeChange = (t: Theme) => {
    setTheme(t);
    setDirty(true);
  };

  const handleLoginStyleChange = (id: LoginStyle) => {
    setLoginStyle(id);
    setDirty(true);
  };

  const handleSave = useCallback(async () => {
    setSaving(true);
    try {
      await api.put('/user/preferences', {
        theme,
        login_style: loginStyle,
      });
      localStorage.setItem('login-style', loginStyle);
      setDirty(false);
      toast('success', '外观设置已保存');
    } catch {
      toast('error', '保存失败');
    } finally {
      setSaving(false);
    }
  }, [theme, loginStyle]);

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Loader2 className="w-5 h-5 animate-spin text-[var(--dg-text-muted)]" />
      </div>
    );
  }

  return (
    <div className="space-y-10">
      {/* ===== Theme Mode Section ===== */}
      <div>
        <h3 className="text-sm font-semibold mb-1">界面配色</h3>
        <p className="text-xs text-[var(--dg-text-muted)] mb-4">选择界面配色方案，即时预览效果</p>
        <div className="grid grid-cols-5 gap-3">
          {THEME_OPTIONS.map(opt => (
            <button
              key={opt.id}
              onClick={() => handleThemeChange(opt.id)}
              className={`group relative rounded-xl p-4 text-left transition-all bg-[var(--dg-bg-tertiary)] hover:bg-[var(--dg-bg-hover)] ${
                theme === opt.id ? 'ring-2 ring-blue-500/50' : ''
              }`}
            >
              {/* Color preview swatch */}
              <div
                className="w-full h-8 rounded-lg mb-3"
                style={{
                  background: opt.isDark
                    ? `linear-gradient(135deg, ${opt.primaryColor} 0%, color-mix(in srgb, ${opt.primaryColor} 40%, #1a1a2e) 50%, #0d1117 100%)`
                    : `linear-gradient(135deg, ${opt.primaryColor} 0%, color-mix(in srgb, ${opt.primaryColor} 60%, #ffffff) 50%, #f8fafc 100%)`,
                }}
              />

              {/* Active check mark */}
              {theme === opt.id && (
                <div className="absolute top-2 right-2 w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
                  <Check className="w-3 h-3 text-white" />
                </div>
              )}

              <h4 className="text-sm font-medium mb-0.5">{opt.name}</h4>
              <p className="text-xs text-[var(--dg-text-muted)] leading-snug">{opt.description}</p>
            </button>
          ))}
        </div>
      </div>

      {/* ===== Login Page Style Section ===== */}
      <div>
        <h3 className="text-sm font-semibold mb-1">登录页风格</h3>
        <p className="text-xs text-[var(--dg-text-muted)] mb-4">选择登录页面的视觉风格，保存后退出登录即可预览</p>
        <div className="grid grid-cols-5 gap-3">
          {LOGIN_STYLE_OPTIONS.map(opt => {
            const preview = LOGIN_PREVIEW_COLORS[opt.id];
            return (
              <button
                key={opt.id}
                onClick={() => handleLoginStyleChange(opt.id)}
                className={`group relative rounded-xl p-4 text-left transition-all ${
                  loginStyle === opt.id
                    ? 'ring-2 ring-indigo-500/50 bg-[var(--dg-bg-tertiary)]'
                    : 'bg-[var(--dg-bg-tertiary)] hover:bg-[var(--dg-bg-hover)]'
                }`}
              >
                {/* Login style miniature preview */}
                <div
                  className="w-full aspect-[4/3] rounded-lg mb-3 overflow-hidden relative"
                  style={{ background: preview.bg }}
                >
                  {/* Abstract mini layout */}
                  {opt.id === 'split' && (
                    <>
                      <div className="absolute inset-0 flex">
                        {/* Grid lines preview */}
                        <div className="flex-1 relative overflow-hidden" style={{ background: '#080c14' }}>
                          <div className="absolute inset-0" style={{ backgroundImage: 'linear-gradient(rgba(0,212,170,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,170,0.08) 1px, transparent 1px)', backgroundSize: '10px 10px' }} />
                          {[20, 45, 70].map(t => <div key={t} className="absolute rounded-full" style={{ width: 3, height: 3, background: '#00d4aa', top: `${t}%`, left: `${30 + t * 0.5}%`, boxShadow: '0 0 4px #00d4aa' }} />)}
                          <div className="absolute bottom-2 left-2 flex flex-col gap-0.5">
                            <div className="w-5 h-1 rounded-sm" style={{ background: 'rgba(226,232,240,0.4)' }} />
                            <div className="w-7 h-0.5 rounded-sm" style={{ background: 'rgba(0,212,170,0.3)' }} />
                          </div>
                        </div>
                        <div className="w-2/5 p-2 flex flex-col justify-center gap-1" style={{ background: '#0c1017' }}>
                          <div className="h-0.5 rounded-sm" style={{ background: 'rgba(148,163,184,0.15)' }} />
                          <div className="h-0.5 rounded-sm" style={{ background: 'rgba(148,163,184,0.15)' }} />
                          <div className="h-1 rounded-sm mt-0.5" style={{ background: '#00d4aa', opacity: 0.5 }} />
                        </div>
                      </div>
                    </>
                  )}
                  {opt.id === 'centered' && (
                    <div className="absolute inset-0 flex items-center justify-center" style={{ background: 'linear-gradient(180deg, #0a0a1a 0%, #1a1035 50%, #2d1810 100%)' }}>
                      {/* Dawn rays */}
                      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-3/4" style={{ background: 'radial-gradient(ellipse at 50% 100%, rgba(251,191,36,0.12), transparent 70%)' }} />
                      <div className="w-3/4 rounded-lg p-2 flex flex-col items-center gap-1 relative" style={{ background: 'rgba(10,10,26,0.6)', backdropFilter: 'blur(4px)', border: '1px solid rgba(251,191,36,0.1)' }}>
                        <div className="w-4 h-1 rounded-sm" style={{ background: 'rgba(251,191,36,0.5)' }} />
                        <div className="w-6 h-0.5 rounded-sm" style={{ background: 'rgba(251,191,36,0.2)' }} />
                        <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
                        <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
                        <div className="w-full h-1 rounded-sm mt-0.5" style={{ background: '#fbbf24', opacity: 0.5 }} />
                      </div>
                    </div>
                  )}
                  {opt.id === 'sidepanel' && (
                    <div className="absolute inset-0 flex">
                      <div className="w-[38%] relative overflow-hidden" style={{ background: 'linear-gradient(180deg, #020810 0%, #062030 100%)' }}>
                        {/* Wave lines */}
                        {[25, 40, 55, 70].map(t => (
                          <div key={t} className="absolute left-1/2 -translate-x-1/2 rounded-full" style={{ width: '120%', height: 20, top: `${t}%`, borderTop: '1px solid rgba(6,182,212,0.1)', borderRadius: '50%' }} />
                        ))}
                        {/* Biolum dots */}
                        {[30, 50, 65].map(t => (
                          <div key={t} className="absolute rounded-full" style={{ width: 3, height: 3, background: 'rgba(6,182,212,0.5)', top: `${t}%`, left: '30%', boxShadow: '0 0 4px rgba(6,182,212,0.4)' }} />
                        ))}
                        <div className="absolute bottom-2 left-2 flex flex-col gap-0.5">
                          <div className="w-6 h-1 rounded-sm" style={{ background: 'rgba(6,182,212,0.5)' }} />
                          <div className="flex gap-0.5">
                            {['审核', '管控'].map(t => (
                              <span key={t} className="px-1 rounded text-[5px]" style={{ background: 'rgba(6,182,212,0.1)', color: 'rgba(6,182,212,0.5)' }}>{t}</span>
                            ))}
                          </div>
                        </div>
                      </div>
                      <div className="flex-1 p-2 flex flex-col justify-center gap-1" style={{ background: '#060e18' }}>
                        <div className="h-0.5 rounded-sm" style={{ background: 'rgba(6,182,212,0.1)' }} />
                        <div className="h-0.5 rounded-sm" style={{ background: 'rgba(6,182,212,0.1)' }} />
                        <div className="h-1 rounded-sm mt-0.5" style={{ background: '#06b6d4', opacity: 0.5 }} />
                      </div>
                    </div>
                  )}
                  {opt.id === 'fullimage' && (
                    <div className="absolute inset-0">
                      {/* Grid dots */}
                      <div className="absolute inset-0" style={{
                        backgroundImage: 'radial-gradient(circle, rgba(99,102,241,0.15) 0.5px, transparent 0.5px)',
                        backgroundSize: '12px 12px',
                      }} />
                      {/* Center card */}
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="w-3/4 rounded p-1.5 flex flex-col items-center gap-0.5" style={{ background: 'rgba(0,0,0,0.4)', border: '1px solid rgba(255,255,255,0.06)' }}>
                          <div className="w-3 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.25)' }} />
                          <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
                          <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
                          <div className="w-full h-0.5 rounded-sm mt-0.5" style={{ background: preview.accent, opacity: 0.4 }} />
                        </div>
                      </div>
                    </div>
                  )}
                  {opt.id === 'minimal' && (
                    <div className="absolute inset-0" style={{ background: 'linear-gradient(160deg, #0a0a1a, #0f0a2a, #150825)' }}>
                      {/* Flowing curve ribbons */}
                      <div className="absolute" style={{ top: '15%', left: '-20%', width: '140%', height: '40%', background: 'linear-gradient(135deg, rgba(236,72,153,0.2), rgba(168,85,247,0.15))', borderRadius: '50%', filter: 'blur(8px)', transform: 'rotate(-12deg)' }} />
                      <div className="absolute" style={{ top: '35%', left: '-10%', width: '120%', height: '30%', background: 'linear-gradient(135deg, rgba(129,140,248,0.15), rgba(192,132,252,0.1))', borderRadius: '50%', filter: 'blur(6px)', transform: 'rotate(5deg)' }} />
                      <div className="absolute" style={{ top: '55%', left: '5%', width: '90%', height: '15%', background: 'linear-gradient(90deg, transparent, rgba(244,114,182,0.2), rgba(192,132,252,0.15), transparent)', borderRadius: '50%', filter: 'blur(4px)', transform: 'rotate(-8deg)' }} />
                      {/* Center card */}
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="w-3/4 rounded-md p-1.5 flex flex-col items-center gap-0.5" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', backdropFilter: 'blur(4px)' }}>
                          <div className="w-3 h-1 rounded-sm" style={{ background: 'rgba(255,255,255,0.3)' }} />
                          <div className="w-5 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.12)' }} />
                          <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
                          <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.06)' }} />
                          <div className="w-full h-1 rounded-sm mt-0.5" style={{ background: 'linear-gradient(90deg, #ec4899, #a855f7)', opacity: 0.5 }} />
                        </div>
                      </div>
                    </div>
                  )}
                </div>

                {/* Active check mark */}
                {loginStyle === opt.id && (
                  <div className="absolute top-2 right-2 w-5 h-5 rounded-full bg-indigo-500 flex items-center justify-center">
                    <Check className="w-3 h-3 text-white" />
                  </div>
                )}

                <h4 className="text-sm font-medium mb-0.5">{opt.name}</h4>
                <p className="text-xs text-[var(--dg-text-muted)] leading-snug">{opt.desc}</p>
                <p className="text-[10px] text-[var(--dg-text-muted)] mt-1 opacity-60">{preview.label}</p>
              </button>
            );
          })}
        </div>
      </div>

      {/* Save Button */}
      <div className="flex items-center gap-3 pt-2">
        <button
          onClick={handleSave}
          disabled={saving || !dirty}
          className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all ${
            dirty
              ? 'dg-gradient-bg text-white hover:opacity-90'
              : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] cursor-not-allowed'
          }`}
        >
          {saving ? (
            <><Loader2 className="w-4 h-4 animate-spin" /> 保存中...</>
          ) : (
            <><Save className="w-4 h-4" /> 保存设置</>
          )}
        </button>
        {dirty && (
          <span className="text-xs text-amber-400">有未保存的更改</span>
        )}
      </div>
    </div>
  );
}