import React, { useState, useRef } from 'react';
import { JobPosition } from '@/data/jobs';
import { JobDataManager } from '@/lib/dataManager';
import { SecurityManager, validateAccessCode } from '@/lib/security';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useToast } from '@/hooks/use-toast';
import { Shield, Upload, Download, History, Plus, Edit2, Trash2, X, AlertTriangle, FileText, FileSpreadsheet } from 'lucide-react';

interface AdminPanelProps {
  isOpen: boolean;
  onClose: () => void;
  jobs: JobPosition[];
  onJobsUpdate: (jobs: JobPosition[]) => void;
}

export function AdminPanel({ isOpen, onClose, jobs, onJobsUpdate }: AdminPanelProps) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [accessCode, setAccessCode] = useState('');
  const [isValidating, setIsValidating] = useState(false);
  const [editingJob, setEditingJob] = useState<JobPosition | null>(null);
  const [isJobDialogOpen, setIsJobDialogOpen] = useState(false);
  const [showDeleteAllDialog, setShowDeleteAllDialog] = useState(false);
  const [deleteAllConfirmText, setDeleteAllConfirmText] = useState('');
  const fileInputRef = useRef<HTMLInputElement>(null);
  const { toast } = useToast();

  // Handle authentication
  const handleLogin = async () => {
    if (SecurityManager.isLocked()) {
      const remainingTime = Math.ceil(SecurityManager.getRemainingLockTime() / 60000);
      toast({
        title: "访问被锁定",
        description: `请 ${remainingTime} 分钟后再试`,
        variant: "destructive"
      });
      return;
    }

    setIsValidating(true);
    try {
      const isValid = await validateAccessCode(accessCode);
      if (isValid) {
        setIsAuthenticated(true);
        SecurityManager.resetAttempts();
        toast({
          title: "认证成功",
          description: "欢迎进入管理面板"
        });
      } else {
        SecurityManager.recordFailedAttempt();
        const attempts = SecurityManager.getFailedAttempts();
        toast({
          title: "访问码错误",
          description: `剩余尝试次数: ${3 - attempts}`,
          variant: "destructive"
        });
      }
    } catch (error) {
      toast({
        title: "认证失败",
        description: "系统错误，请重试",
        variant: "destructive"
      });
    }
    setIsValidating(false);
    setAccessCode('');
  };

  // Handle file import
  const handleFileImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    try {
      let importedJobs: JobPosition[];
      
      if (file.name.endsWith('.json')) {
        importedJobs = await JobDataManager.importFromJSON(file);
      } else if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
        importedJobs = await JobDataManager.importFromXLSX(file);
      } else {
        throw new Error('不支持的文件格式，请使用 JSON 或 Excel 文件');
      }

      const updatedJobs = [...jobs, ...importedJobs];
      onJobsUpdate(updatedJobs);
      JobDataManager.saveJobs(updatedJobs);
      
      toast({
        title: "导入成功",
        description: `成功导入 ${importedJobs.length} 个职位`
      });
    } catch (error) {
      toast({
        title: "导入失败",
        description: error.message,
        variant: "destructive"
      });
    }

    // Reset file input
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  // Handle job operations
  const handleAddJob = () => {
    setEditingJob({
      id: `job_${Date.now()}`,
      title: '',
      department: '',
      priority: 'normal',
      url: '',
      description: [],
      requirements: []
    });
    setIsJobDialogOpen(true);
  };

  const handleEditJob = (job: JobPosition) => {
    setEditingJob({ ...job });
    setIsJobDialogOpen(true);
  };

  const handleDeleteJob = (jobId: string) => {
    const updatedJobs = jobs.filter(job => job.id !== jobId);
    onJobsUpdate(updatedJobs);
    JobDataManager.saveJobs(updatedJobs);
    toast({
      title: "删除成功",
      description: "职位已删除"
    });
  };

  const handleDeleteAllJobs = () => {
    if (deleteAllConfirmText !== 'DELETE ALL') {
      toast({
        title: "确认文本错误",
        description: "请输入 'DELETE ALL' 来确认删除",
        variant: "destructive"
      });
      return;
    }

    // Save current jobs to history before deleting all
    JobDataManager.saveJobs(jobs);
    
    // Clear all jobs
    const emptyJobs: JobPosition[] = [];
    onJobsUpdate(emptyJobs);
    JobDataManager.saveJobs(emptyJobs);
    
    setShowDeleteAllDialog(false);
    setDeleteAllConfirmText('');
    
    toast({
      title: "删除成功",
      description: `已删除所有 ${jobs.length} 个职位`,
      variant: "destructive"
    });
  };

  const handleSaveJob = (job: JobPosition) => {
    const existingIndex = jobs.findIndex(j => j.id === job.id);
    let updatedJobs: JobPosition[];
    
    if (existingIndex >= 0) {
      updatedJobs = [...jobs];
      updatedJobs[existingIndex] = job;
    } else {
      updatedJobs = [...jobs, job];
    }
    
    onJobsUpdate(updatedJobs);
    JobDataManager.saveJobs(updatedJobs);
    setIsJobDialogOpen(false);
    setEditingJob(null);
    
    toast({
      title: existingIndex >= 0 ? "更新成功" : "添加成功",
      description: "职位信息已保存"
    });
  };

  // Handle history restoration
  const handleRestoreHistory = (timestamp: number) => {
    const restoredJobs = JobDataManager.restoreFromHistory(timestamp);
    if (restoredJobs) {
      onJobsUpdate(restoredJobs);
      JobDataManager.saveJobs(restoredJobs);
      toast({
        title: "恢复成功",
        description: "数据已恢复到选定版本"
      });
    }
  };

  if (!isOpen) return null;

  return (
    <Dialog open={isOpen} onOpenChange={() => onClose()}>
      <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Shield className="h-5 w-5" />
            MiniMax AI Infra/算法 团队管理系统
          </DialogTitle>
          <DialogDescription>
            数据管理和配置面板
          </DialogDescription>
        </DialogHeader>

        {!isAuthenticated ? (
          <div className="p-6 max-w-md mx-auto">
            <Card>
              <CardHeader>
                <CardTitle className="text-center">身份验证</CardTitle>
                <CardDescription className="text-center">
                  请输入访问码以继续
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {SecurityManager.isLocked() && (
                  <div className="flex items-center gap-2 p-3 bg-destructive/10 text-destructive rounded-md">
                    <AlertTriangle className="h-4 w-4" />
                    <span className="text-sm">
                      访问已被锁定 {Math.ceil(SecurityManager.getRemainingLockTime() / 60000)} 分钟
                    </span>
                  </div>
                )}
                <div>
                  <Label htmlFor="accessCode">访问码</Label>
                  <Input
                    id="accessCode"
                    type="password"
                    value={accessCode}
                    onChange={(e) => setAccessCode(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
                    disabled={isValidating || SecurityManager.isLocked()}
                  />
                </div>
                <Button 
                  onClick={handleLogin} 
                  className="w-full"
                  disabled={isValidating || SecurityManager.isLocked() || !accessCode}
                >
                  {isValidating ? '验证中...' : '登录'}
                </Button>
              </CardContent>
            </Card>
          </div>
        ) : (
          <Tabs defaultValue="manage" className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="manage">职位管理</TabsTrigger>
              <TabsTrigger value="import">数据导入</TabsTrigger>
              <TabsTrigger value="export">数据导出</TabsTrigger>
              <TabsTrigger value="history">历史版本</TabsTrigger>
            </TabsList>

            <TabsContent value="manage" className="space-y-4">
              <div className="flex justify-between items-center">
                <h3 className="text-lg font-semibold">职位列表 ({jobs.length})</h3>
                <div className="flex gap-2">
                  <Button onClick={handleAddJob}>
                    <Plus className="h-4 w-4 mr-2" />
                    添加职位
                  </Button>
                  {jobs.length > 0 && (
                    <Button
                      variant="destructive"
                      onClick={() => setShowDeleteAllDialog(true)}
                    >
                      <Trash2 className="h-4 w-4 mr-2" />
                      删除所有岗位
                    </Button>
                  )}
                </div>
              </div>
              
              <div className="space-y-2 max-h-96 overflow-y-auto">
                {jobs.map((job) => (
                  <Card key={job.id}>
                    <CardContent className="p-4">
                      <div className="flex justify-between items-start">
                        <div className="flex-1">
                          <h4 className="font-medium">{job.title}</h4>
                          <p className="text-sm text-muted-foreground">
                            {job.department} · {
                              job.priority === 'urgent' ? '🔥 紧急' : 
                              job.priority === 'high' ? '⚡ 高优' : '📋 普通'
                            }
                          </p>
                        </div>
                        <div className="flex gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleEditJob(job)}
                          >
                            <Edit2 className="h-3 w-3" />
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleDeleteJob(job.id)}
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>

            <TabsContent value="import" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>数据导入</CardTitle>
                  <CardDescription>
                    支持 JSON 和 Excel 格式文件导入
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <input
                      ref={fileInputRef}
                      type="file"
                      accept=".json,.xlsx,.xls"
                      onChange={handleFileImport}
                      className="hidden"
                    />
                    <Button
                      onClick={() => fileInputRef.current?.click()}
                      className="w-full"
                    >
                      <Upload className="h-4 w-4 mr-2" />
                      选择文件导入
                    </Button>
                    
                    <div className="text-sm text-muted-foreground space-y-2">
                      <p><strong>支持格式:</strong></p>
                      <ul className="list-disc list-inside space-y-1">
                        <li>JSON 文件 (.json) - 标准数据格式</li>
                        <li>Excel 文件 (.xlsx, .xls) - 包含完整职位信息</li>
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="export" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>数据导出</CardTitle>
                  <CardDescription>
                    导出当前职位数据用于备份或分享
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <Button
                    onClick={() => JobDataManager.exportToJSON(jobs)}
                    className="w-full"
                    variant="outline"
                  >
                    <FileText className="h-4 w-4 mr-2" />
                    导出为 JSON 文件
                  </Button>
                  <Button
                    onClick={() => JobDataManager.exportToXLSX(jobs)}
                    className="w-full"
                    variant="outline"
                  >
                    <FileSpreadsheet className="h-4 w-4 mr-2" />
                    导出为 Excel 文件
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="history" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>历史版本</CardTitle>
                  <CardDescription>
                    查看和恢复数据的历史版本
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2 max-h-64 overflow-y-auto">
                    {JobDataManager.getHistory().map((entry) => (
                      <Card key={entry.timestamp}>
                        <CardContent className="p-3">
                          <div className="flex justify-between items-center">
                            <div>
                              <p className="font-medium">
                                {new Date(entry.timestamp).toLocaleString('zh-CN')}
                              </p>
                              <p className="text-sm text-muted-foreground">
                                {entry.count} 个职位
                              </p>
                            </div>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleRestoreHistory(entry.timestamp)}
                            >
                              恢复
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        )}

        {/* Job Edit Dialog */}
        {editingJob && (
          <JobEditDialog
            job={editingJob}
            isOpen={isJobDialogOpen}
            onClose={() => {
              setIsJobDialogOpen(false);
              setEditingJob(null);
            }}
            onSave={handleSaveJob}
          />
        )}

        {/* Delete All Jobs Confirmation Dialog */}
        <Dialog open={showDeleteAllDialog} onOpenChange={setShowDeleteAllDialog}>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2 text-destructive">
                <AlertTriangle className="h-5 w-5" />
                危险操作确认
              </DialogTitle>
              <DialogDescription>
                此操作将永久删除所有 {jobs.length} 个职位数据。此操作不可逆！
              </DialogDescription>
            </DialogHeader>

            <div className="space-y-4">
              <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-md">
                <p className="text-sm text-destructive font-medium mb-2">
                  ⚠️ 警告：此操作将：
                </p>
                <ul className="text-sm text-destructive space-y-1">
                  <li>• 删除所有 {jobs.length} 个职位</li>
                  <li>• 清空当前数据</li>
                  <li>• 在历史记录中保存删除前的数据</li>
                </ul>
              </div>

              <div>
                <Label htmlFor="confirmText">
                  请输入 <code className="bg-muted px-1 rounded">DELETE ALL</code> 来确认删除：
                </Label>
                <Input
                  id="confirmText"
                  value={deleteAllConfirmText}
                  onChange={(e) => setDeleteAllConfirmText(e.target.value)}
                  placeholder="输入 DELETE ALL"
                  className="mt-2"
                />
              </div>
            </div>

            <div className="flex justify-end gap-2 mt-6">
              <Button
                variant="outline"
                onClick={() => {
                  setShowDeleteAllDialog(false);
                  setDeleteAllConfirmText('');
                }}
              >
                取消
              </Button>
              <Button
                variant="destructive"
                onClick={handleDeleteAllJobs}
                disabled={deleteAllConfirmText !== 'DELETE ALL'}
              >
                <Trash2 className="h-4 w-4 mr-2" />
                确认删除所有
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      </DialogContent>
    </Dialog>
  );
}

// Job editing dialog component
interface JobEditDialogProps {
  job: JobPosition;
  isOpen: boolean;
  onClose: () => void;
  onSave: (job: JobPosition) => void;
}

function JobEditDialog({ job, isOpen, onClose, onSave }: JobEditDialogProps) {
  const [editedJob, setEditedJob] = useState<JobPosition>(job);

  const handleSave = () => {
    if (!editedJob.title || !editedJob.department || !editedJob.url) {
      return;
    }
    onSave(editedJob);
  };

  const updateField = (field: keyof JobPosition, value: any) => {
    setEditedJob(prev => ({ ...prev, [field]: value }));
  };

  const updateArrayField = (field: 'description' | 'requirements' | 'bonus', value: string) => {
    const array = value.split('\n').filter(Boolean);
    setEditedJob(prev => ({ 
      ...prev, 
      [field]: field === 'bonus' ? (array.length > 0 ? array : undefined) : array 
    }));
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>
            {job.title ? '编辑职位' : '添加职位'}
          </DialogTitle>
        </DialogHeader>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-4">
            <div>
              <Label htmlFor="title">职位名称 *</Label>
              <Input
                id="title"
                value={editedJob.title}
                onChange={(e) => updateField('title', e.target.value)}
                placeholder="例如：高性能网络专家"
              />
            </div>

            <div>
              <Label htmlFor="department">部门 *</Label>
              <Input
                id="department"
                value={editedJob.department}
                onChange={(e) => updateField('department', e.target.value)}
                placeholder="例如：系统组直招"
              />
            </div>

            <div>
              <Label htmlFor="priority">优先级</Label>
              <Select
                value={editedJob.priority}
                onValueChange={(value) => updateField('priority', value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="urgent">🔥 紧急</SelectItem>
                  <SelectItem value="high">⚡ 高优</SelectItem>
                  <SelectItem value="normal">📋 普通</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label htmlFor="url">申请链接 *</Label>
              <Input
                id="url"
                value={editedJob.url}
                onChange={(e) => updateField('url', e.target.value)}
                placeholder="https://..."
              />
            </div>
          </div>

          <div className="space-y-4">
            <div>
              <Label htmlFor="description">职位描述</Label>
              <Textarea
                id="description"
                rows={4}
                value={editedJob.description.join('\n')}
                onChange={(e) => updateArrayField('description', e.target.value)}
                placeholder="每行一个职责描述"
              />
            </div>

            <div>
              <Label htmlFor="requirements">职位要求</Label>
              <Textarea
                id="requirements"
                rows={4}
                value={editedJob.requirements.join('\n')}
                onChange={(e) => updateArrayField('requirements', e.target.value)}
                placeholder="每行一个要求"
              />
            </div>

            <div>
              <Label htmlFor="bonus">加分项（可选）</Label>
              <Textarea
                id="bonus"
                rows={3}
                value={editedJob.bonus?.join('\n') || ''}
                onChange={(e) => updateArrayField('bonus', e.target.value)}
                placeholder="每行一个加分项"
              />
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 mt-6">
          <Button variant="outline" onClick={onClose}>
            取消
          </Button>
          <Button 
            onClick={handleSave}
            disabled={!editedJob.title || !editedJob.department || !editedJob.url}
          >
            保存
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}