'use client';

import { useState, useEffect } from 'react';
import { 
  Save, 
  RefreshCw,
  Loader2,
  ChevronDown,
  ChevronUp
} from 'lucide-react';

interface ConfigItem {
  id: string;
  key: string;
  value: Record<string, any>;
  category: 'feature' | 'style' | 'seo' | 'general';
  description: string | null;
  updatedAt: string;
}

const categoryLabels = {
  feature: '功能配置',
  style: '样式配置',
  seo: 'SEO 配置',
  general: '常规配置'
};

const categoryColors = {
  feature: 'bg-blue-100 text-blue-800',
  style: 'bg-purple-100 text-purple-800',
  seo: 'bg-green-100 text-green-800',
  general: 'bg-gray-100 text-gray-800'
};

export default function SettingsPage() {
  const [configs, setConfigs] = useState<ConfigItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState<string | null>(null);
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['feature', 'seo']));
  const [editedValues, setEditedValues] = useState<Record<string, Record<string, any>>>({});

  useEffect(() => {
    fetchConfigs();
  }, []);

  const fetchConfigs = async () => {
    try {
      setLoading(true);
      const res = await fetch('/api/admin/config');
      const data = await res.json();
      if (res.ok) {
        setConfigs(data.configs || []);
      }
    } catch (error) {
      console.error('获取配置失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async (configId: string) => {
    const editedValue = editedValues[configId];
    if (!editedValue) return;

    try {
      setSaving(configId);
      const res = await fetch('/api/admin/config', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          id: configId,
          value: editedValue
        })
      });

      if (res.ok) {
        setEditedValues(prev => {
          const updated = { ...prev };
          delete updated[configId];
          return updated;
        });
        await fetchConfigs();
      }
    } catch (error) {
      console.error('保存配置失败:', error);
    } finally {
      setSaving(null);
    }
  };

  const toggleCategory = (category: string) => {
    setExpandedCategories(prev => {
      const updated = new Set(prev);
      if (updated.has(category)) {
        updated.delete(category);
      } else {
        updated.add(category);
      }
      return updated;
    });
  };

  const handleValueChange = (configId: string, field: string, value: any) => {
    setEditedValues(prev => ({
      ...prev,
      [configId]: {
        ...prev[configId],
        [field]: value
      }
    }));
  };

  const getConfigValue = (config: ConfigItem, field: string) => {
    if (editedValues[config.id]?.[field] !== undefined) {
      return editedValues[config.id]![field];
    }
    return config.value[field];
  };

  const hasChanges = (configId: string) => {
    return editedValues[configId] && Object.keys(editedValues[configId]).length > 0;
  };

  const groupedConfigs = configs.reduce((acc, config) => {
    if (!acc[config.category]) {
      acc[config.category] = [];
    }
    acc[config.category]!.push(config);
    return acc;
  }, {} as Record<string, ConfigItem[]>);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">配置中心</h1>
          <p className="text-gray-600 mt-1">管理网站功能和样式配置</p>
        </div>
        <button
          onClick={fetchConfigs}
          className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
        >
          <RefreshCw className="h-4 w-4" />
          刷新
        </button>
      </div>

      <div className="space-y-4">
        {Object.entries(groupedConfigs).map(([category, categoryConfigs]) => (
          <div key={category} className="bg-white rounded-lg border overflow-hidden">
            <button
              onClick={() => toggleCategory(category)}
              className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
            >
              <div className="flex items-center gap-3">
                <span className={`px-3 py-1 rounded-full text-sm font-medium ${categoryColors[category as keyof typeof categoryColors]}`}>
                  {categoryLabels[category as keyof typeof categoryLabels]}
                </span>
                <span className="text-gray-600 text-sm">
                  {categoryConfigs.length} 项配置
                </span>
              </div>
              {expandedCategories.has(category) ? (
                <ChevronUp className="h-5 w-5 text-gray-400" />
              ) : (
                <ChevronDown className="h-5 w-5 text-gray-400" />
              )}
            </button>

            {expandedCategories.has(category) && (
              <div className="border-t divide-y">
                {categoryConfigs.map(config => (
                  <div key={config.id} className="p-4">
                    <div className="flex items-start justify-between mb-3">
                      <div>
                        <h3 className="font-medium text-gray-900">{config.key}</h3>
                        {config.description && (
                          <p className="text-sm text-gray-600 mt-1">{config.description}</p>
                        )}
                      </div>
                      {hasChanges(config.id) && (
                        <button
                          onClick={() => handleSave(config.id)}
                          disabled={saving === config.id}
                          className="flex items-center gap-2 px-3 py-1.5 bg-[#C41E3A] text-white rounded-lg hover:bg-[#A01830] transition-colors disabled:opacity-50"
                        >
                          {saving === config.id ? (
                            <Loader2 className="h-4 w-4 animate-spin" />
                          ) : (
                            <Save className="h-4 w-4" />
                          )}
                          保存
                        </button>
                      )}
                    </div>

                    <div className="space-y-3">
                      {Object.entries(config.value).map(([field, value]) => {
                        const currentValue = getConfigValue(config, field);
                        
                        return (
                          <div key={field} className="flex items-start gap-4">
                            <label className="w-32 text-sm font-medium text-gray-700 pt-2">
                              {field}
                            </label>
                            <div className="flex-1">
                              {typeof value === 'boolean' ? (
                                <label className="flex items-center gap-2 cursor-pointer">
                                  <input
                                    type="checkbox"
                                    checked={currentValue}
                                    onChange={(e) => handleValueChange(config.id, field, e.target.checked)}
                                    className="w-4 h-4 text-[#C41E3A] border-gray-300 rounded focus:ring-[#C41E3A]"
                                  />
                                  <span className="text-sm text-gray-600">
                                    {currentValue ? '已启用' : '已禁用'}
                                  </span>
                                </label>
                              ) : typeof value === 'string' ? (
                                <input
                                  type="text"
                                  value={currentValue}
                                  onChange={(e) => handleValueChange(config.id, field, e.target.value)}
                                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent"
                                />
                              ) : typeof value === 'number' ? (
                                <input
                                  type="number"
                                  value={currentValue}
                                  onChange={(e) => handleValueChange(config.id, field, Number(e.target.value))}
                                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent"
                                />
                              ) : Array.isArray(value) ? (
                                <textarea
                                  value={Array.isArray(currentValue) ? currentValue.join('\n') : currentValue}
                                  onChange={(e) => handleValueChange(config.id, field, e.target.value.split('\n').filter(Boolean))}
                                  rows={3}
                                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent font-mono text-sm"
                                  placeholder="每行一个值"
                                />
                              ) : (
                                <textarea
                                  value={JSON.stringify(currentValue, null, 2)}
                                  onChange={(e) => {
                                    try {
                                      const parsed = JSON.parse(e.target.value);
                                      handleValueChange(config.id, field, parsed);
                                    } catch (err) {
                                      // Invalid JSON, ignore
                                    }
                                  }}
                                  rows={5}
                                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent font-mono text-sm"
                                />
                              )}
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}