'use client';

import React from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Menu, MenuType } from '../types';

interface MenuFormDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  editingMenu: Menu | null;
  parentMenu: Menu | null;
  formData: Partial<Menu>;
  onFormDataChange: (data: Partial<Menu>) => void;
  onSave: () => void;
}

export function MenuFormDialog({
  open,
  onOpenChange,
  editingMenu,
  parentMenu,
  formData,
  onFormDataChange,
  onSave
}: MenuFormDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>
            {editingMenu ? '编辑菜单' : parentMenu ? `添加子菜单（父级：${parentMenu.name}）` : '添加一级菜单'}
          </DialogTitle>
          <DialogDescription className="sr-only">
            {editingMenu ? '编辑菜单信息' : '添加新菜单'}
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label htmlFor="name">菜单名称 *</Label>
              <Input
                id="name"
                value={formData.name || ''}
                onChange={(e) => onFormDataChange({ ...formData, name: e.target.value })}
                placeholder="请输入菜单名称"
              />
            </div>
            <div>
              <Label htmlFor="code">菜单编码 *</Label>
              <Input
                id="code"
                value={formData.code || ''}
                onChange={(e) => onFormDataChange({ ...formData, code: e.target.value })}
                placeholder="请输入菜单编码，如：system:menu:add"
              />
            </div>
            <div>
              <Label htmlFor="type">菜单类型 *</Label>
              <Select
                value={formData.type}
                onValueChange={(value: MenuType) => onFormDataChange({ ...formData, type: value })}
              >
                <SelectTrigger id="type">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="directory">目录</SelectItem>
                  <SelectItem value="menu">菜单</SelectItem>
                  <SelectItem value="button">按钮</SelectItem>
                </SelectContent>
              </Select>
              <p className="text-xs text-gray-500 mt-1">
                目录：可包含子菜单的分组 / 菜单：具体页面 / 按钮：页面内的操作权限
              </p>
            </div>
            <div>
              <Label htmlFor="icon">图标名称</Label>
              <Input
                id="icon"
                value={formData.icon || ''}
                onChange={(e) => onFormDataChange({ ...formData, icon: e.target.value })}
                placeholder="如：Settings, Users"
              />
            </div>
            <div>
              <Label htmlFor="path">路由路径 {formData.type === 'menu' ? '*' : ''}</Label>
              <Input
                id="path"
                value={formData.path || ''}
                onChange={(e) => onFormDataChange({ ...formData, path: e.target.value })}
                placeholder="/config/user/menu"
              />
              {formData.type === 'menu' && (
                <p className="text-xs text-red-500 mt-1">菜单类型必须填写路由路径</p>
              )}
            </div>
            <div>
              <Label htmlFor="component">组件路径</Label>
              <Input
                id="component"
                value={formData.component || ''}
                onChange={(e) => onFormDataChange({ ...formData, component: e.target.value })}
                placeholder="@/views/config/MenuManagement"
              />
            </div>
            <div>
              <Label htmlFor="sort">排序号 *</Label>
              <Input
                id="sort"
                type="number"
                value={formData.sort || 0}
                onChange={(e) => onFormDataChange({ ...formData, sort: parseInt(e.target.value) || 0 })}
                placeholder="数字越小越靠前"
              />
            </div>
            <div>
              <Label htmlFor="status">状态 *</Label>
              <Select
                value={formData.status}
                onValueChange={(value: 'active' | 'inactive') => onFormDataChange({ ...formData, status: value })}
              >
                <SelectTrigger id="status">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="active">启用</SelectItem>
                  <SelectItem value="inactive">停用</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="flex items-center justify-between p-3 border rounded-lg bg-gray-50">
            <div>
              <Label>是否可见</Label>
              <p className="text-xs text-gray-500 mt-1">控制菜单是否在导航中显示</p>
            </div>
            <Switch
              checked={formData.visible}
              onCheckedChange={(checked) => onFormDataChange({ ...formData, visible: checked })}
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={onSave} className="bg-green-600 hover:bg-green-700">
            保存
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}