import React, { useEffect, useRef, useState } from 'react';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import { getSettings, saveSettings } from '../../api/settings.js';
import { uploadWallpaper } from '../../api/upload.js';
import { showSnack } from '../snack.jsx';

/** 主题设置：主题色/壁纸（上传或URL）/导航卡片样式/玻璃模糊透明度/强制深色（迁移自 v1 主题卡片） */
export default function ThemeSettings() {
  const [form, setForm] = useState({
    primary_color: '#6750a4',
    theme_wallpaper: '',
    theme_wallpaper_scale: 'cover',
    theme_wallpaper_enabled: true,
    nav_style: 'default',
    card_style: 'default',
    glass_blur: '20',
    glass_opacity: '0.6',
    theme_force_dark: false,
  });
  const [saving, setSaving] = useState(false);
  const fileRef = useRef(null);

  useEffect(() => {
    getSettings()
      .then((s) => setForm({
        primary_color: s.primary_color || '#6750a4',
        theme_wallpaper: s.theme_wallpaper || '',
        theme_wallpaper_scale: s.theme_wallpaper_scale || 'cover',
        theme_wallpaper_enabled: s.theme_wallpaper_enabled !== '0',
        nav_style: s.nav_style || 'default',
        card_style: s.card_style || 'default',
        glass_blur: s.glass_blur || '20',
        glass_opacity: s.glass_opacity || '0.6',
        theme_force_dark: s.theme_force_dark === '1',
      }))
      .catch((e) => showSnack(e.message, 'error'));
  }, []);

  const set = (k) => (e) => setForm((p) => ({ ...p, [k]: e.target.value }));

  const handleWallpaperUpload = async (e) => {
    const file = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!file) return;
    try {
      const data = await uploadWallpaper(file);
      setForm((p) => ({ ...p, theme_wallpaper: data.url }));
      showSnack('壁纸已上传');
    } catch (err) {
      showSnack(err.message, 'error');
    }
  };

  const save = async () => {
    setSaving(true);
    try {
      await saveSettings({
        primary_color: form.primary_color,
        theme_wallpaper: form.theme_wallpaper.trim(),
        theme_wallpaper_scale: form.theme_wallpaper_scale,
        theme_wallpaper_enabled: form.theme_wallpaper_enabled ? '1' : '0',
        theme_force_dark: form.theme_force_dark ? '1' : '0',
        nav_style: form.nav_style,
        card_style: form.card_style,
        glass_blur: form.glass_blur,
        glass_opacity: form.glass_opacity,
      });
      showSnack('主题设置已保存');
    } catch (e) {
      showSnack(e.message, 'error');
    }
    setSaving(false);
  };

  return (
    <Box sx={{ maxWidth: 640 }}>
      <Typography variant="h5" sx={{ mb: 2 }}>主题设置</Typography>

      <Paper sx={{ p: 3, mb: 2 }}>
        <Typography variant="subtitle1" sx={{ mb: 1 }}>主题色</Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <input type="color" value={form.primary_color} onChange={set('primary_color')} style={{ width: 48, height: 48, border: 'none', background: 'none', cursor: 'pointer' }} />
          <TextField label="主色调" value={form.primary_color} onChange={set('primary_color')} size="small" sx={{ width: 160 }} />
        </Box>
      </Paper>

      <Paper sx={{ p: 3, mb: 2 }}>
        <Typography variant="subtitle1" sx={{ mb: 1 }}>壁纸背景</Typography>
        <FormControlLabel
          control={<Switch checked={form.theme_wallpaper_enabled} onChange={(e) => setForm((p) => ({ ...p, theme_wallpaper_enabled: e.target.checked }))} />}
          label="启用壁纸背景"
          sx={{ mb: 1 }}
        />
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 1 }}>
          <Button variant="outlined" onClick={() => fileRef.current && fileRef.current.click()}>上传图片</Button>
          <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleWallpaperUpload} />
          <Typography variant="caption" color="text.secondary">上传后自动填入 URL</Typography>
        </Box>
        <TextField fullWidth label="图片 URL" type="url" value={form.theme_wallpaper} onChange={set('theme_wallpaper')} margin="normal" placeholder="https://example.com/wallpaper.jpg" />
        {form.theme_wallpaper && (
          <Box sx={{ mt: 1 }}>
            <img src={form.theme_wallpaper} alt="wallpaper" style={{ width: '100%', maxHeight: 120, objectFit: 'cover', borderRadius: 8 }} />
          </Box>
        )}
        <TextField fullWidth label="缩放方式" select value={form.theme_wallpaper_scale} onChange={set('theme_wallpaper_scale')} margin="normal" sx={{ maxWidth: 280 }}>
          <option value="cover">cover - 覆盖填充</option>
          <option value="contain">contain - 完整显示</option>
          <option value="repeat">repeat - 平铺重复</option>
          <option value="stretch">stretch - 拉伸填充</option>
        </TextField>
      </Paper>

      <Paper sx={{ p: 3, mb: 2 }}>
        <Typography variant="subtitle1" sx={{ mb: 1 }}>样式设置</Typography>
        <Typography variant="body2" sx={{ mb: 0.5 }}>导航栏样式</Typography>
        <ToggleButtonGroup exclusive value={form.nav_style} onChange={(e, v) => v && setForm((p) => ({ ...p, nav_style: v }))} size="small" sx={{ mb: 2 }}>
          <ToggleButton value="default">默认</ToggleButton>
          <ToggleButton value="glass">磨砂玻璃</ToggleButton>
          <ToggleButton value="capsule">胶囊</ToggleButton>
        </ToggleButtonGroup>
        <Typography variant="body2" sx={{ mb: 0.5 }}>卡片样式</Typography>
        <ToggleButtonGroup exclusive value={form.card_style} onChange={(e, v) => v && setForm((p) => ({ ...p, card_style: v }))} size="small">
          <ToggleButton value="default">默认</ToggleButton>
          <ToggleButton value="glass">磨砂玻璃</ToggleButton>
        </ToggleButtonGroup>
      </Paper>

      <Paper sx={{ p: 3, mb: 2 }}>
        <Typography variant="subtitle1" sx={{ mb: 1 }}>玻璃效果</Typography>
        <Typography variant="body2" color="text.secondary">模糊强度: {form.glass_blur}px</Typography>
        <Slider min={5} max={40} value={parseInt(form.glass_blur, 10) || 20} onChange={(e, v) => setForm((p) => ({ ...p, glass_blur: String(v) }))} sx={{ maxWidth: 400 }} />
        <Typography variant="body2" color="text.secondary">透明度: {form.glass_opacity}</Typography>
        <Slider min={0.1} max={0.95} step={0.05} value={parseFloat(form.glass_opacity) || 0.6} onChange={(e, v) => setForm((p) => ({ ...p, glass_opacity: String(v) }))} sx={{ maxWidth: 400 }} />
      </Paper>

      <Paper sx={{ p: 3, mb: 2 }}>
        <Typography variant="subtitle1" sx={{ mb: 1 }}>深色模式</Typography>
        <FormControlLabel
          control={<Switch checked={form.theme_force_dark} onChange={(e) => setForm((p) => ({ ...p, theme_force_dark: e.target.checked }))} />}
          label="强制深色模式（启用后用户无法切换为浅色）"
        />
      </Paper>

      <Button variant="contained" onClick={save} disabled={saving}>保存主题设置</Button>
    </Box>
  );
}