'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/components/admin/auth-context';
import { adminApi } from '@/lib/admin-api';
import { toast } from '@/components/ui/sonner';
import { Save } from 'lucide-react';

interface ZoneItem {
  itemId: string;
  sortOrder: number;
  variant: string;
}

interface Zone {
  id: string;
  code: string;
  name: string;
  pageCode: string;
  zoneKey: string;
  allowedModels: string[];
  items: ZoneItem[];
  settings: Record<string, unknown>;
}

export default function ZonesPage() {
  const { user, loading: authLoading } = useAuth();
  const router = useRouter();
  const [zones, setZones] = useState<Zone[]>([]);
  const [loading, setLoading] = useState(true);
  const [editingZone, setEditingZone] = useState<Zone | null>(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!authLoading && !user) {
      router.push('/admin/login');
      return;
    }
    if (user) {
      adminApi.getZones().then((res) => {
        setZones((res as Zone[]) || []);
        setError('');
      }).catch((err) => setError(err instanceof Error ? err.message : '加载失败')).finally(() => setLoading(false));
    }
  }, [user, authLoading, router]);

  const handleSave = async () => {
    if (!editingZone) return;
    setSaving(true);
    try {
      await adminApi.saveZone({
        id: editingZone.id,
        code: editingZone.code,
        name: editingZone.name,
        pageCode: editingZone.pageCode,
        zoneKey: editingZone.zoneKey,
        allowedModels: editingZone.allowedModels,
        items: editingZone.items,
        settings: editingZone.settings,
      });
      setEditingZone(null);
      toast.success('页面区域保存成功');
      // 重新加载
      const res = await adminApi.getZones();
      setZones((res as Zone[]) || []);
    } catch (err) {
      const message = err instanceof Error ? err.message : '保存失败';
      toast.error(message);
    } finally {
      setSaving(false);
    }
  };

  if (authLoading || loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin w-8 h-8 border-2 border-border-dark border-t-transparent rounded-full" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-bold text-text-primary">页面区域配置</h1>
        <p className="text-sm text-text-muted mt-1">管理系统各页面的内容区域布局</p>
      </div>

      {error && (
        <div className="bg-error-bg border border-border-secondary text-error-text rounded-lg px-4 py-3 text-sm">
          {error}
        </div>
      )}

      <div className="grid gap-4">
        {zones.map((zone) => (
          <div key={zone.id} className="bg-bg-primary rounded-lg border border-border-primary p-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-sm font-semibold text-text-primary">{zone.name}</h3>
                <p className="text-xs text-text-muted mt-0.5">
                  Code: {zone.code} | 页面: {zone.pageCode || '-'} | 区域: {zone.zoneKey || '-'}
                </p>
                <p className="text-xs text-text-muted mt-0.5">
                  允许模型: {zone.allowedModels?.join(', ') || '-'} | 内容数: {zone.items?.length || 0}
                </p>
              </div>
              <button
                onClick={() => setEditingZone(editingZone?.id === zone.id ? null : zone)}
                className="text-sm text-text-tertiary hover:text-text-primary px-3 py-1.5 rounded border border-border-secondary hover:border-border-secondary transition-colors"
              >
                {editingZone?.id === zone.id ? '取消编辑' : '编辑'}
              </button>
            </div>

            {editingZone?.id === zone.id && (
              <div className="mt-4 pt-4 border-t border-border-light space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label htmlFor="zone-edit-name" className="block text-xs font-medium text-text-secondary mb-1">名称</label>
                    <input
                      id="zone-edit-name"
                      type="text"
                      value={editingZone.name}
                      onChange={(e) => setEditingZone({ ...editingZone, name: e.target.value })}
                      className="w-full px-3 py-1.5 border border-border-secondary rounded text-sm"
                    />
                  </div>
                  <div>
                    <label htmlFor="zone-edit-page-code" className="block text-xs font-medium text-text-secondary mb-1">页面标识</label>
                    <input
                      id="zone-edit-page-code"
                      type="text"
                      value={editingZone.pageCode}
                      onChange={(e) => setEditingZone({ ...editingZone, pageCode: e.target.value })}
                      className="w-full px-3 py-1.5 border border-border-secondary rounded text-sm"
                    />
                  </div>
                </div>
                <div className="flex justify-end gap-2">
                  <button
                    onClick={() => setEditingZone(null)}
                    className="text-sm text-text-tertiary px-4 py-1.5 rounded border border-border-secondary hover:bg-bg-secondary"
                  >
                    取消
                  </button>
                  <button
                    onClick={handleSave}
                    disabled={saving}
                    className="flex items-center gap-1.5 text-sm bg-dark-bg text-white px-4 py-1.5 rounded hover:bg-dark-bg-secondary disabled:opacity-50"
                  >
                    <Save className="w-3.5 h-3.5" />
                    保存
                  </button>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}