aiops/frontend/src/components/cloud/RegionManager.tsx

import { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
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 { DataTable, type DataTableColumn } from '@/components/ui/data-table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Plus,
  Trash2,
  Pencil,
  MapPin,
  CheckCircle2,
  XCircle,
  Loader2,
  RefreshCw,
} from 'lucide-react';
import { regionApi } from '@/api';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';

function getProviderNames(t: (key: string) => string): Record<string, string> {
  return {
    aws: 'AWS',
    aliyun: t('cloud.aliyun'),
    tencent: t('cloud.tencent'),
    huawei: t('cloud.huawei'),
    azure: 'Azure',
  };
}

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

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

  const providerNames = getProviderNames(t);

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

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

  const filtered = regions.filter(r => {
    const matchProvider = selectedProvider === 'all' || r.provider === selectedProvider;
    return matchProvider;
  });

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

  const openEdit = (item: JsonData) => {
    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 (_e) {
      // handleSubmit error — silently ignored
    } finally {
      setSubmitting(false);
    }
  };

  // 单条删除 // Logan.Li
  const handleDelete = async (id: number) => {
    const region = regions.find(r => r.id === id);
    const ok = await confirm({
      title: t('cloud.deleteRegion'),
      description: t('cloud.deleteRegionConfirm', { name: region?.name || id }),
      confirmText: t('common.delete'),
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await regionApi.delete(id);
      toast.success(t('cloud.regionDeleted'));
      setSelectedIds(prev => prev.filter(i => i !== id));
      loadData();
    } catch (e) {
      console.error(t('cloud.deleteRegion'), e);
      toast.error(t('common.deleteFailed'));
    }
  };

  // 批量删除 // Logan.Li
  const handleBatchDelete = async () => {
    if (selectedIds.length === 0) return;
    const ok = await confirm({
      title: t('cloud.batchDeleteRegion'),
      description: t('cloud.batchDeleteRegionConfirm', { count: selectedIds.length }),
      confirmText: t('cloud.batchDelete'),
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await regionApi.batchDelete(selectedIds.map(Number));
      toast.success(t('cloud.batchDeletedRegions', { count: selectedIds.length }));
      setSelectedIds([]);
      loadData();
    } catch (e) {
      console.error(t('cloud.batchDeleteFailed'), e);
      toast.error(t('cloud.batchDeleteFailed'));
    }
  };

  // DataTable 列定义
  const columns: DataTableColumn<JsonData>[] = [
    { key: 'name', header: t('cloud.regionName'), sortable: true, render: (r) => <span className="font-medium text-[var(--dg-text-primary)]">{r.name}</span> },
    { key: 'code', header: t('cloud.code'), sortable: true, render: (r) => <span className="font-mono text-sm text-[var(--dg-text-secondary)]">{r.code}</span> },
    {
      key: 'provider', header: t('cloud.vendor'), sortable: true, hideable: false,
      render: (r) => <span className={providerColors[r.provider] || 'text-[var(--dg-text-secondary)]'}>{providerNames[r.provider] || r.provider}</span>,
    },
    { key: 'location', header: t('cloud.location'), render: (r) => r.location || '—' },
    { key: 'endpoint', header: t('cloud.regionEndpoint'), render: (r) => <span className="max-w-[200px] truncate block font-mono text-xs text-[var(--dg-text-secondary)]" title={r.endpoint}>{r.endpoint || '—'}</span> },
    {
      key: 'status', header: t('cloud.regionStatus'), sortable: true,
      render: (r) => r.status === 'active' ? (
        <Badge className="dg-status-running gap-1 border-0"><CheckCircle2 className="h-3 w-3" /> {t('cloud.enabled')}</Badge>
      ) : (
        <Badge className="dg-status-stopped gap-1 border-0"><XCircle className="h-3 w-3" /> {t('cloud.disabled')}</Badge>
      ),
    },
    {
      key: 'actions', header: t('common.actions'), align: 'right', hideable: false,
      render: (r) => (
        <div className="flex justify-end gap-1">
          <button onClick={() => openEdit(r)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
            <Pencil className="h-3.5 w-3.5" />
          </button>
          <button onClick={() => handleDelete(r.id)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:dg-text-red">
            <Trash2 className="h-3.5 w-3.5" />
          </button>
        </div>
      ),
    },
  ];

  const stats = {
    total: regions.length,
    active: regions.filter(r => r.status === 'active').length,
    inactive: regions.filter(r => r.status !== 'active').length,
  };

  const toolbar = (
    <Select value={selectedProvider} onValueChange={setSelectedProvider}>
      <SelectTrigger className="w-32 h-9 dg-input">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="all">{t('cloud.allVendors')}</SelectItem>
        {Object.entries(providerNames).map(([k, v]) => (
          <SelectItem key={k} value={k}>{v}</SelectItem>
        ))}
      </SelectContent>
    </Select>
  );

  const batchToolbar = selectedIds.length > 0 ? (
    <div className="flex items-center gap-2">
      <span className="text-sm dg-text-secondary">
        {t('cloud.selectedRegionCount', { count: selectedIds.length })}
      </span>
      <Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="dg-text-muted">
        {t('cloud.clearSelection')}
      </Button>
      <Button variant="outline" size="sm" className="dg-btn-danger" onClick={handleBatchDelete}>
        <Trash2 className="h-4 w-4 mr-1" />
        {t('cloud.batchDelete')}
      </Button>
    </div>
  ) : undefined;

  return (
    <PageShell
      variant="list"
      title={t('cloud.regions')}
      subtitle={t('cloud.regionsSubtitle')}
      icon={<MapPin className="h-5 w-5" />}
      metrics={
        !loading ? (
          <StatStrip
            items={[
              { label: t('common.total'), value: stats.total, color: 'blue' },
              { label: t('cloud.enabled'), value: stats.active, color: 'green' },
              { label: t('cloud.disabled'), value: stats.inactive, color: 'muted' },
            ]}
          />
        ) : undefined
      }
      toolbar={toolbar}
      actions={(
        <>
          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
            {t('common.refresh')}
          </Button>
          <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
            <Plus className="h-4 w-4 mr-1" />
            {t('cloud.addRegion')}
          </Button>
        </>
      )}
    >
      {loading ? (
        <PageLoading />
      ) : filtered.length === 0 ? (
        <PageEmpty
          icon={<MapPin className="h-12 w-12" />}
          title={t('cloud.noRegionData')}
          action={(
            <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
              <Plus className="h-4 w-4 mr-1" />
              {t('cloud.addRegion')}
            </Button>
          )}
        />
      ) : (
        <ContentPanel toolbar={batchToolbar}>
          <DataTable
            columns={columns}
            data={filtered}
            rowKey={(r) => r.id}
            searchable
            searchPlaceholder={t('cloud.searchRegion')}
            searchKeys={['name', 'code']}
            sortable
            selectable
            selectedIds={selectedIds}
            onSelectionChange={setSelectedIds}
            columnToggle
            exportable
            exportFilename="regions.csv"
            emptyText={t('cloud.noMatchRegion')}
          />
        </ContentPanel>
      )}

      {/* Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingItem ? t('cloud.editRegion') : t('cloud.addRegion')}</DialogTitle>
            <DialogDescription className="sr-only">description</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label>{t('cloud.regionName')} *</Label>
                <Input
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder={t('cloud.regionNamePlaceholder')}
                  className="dg-input"
                />
              </div>
              <div className="space-y-1.5">
                <Label>{t('cloud.code')} *</Label>
                <Input
                  value={formData.code}
                  onChange={(e) => setFormData({ ...formData, code: e.target.value })}
                  placeholder={t('cloud.regionCodePlaceholder')}
                  className="dg-input font-mono"
                  disabled={!!editingItem}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label>{t('cloud.vendor')}</Label>
                <Select value={formData.provider} onValueChange={(v) => setFormData({ ...formData, provider: v })}>
                  <SelectTrigger className="dg-input">
                    <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>{t('common.status')}</Label>
                <Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
                  <SelectTrigger className="dg-input">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="active">{t('cloud.enabled')}</SelectItem>
                    <SelectItem value="inactive">{t('cloud.disabled')}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-1.5">
              <Label>{t('cloud.geoLocation')}</Label>
              <Input
                value={formData.location}
                onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                placeholder={t('cloud.locationPlaceholder')}
                className="dg-input"
              />
            </div>
            <div className="space-y-1.5">
              <Label>{t('cloud.regionEndpoint')}</Label>
              <Input
                value={formData.endpoint}
                onChange={(e) => setFormData({ ...formData, endpoint: e.target.value })}
                placeholder={t('cloud.endpointPlaceholder')}
                className="dg-input font-mono text-sm"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setDialogOpen(false)}>{t('common.cancel')}</Button>
            <Button onClick={handleSubmit} disabled={submitting || !formData.name.trim() || !formData.code.trim()}>
              {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
              {editingItem ? t('common.save') : t('common.create')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </PageShell>
  );
}