'use client';

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import { Card } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';
import { toast } from 'sonner';
import {
  Shield,
  Unlock,
  Users,
  Lock,
  Gauge,
} from 'lucide-react';

interface ModelService {
  id: string;
  name: string;
  accessLevel: string;
}

interface PermissionManageDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  model: ModelService | null;
}

export function PermissionManageDialog({ open, onOpenChange, model }: PermissionManageDialogProps) {
  const handleSavePermission = () => {
    toast.success('权限设置已保存');
    onOpenChange(false);
  };

  if (!model) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>权限管理 - {model.name}</DialogTitle>
          <DialogDescription>
            配置模型服务的访问权限和使用限制
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* 访问级别 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Shield className="w-4 h-4 text-blue-600 dark:text-blue-400" />
              访问级别
            </h4>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 cursor-pointer">
                <div className="flex items-center gap-3">
                  <Unlock className="w-5 h-5 text-green-600 dark:text-green-400" />
                  <div>
                    <div className="font-medium">公开访问</div>
                    <div className="text-xs text-muted-foreground">任何人都可以访问此模型</div>
                  </div>
                </div>
                <input
                  type="radio"
                  name="access"
                  defaultChecked={model.accessLevel === '公开'}
                />
              </div>
              <div className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 cursor-pointer">
                <div className="flex items-center gap-3">
                  <Users className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                  <div>
                    <div className="font-medium">团队共享</div>
                    <div className="text-xs text-muted-foreground">仅团队成员可以访问</div>
                  </div>
                </div>
                <input
                  type="radio"
                  name="access"
                  defaultChecked={model.accessLevel === '团队共享'}
                />
              </div>
              <div className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 cursor-pointer">
                <div className="flex items-center gap-3">
                  <Lock className="w-5 h-5 text-red-600 dark:text-red-400" />
                  <div>
                    <div className="font-medium">私有访问</div>
                    <div className="text-xs text-muted-foreground">仅所有者可以访问</div>
                  </div>
                </div>
                <input
                  type="radio"
                  name="access"
                  defaultChecked={model.accessLevel === '私有'}
                />
              </div>
            </div>
          </Card>

          {/* API限流 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Gauge className="w-4 h-4 text-orange-600 dark:text-orange-400" />
              API限流配置
            </h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>每秒请求数限制</Label>
                <Input type="number" defaultValue="100" placeholder="0表示无限制" />
              </div>
              <div>
                <Label>每天请求数限制</Label>
                <Input type="number" defaultValue="10000" placeholder="0表示无限制" />
              </div>
              <div>
                <Label>单次批量大小限制</Label>
                <Input type="number" defaultValue="32" />
              </div>
              <div>
                <Label>并发连接数限制</Label>
                <Input type="number" defaultValue="10" />
              </div>
            </div>
          </Card>

          {/* IP白名单 */}
          <Card className="p-4">
            <h4 className="mb-4 flex items-center gap-2">
              <Shield className="w-4 h-4 text-green-600 dark:text-green-400" />
              IP白名单
            </h4>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-blue-50 dark:bg-blue-950 rounded-lg">
                <div>
                  <div className="font-medium">启用IP白名单</div>
                  <div className="text-xs text-muted-foreground">仅允许白名单内的IP访问</div>
                </div>
                <Switch />
              </div>
              <div>
                <Label>IP地址列表</Label>
                <Textarea
                  placeholder="每行一个IP地址或CIDR，如：192.168.1.1 或 10.0.0.0/8"
                  rows={4}
                />
              </div>
            </div>
          </Card>

          {/* 访问令牌管理 */}
          <Card className="p-4">
            <h4 className="mb-4">访问令牌</h4>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-950 rounded-lg">
                <div>
                  <div className="font-medium">启用API密钥认证</div>
                  <div className="text-xs text-muted-foreground">API调用需要有效的密钥</div>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="space-y-2">
                <Label>已生成的API密钥</Label>
                <div className="space-y-2">
                  <div className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-900 rounded text-sm">
                    <code className="font-mono text-xs">sk-1234567890abcdef...</code>
                    <div className="flex gap-1">
                      <Button size="sm" variant="ghost">复制</Button>
                      <Button size="sm" variant="ghost">删除</Button>
                    </div>
                  </div>
                </div>
                <Button size="sm" variant="outline" className="w-full">
                  生成新密钥
                </Button>
              </div>
            </div>
          </Card>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600" onClick={handleSavePermission}>
            <Shield className="w-4 h-4 mr-2" />
            保存权限设置
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}