import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { 
  Download,
  Upload,
  FileSpreadsheet,
  Check,
  X,
  AlertCircle,
  ChevronRight,
  ChevronLeft,
} from 'lucide-react';
import { regionApi } from '@/services/api';

interface RegionOption {
  id: string;
  name: string;
  code: string;
}

interface ExcelServerImportProps {
  open: boolean;
  onClose: () => void;
}

const connectionMethods = [
  { id: 'password', name: '密码认证', description: '使用用户名密码连接' },
  { id: 'key', name: '密钥认证', description: '使用SSH密钥连接' },
];

type PreviewRow = {
  row: number; hostname: string; ip: string; port: number;
  username: string; status: string; message: string;
};

export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
  const [step, setStep] = useState(1);
  const [selectedRegion, setSelectedRegion] = useState<string>('');
  const [connectionMethod, setConnectionMethod] = useState<string>('password');
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [previewData, setPreviewData] = useState<PreviewRow[]>([]);
  const [regions, setRegions] = useState<RegionOption[]>([]);

  // 对话框打开时拉取区域列表 // Logan.Li
  useEffect(() => {
    if (!open) return;
    let cancelled = false;
    (async () => {
      try {
        const resp = await regionApi.list();
        if (cancelled) return;
        const list = resp?.list ?? [];
        setRegions(
          list.map((r: any) => ({
            id: String(r.id ?? ''),
            name: r.name ?? '',
            code: r.code ?? '',
          }))
        );
      } catch {
        if (!cancelled) setRegions([]);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [open]);

  const handleNext = () => {
    if (step === 2 && selectedFile) {
      setIsUploading(true);
      setTimeout(() => {
        setIsUploading(false);
        setPreviewData([]); // 真实解析由后端处理
        setStep(step + 1);
      }, 1500);
    } else {
      setStep(step + 1);
    }
  };

  const handleBack = () => {
    if (step > 1) {
      setStep(step - 1);
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setSelectedFile(e.target.files[0]);
    }
  };

  const handleImport = () => {
    setTimeout(() => {
      onClose();
      setStep(1);
      setSelectedRegion('');
      setConnectionMethod('password');
      setSelectedFile(null);
      setPreviewData([]);
    }, 1500);
  };

  const handleClose = () => {
    onClose();
    setStep(1);
    setSelectedRegion('');
    setConnectionMethod('password');
    setSelectedFile(null);
    setPreviewData([]);
  };

  const validCount = previewData.filter(d => d.status === 'valid').length;
  const warningCount = previewData.filter(d => d.status === 'warning').length;
  const errorCount = previewData.filter(d => d.status === 'error').length;

  const steps = [
    { id: 1, title: '配置' },
    { id: 2, title: '上传' },
    { id: 3, title: '确认' },
  ];

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="max-w-3xl bg-slate-900 border-slate-700 text-slate-100">
        <DialogHeader>
          <DialogTitle className="text-xl">Excel导入服务器</DialogTitle>
        </DialogHeader>

        {/* Step Indicator */}
        <div className="flex items-center justify-center mb-6">
          {steps.map((s, index) => (
            <div key={s.id} className="flex items-center">
              <div className={`flex items-center justify-center w-8 h-8 rounded-full ${
                step === s.id 
                  ? 'bg-blue-600 text-white' 
                  : step > s.id 
                    ? 'bg-emerald-600 text-white' 
                    : 'bg-slate-800 text-slate-500'
              }`}>
                {step > s.id ? <Check className="h-4 w-4" /> : s.id}
              </div>
              <span className={`ml-2 text-sm ${step === s.id ? 'text-slate-200' : 'text-slate-500'}`}>
                {s.title}
              </span>
              {index < steps.length - 1 && (
                <div className="w-12 h-0.5 bg-slate-700 mx-3" />
              )}
            </div>
          ))}
        </div>

        {/* Step 1: Configuration */}
        {step === 1 && (
          <div className="space-y-6">
            {/* Download Template */}
            <Card className="bg-slate-800 border-slate-700">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
                      <FileSpreadsheet className="h-5 w-5 text-emerald-400" />
                    </div>
                    <div>
                      <p className="font-medium text-slate-200">主机导入模板</p>
                      <p className="text-xs text-slate-500">下载Excel模板，填写服务器信息后上传</p>
                    </div>
                  </div>
                  <Button variant="outline" className="border-slate-700 text-slate-300">
                    <Download className="h-4 w-4 mr-2" />
                    下载模板
                  </Button>
                </div>
              </CardContent>
            </Card>

            {/* Region Selection */}
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">选择区域</label>
              <select
                value={selectedRegion}
                onChange={(e) => setSelectedRegion(e.target.value)}
                className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
              >
                <option value="">请选择区域</option>
                {regions.map((region) => (
                  <option key={region.id} value={region.id}>
                    {region.name} ({region.code})
                  </option>
                ))}
              </select>
            </div>

            {/* Connection Method */}
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-2">连接方式</label>
              <div className="grid grid-cols-2 gap-4">
                {connectionMethods.map((method) => (
                  <Card
                    key={method.id}
                    className={`cursor-pointer transition-all ${
                      connectionMethod === method.id
                        ? 'border-blue-500 ring-1 ring-blue-500/30 bg-slate-800'
                        : 'border-slate-700 hover:border-slate-600 bg-slate-800/50'
                    }`}
                    onClick={() => setConnectionMethod(method.id)}
                  >
                    <CardContent className="p-3">
                      <p className="font-medium text-slate-200">{method.name}</p>
                      <p className="text-xs text-slate-500">{method.description}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Step 2: Upload */}
        {step === 2 && (
          <div className="space-y-6">
            <div 
              className="border-2 border-dashed border-slate-700 rounded-lg p-8 text-center hover:border-blue-500/50 transition-colors"
            >
              <Upload className="h-12 w-12 mx-auto mb-4 text-slate-500" />
              <p className="text-slate-300 mb-2">点击或拖拽文件到此处上传</p>
              <p className="text-xs text-slate-500 mb-4">支持 .xlsx, .xls 格式文件</p>
              <Input
                type="file"
                accept=".xlsx,.xls"
                onChange={handleFileChange}
                className="hidden"
                id="excel-upload"
              />
              <label htmlFor="excel-upload">
                <Button variant="outline" className="border-slate-700 text-slate-300" asChild>
                  <span>选择文件</span>
                </Button>
              </label>
            </div>

            {selectedFile && (
              <Card className="bg-slate-800 border-slate-700">
                <CardContent className="p-3 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <FileSpreadsheet className="h-8 w-8 text-emerald-400" />
                    <div>
                      <p className="text-sm text-slate-200">{selectedFile.name}</p>
                      <p className="text-xs text-slate-500">{(selectedFile.size / 1024).toFixed(2)} KB</p>
                    </div>
                  </div>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="text-slate-400 hover:text-red-400"
                    onClick={() => setSelectedFile(null)}
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </CardContent>
              </Card>
            )}

            {isUploading && (
              <div className="text-center py-4">
                <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-2" />
                <p className="text-slate-400 text-sm">正在解析文件...</p>
              </div>
            )}
          </div>
        )}

        {/* Step 3: Preview & Confirm */}
        {step === 3 && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <p className="text-slate-400 text-sm">数据预览</p>
              <div className="flex items-center gap-2">
                <Badge className="bg-emerald-500/20 text-emerald-400 border-0">
                  <Check className="h-3 w-3 mr-1" />
                  {validCount} 有效
                </Badge>
                {warningCount > 0 && (
                  <Badge className="bg-amber-500/20 text-amber-400 border-0">
                    <AlertCircle className="h-3 w-3 mr-1" />
                    {warningCount} 警告
                  </Badge>
                )}
                {errorCount > 0 && (
                  <Badge className="bg-red-500/20 text-red-400 border-0">
                    <X className="h-3 w-3 mr-1" />
                    {errorCount} 错误
                  </Badge>
                )}
              </div>
            </div>

            <div className="border rounded-lg border-slate-700 overflow-hidden max-h-[350px] overflow-y-auto">
              <table className="w-full">
                <thead className="bg-slate-800 sticky top-0">
                  <tr>
                    <th className="px-3 py-2 text-left text-xs font-medium text-slate-400">行号</th>
                    <th className="px-3 py-2 text-left text-xs font-medium text-slate-400">主机名</th>
                    <th className="px-3 py-2 text-left text-xs font-medium text-slate-400">IP地址</th>
                    <th className="px-3 py-2 text-left text-xs font-medium text-slate-400">端口</th>
                    <th className="px-3 py-2 text-left text-xs font-medium text-slate-400">用户名</th>
                    <th className="px-3 py-2 text-left text-xs font-medium text-slate-400">状态</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800">
                  {previewData.map((row) => (
                    <tr key={row.row} className="hover:bg-slate-800/50">
                      <td className="px-3 py-2 text-sm text-slate-500">{row.row}</td>
                      <td className="px-3 py-2 text-sm text-slate-200">{row.hostname || '-'}</td>
                      <td className="px-3 py-2 text-sm text-slate-300">{row.ip}</td>
                      <td className="px-3 py-2 text-sm text-slate-300">{row.port}</td>
                      <td className="px-3 py-2 text-sm text-slate-300">{row.username}</td>
                      <td className="px-3 py-2">
                        <div className="flex items-center gap-1">
                          {row.status === 'valid' && (
                            <Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-xs">
                              <Check className="h-3 w-3 mr-1" />
                              {row.message}
                            </Badge>
                          )}
                          {row.status === 'warning' && (
                            <Badge className="bg-amber-500/20 text-amber-400 border-0 text-xs">
                              <AlertCircle className="h-3 w-3 mr-1" />
                              {row.message}
                            </Badge>
                          )}
                          {row.status === 'error' && (
                            <Badge className="bg-red-500/20 text-red-400 border-0 text-xs">
                              <X className="h-3 w-3 mr-1" />
                              {row.message}
                            </Badge>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {errorCount > 0 && (
              <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30">
                <div className="flex items-center gap-2 text-red-400">
                  <AlertCircle className="h-4 w-4" />
                  <span className="text-sm">存在 {errorCount} 条错误数据，请修正后重新上传</span>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Footer */}
        <DialogFooter className="flex justify-between items-center">
          <div>
            {step > 1 && (
              <Button variant="outline" onClick={handleBack} className="border-slate-700 text-slate-300">
                <ChevronLeft className="h-4 w-4 mr-1" />
                上一步
              </Button>
            )}
          </div>
          <div className="flex gap-2">
            <Button variant="outline" onClick={handleClose} className="border-slate-700 text-slate-300">
              取消
            </Button>
            {step < 3 ? (
              <Button 
                onClick={handleNext} 
                disabled={(step === 1 && !selectedRegion) || (step === 2 && !selectedFile)}
                className="bg-blue-600 hover:bg-blue-700"
              >
                下一步
                <ChevronRight className="h-4 w-4 ml-1" />
              </Button>
            ) : (
              <Button 
                onClick={handleImport}
                disabled={errorCount > 0 || validCount === 0}
                className="bg-emerald-600 hover:bg-emerald-700"
              >
                <Check className="h-4 w-4 mr-1" />
                确认导入 ({validCount})
              </Button>
            )}
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}