'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 { User, Enterprise, UserFormData } from '../types';

interface UserFormDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  editingUser: User | null;
  formData: UserFormData;
  onFormDataChange: (data: UserFormData) => void;
  onSave: () => void;
  enterprises: Enterprise[];
}

export function UserFormDialog({
  open,
  onOpenChange,
  editingUser,
  formData,
  onFormDataChange,
  onSave,
  enterprises
}: UserFormDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>{editingUser ? '编辑用户' : '添加用户'}</DialogTitle>
          <DialogDescription className="sr-only">
            {editingUser ? '编辑用户信息' : '添加新用户'}
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label htmlFor="username">用户名 *</Label>
              <Input
                id="username"
                value={formData.username || ''}
                onChange={(e) => onFormDataChange({ ...formData, username: e.target.value })}
                placeholder="登录用户名"
              />
            </div>
            <div>
              <Label htmlFor="name">姓名 *</Label>
              <Input
                id="name"
                value={formData.name || ''}
                onChange={(e) => onFormDataChange({ ...formData, name: e.target.value })}
                placeholder="真实姓名"
              />
            </div>
            <div>
              <Label htmlFor="phone">电话 *</Label>
              <Input
                id="phone"
                value={formData.phone || ''}
                onChange={(e) => onFormDataChange({ ...formData, phone: e.target.value })}
                placeholder="手机号码"
              />
            </div>
            <div>
              <Label htmlFor="email">邮箱</Label>
              <Input
                id="email"
                type="email"
                value={formData.email || ''}
                onChange={(e) => onFormDataChange({ ...formData, email: e.target.value })}
                placeholder="电子邮箱"
              />
            </div>
            <div>
              <Label htmlFor="userType">用户类型 *</Label>
              <Select
                value={formData.userType || 'enterprise_admin'}
                onValueChange={(value) => {
                  onFormDataChange({
                    ...formData,
                    userType: value,
                    // 如果切换为超级管理员，清除企业信息
                    ...(value === 'super_admin' ? { enterpriseId: undefined, enterpriseName: undefined } : {})
                  });
                }}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="super_admin">超级管理员</SelectItem>
                  <SelectItem value="enterprise_admin">企业管理员</SelectItem>
                </SelectContent>
              </Select>
            </div>
            {formData.userType === 'enterprise_admin' && (
              <div>
                <Label htmlFor="enterpriseId">所属企业 *</Label>
                <Select
                  value={formData.enterpriseId || ''}
                  onValueChange={(value: string) => {
                    const selectedEnterprise = enterprises.find(e => e.id === value);
                    onFormDataChange({
                      ...formData,
                      enterpriseId: value,
                      enterpriseName: selectedEnterprise?.name
                    });
                  }}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="请选择企业" />
                  </SelectTrigger>
                  <SelectContent>
                    {enterprises.map((enterprise) => (
                      <SelectItem key={enterprise.id} value={enterprise.id}>
                        {enterprise.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={onSave}>保存</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}