import { useState, useEffect, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Plus,
  Search,
  Trash2,
  Pencil,
  CloudCog,
  CheckCircle2,
  XCircle,
  ExternalLink,
  Loader2,
} from 'lucide-react';
import { platformApi } from '@/services/api';

const typeLabels: Record<string, string> = {
  public: '公有云',
  private: '私有云',
  hybrid: '混合云',
};

const typeColors: Record<string, string> = {
  public: 'text-blue-400',
  private: 'text-purple-400',
  hybrid: 'text-cyan-400',
};

export function PlatformManager() {
  const [platforms, setPlatforms] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedType, setSelectedType] = useState('all');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingItem, setEditingItem] = useState<any>(null);
  const [submitting, setSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    name: '', code: '', type: 'public', status: 'active',
    website: '', description: '',
  });

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const res = await platformApi.list();
      const items = (res as any)?.list || [];
      setPlatforms(items);
    } catch {
      setPlatforms([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const filtered = platforms.filter(p => {
    const matchSearch = p.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
                       p.code?.toLowerCase().includes(searchQuery.toLowerCase());
    const matchType = selectedType === 'all' || p.type === selectedType;
    return matchSearch && matchType;
  });

  const openCreate = () => {
    setEditingItem(null);
    setFormData({ name: '', code: '', type: 'public', status: 'active', website: '', description: '' });
    setDialogOpen(true);
  };

  const openEdit = (item: any) => {
    setEditingItem(item);
    setFormData({
      name: item.name || '', code: item.code || '', type: item.type || 'public',
      status: item.status || 'active', website: item.website || '', description: item.description || '',
    });
    setDialogOpen(true);
  };

  const handleSubmit = async () => {
    if (!formData.name.trim() || !formData.code.trim()) return;
    setSubmitting(true);
    try {
      if (editingItem) {
        await platformApi.update(editingItem.id, formData);
      } else {
        await platformApi.create(formData);
      }
      setDialogOpen(false);
      loadData();
    } catch {
      // error handled by http interceptor
    } finally {
      setSubmitting(false);
    }
  };

  const [deleteId, setDeleteId] = useState<number | null>(null);
  const handleDelete = (id: number) => setDeleteId(id);
  const confirmDelete = async () => {
    if (deleteId === null) return;
    await platformApi.delete(deleteId);
    setDeleteId(null);
    loadData();
  };

  return (
    <div className="p-6 space-y-4">
      {/* Toolbar */}
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3 flex-1">
          <div className="relative w-72">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
            <Input
              placeholder="搜索平台名称或编码..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9 h-9 bg-slate-800/50 border-slate-700"
            />
          </div>
          <Select value={selectedType} onValueChange={setSelectedType}>
            <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部类型</SelectItem>
              <SelectItem value="public">公有云</SelectItem>
              <SelectItem value="private">私有云</SelectItem>
              <SelectItem value="hybrid">混合云</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <Button onClick={openCreate} className="gap-2">
          <Plus className="h-4 w-4" />
          添加平台
        </Button>
      </div>

      {/* List */}
      {loading ? (
        <div className="flex justify-center py-20">
          <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
        </div>
      ) : filtered.length === 0 ? (
        <div className="text-center py-20 text-slate-500">
          <CloudCog className="h-12 w-12 mx-auto mb-3 opacity-40" />
          <p>暂无云平台数据</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {filtered.map((p) => (
            <div
              key={p.id}
              className="bg-slate-800/30 rounded-lg p-4 hover:bg-slate-800/50 transition-colors group"
            >
              <div className="flex items-start justify-between mb-3">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                    <CloudCog className="h-5 w-5 text-blue-400" />
                  </div>
                  <div>
                    <h3 className="font-medium text-slate-100">{p.name}</h3>
                    <span className="text-xs text-slate-500 font-mono">{p.code}</span>
                  </div>
                </div>
                <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  {p.website && (
                    <a href={p.website} target="_blank" rel="noreferrer" className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
                      <ExternalLink className="h-3.5 w-3.5" />
                    </a>
                  )}
                  <button onClick={() => openEdit(p)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
                    <Pencil className="h-3.5 w-3.5" />
                  </button>
                  <button onClick={() => handleDelete(p.id)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-red-400">
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </div>
              </div>

              {p.description && (
                <p className="text-sm text-slate-400 mb-3 line-clamp-2">{p.description}</p>
              )}

              <div className="flex items-center gap-2 flex-wrap">
                <Badge variant="outline" className={typeColors[p.type] || 'text-slate-400'}>
                  {typeLabels[p.type] || p.type}
                </Badge>
                {p.status === 'active' ? (
                  <Badge className="bg-emerald-500/20 text-emerald-400 gap-1">
                    <CheckCircle2 className="h-3 w-3" /> 启用
                  </Badge>
                ) : (
                  <Badge className="bg-slate-500/20 text-slate-400 gap-1">
                    <XCircle className="h-3 w-3" /> 禁用
                  </Badge>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingItem ? '编辑云平台' : '添加云平台'}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label>平台名称 *</Label>
                <Input
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="如：阿里云"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>
              <div className="space-y-1.5">
                <Label>编码 *</Label>
                <Input
                  value={formData.code}
                  onChange={(e) => setFormData({ ...formData, code: e.target.value })}
                  placeholder="如：aliyun"
                  className="bg-slate-800/50 border-slate-700"
                  disabled={!!editingItem}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label>类型</Label>
                <Select value={formData.type} onValueChange={(v) => setFormData({ ...formData, type: v })}>
                  <SelectTrigger className="bg-slate-800/50 border-slate-700">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="public">公有云</SelectItem>
                    <SelectItem value="private">私有云</SelectItem>
                    <SelectItem value="hybrid">混合云</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label>状态</Label>
                <Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
                  <SelectTrigger className="bg-slate-800/50 border-slate-700">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="active">启用</SelectItem>
                    <SelectItem value="inactive">禁用</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-1.5">
              <Label>官网地址</Label>
              <Input
                value={formData.website}
                onChange={(e) => setFormData({ ...formData, website: e.target.value })}
                placeholder="https://..."
                className="bg-slate-800/50 border-slate-700"
              />
            </div>
            <div className="space-y-1.5">
              <Label>描述</Label>
              <Input
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="平台描述..."
                className="bg-slate-800/50 border-slate-700"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setDialogOpen(false)}>取消</Button>
            <Button onClick={handleSubmit} disabled={submitting || !formData.name.trim() || !formData.code.trim()}>
              {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
              {editingItem ? '保存' : '创建'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 删除确认 */}
      <Dialog open={deleteId !== null} onOpenChange={(v) => !v && setDeleteId(null)}>
        <DialogContent className="max-w-sm">
          <DialogHeader>
            <DialogTitle>确认删除</DialogTitle>
          </DialogHeader>
          <p className="text-sm text-slate-400">确定删除此云平台？此操作不可撤销。</p>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setDeleteId(null)}>取消</Button>
            <Button variant="destructive" onClick={confirmDelete}>删除</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}