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 { Checkbox } from '@/components/ui/checkbox';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
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,
  MapPin,
  CheckCircle2,
  XCircle,
  Loader2,
} from 'lucide-react';
import { regionApi } from '@/services/api';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner';

const providerNames: Record<string, string> = {
  aws: 'AWS',
  aliyun: '阿里云',
  tencent: '腾讯云',
  huawei: '华为云',
  azure: 'Azure',
};

const providerColors: Record<string, string> = {
  aws: 'text-orange-400',
  aliyun: 'text-orange-400',
  tencent: 'text-blue-400',
  huawei: 'text-red-400',
  azure: 'text-blue-400',
};

export function RegionManager() {
  const confirm = useConfirm();
  const [regions, setRegions] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedProvider, setSelectedProvider] = useState('all');
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingItem, setEditingItem] = useState<any>(null);
  const [submitting, setSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    name: '', code: '', provider: 'aliyun', location: '',
    status: 'active', endpoint: '',
  });

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

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

  const filtered = regions.filter(r => {
    const matchSearch = r.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
                       r.code?.toLowerCase().includes(searchQuery.toLowerCase());
    const matchProvider = selectedProvider === 'all' || r.provider === selectedProvider;
    return matchSearch && matchProvider;
  });

  // 全选 / 单选 // Logan.Li
  const allSelected = filtered.length > 0 && filtered.every(r => selectedIds.includes(r.id));
  const toggleSelectAll = () => {
    if (allSelected) {
      setSelectedIds([]);
    } else {
      setSelectedIds(filtered.map(r => r.id));
    }
  };
  const toggleSelect = (id: number) => {
    setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
  };

  const openCreate = () => {
    setEditingItem(null);
    setFormData({ name: '', code: '', provider: 'aliyun', location: '', status: 'active', endpoint: '' });
    setDialogOpen(true);
  };

  const openEdit = (item: any) => {
    setEditingItem(item);
    setFormData({
      name: item.name || '', code: item.code || '', provider: item.provider || 'aliyun',
      location: item.location || '', status: item.status || 'active', endpoint: item.endpoint || '',
    });
    setDialogOpen(true);
  };

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

  // 单条删除 // Logan.Li
  const handleDelete = async (id: number) => {
    const region = regions.find(r => r.id === id);
    const ok = await confirm({
      title: '删除区域',
      description: `确定删除「${region?.name || id}」吗？此操作不可撤销。`,
      confirmText: '删除',
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await regionApi.delete(id);
      toast.success('区域已删除');
      setSelectedIds(prev => prev.filter(i => i !== id));
      loadData();
    } catch (e) {
      console.error('删除区域失败:', e);
      toast.error('删除失败');
    }
  };

  // 批量删除 // Logan.Li
  const handleBatchDelete = async () => {
    if (selectedIds.length === 0) return;
    const ok = await confirm({
      title: '批量删除区域',
      description: `确定删除选中的 ${selectedIds.length} 个区域吗？此操作不可撤销。`,
      confirmText: '批量删除',
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await regionApi.batchDelete(selectedIds);
      toast.success(`已删除 ${selectedIds.length} 个区域`);
      setSelectedIds([]);
      loadData();
    } catch (e) {
      console.error('批量删除失败:', e);
      toast.error('批量删除失败');
    }
  };

  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={selectedProvider} onValueChange={setSelectedProvider}>
            <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部云商</SelectItem>
              {Object.entries(providerNames).map(([k, v]) => (
                <SelectItem key={k} value={k}>{v}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <Button onClick={openCreate} className="gap-2">
          <Plus className="h-4 w-4" />
          添加区域
        </Button>
      </div>

      {/* 批量操作栏 // Logan.Li */}
      {selectedIds.length > 0 && (
        <div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700">
          <span className="text-sm text-slate-300">
            已选择 <span className="font-semibold text-slate-100">{selectedIds.length}</span> 个区域
          </span>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="text-slate-400 hover:text-slate-200">
              取消选择
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="border-red-500/30 text-red-400 hover:bg-red-500/10"
              onClick={handleBatchDelete}
            >
              <Trash2 className="h-4 w-4 mr-1.5" />
              批量删除
            </Button>
          </div>
        </div>
      )}

      {/* Table */}
      {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">
          <MapPin className="h-12 w-12 mx-auto mb-3 opacity-40" />
          <p>暂无区域数据</p>
        </div>
      ) : (
        <div className="rounded-lg overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow className="border-slate-800 hover:bg-transparent">
                <TableHead className="w-10">
                  <Checkbox
                    checked={allSelected}
                    onCheckedChange={toggleSelectAll}
                    className="border-slate-600"
                  />
                </TableHead>
                <TableHead className="text-slate-400">区域名称</TableHead>
                <TableHead className="text-slate-400">编码</TableHead>
                <TableHead className="text-slate-400">云商</TableHead>
                <TableHead className="text-slate-400">位置</TableHead>
                <TableHead className="text-slate-400">接入端点</TableHead>
                <TableHead className="text-slate-400">状态</TableHead>
                <TableHead className="text-slate-400 text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filtered.map((r) => (
                <TableRow key={r.id} className="border-slate-800/50 group">
                  <TableCell>
                    <Checkbox
                      checked={selectedIds.includes(r.id)}
                      onCheckedChange={() => toggleSelect(r.id)}
                      className="border-slate-600"
                    />
                  </TableCell>
                  <TableCell className="font-medium text-slate-200">{r.name}</TableCell>
                  <TableCell className="font-mono text-sm text-slate-400">{r.code}</TableCell>
                  <TableCell>
                    <span className={providerColors[r.provider] || 'text-slate-400'}>
                      {providerNames[r.provider] || r.provider}
                    </span>
                  </TableCell>
                  <TableCell className="text-slate-400">{r.location || '-'}</TableCell>
                  <TableCell className="max-w-[200px] truncate font-mono text-xs text-slate-400" title={r.endpoint}>{r.endpoint || '-'}</TableCell>
                  <TableCell>
                    {r.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>
                    )}
                  </TableCell>
                  <TableCell>
                    <div className="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                      <button onClick={() => openEdit(r)} 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(r.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>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </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="如：cn-north-1"
                  className="bg-slate-800/50 border-slate-700 font-mono"
                  disabled={!!editingItem}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label>云商</Label>
                <Select value={formData.provider} onValueChange={(v) => setFormData({ ...formData, provider: v })}>
                  <SelectTrigger className="bg-slate-800/50 border-slate-700">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {Object.entries(providerNames).map(([k, v]) => (
                      <SelectItem key={k} value={k}>{v}</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.location}
                onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                placeholder="如：中国北京"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>
            <div className="space-y-1.5">
              <Label>接入端点</Label>
              <Input
                value={formData.endpoint}
                onChange={(e) => setFormData({ ...formData, endpoint: e.target.value })}
                placeholder="如：ecs.cn-north-1.aliyuncs.com"
                className="bg-slate-800/50 border-slate-700 font-mono text-sm"
              />
            </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>
    </div>
  );
}