'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 { Card } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Employee, Role, EmployeeFormData } from '../types';

interface EmployeeFormDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  editingEmployee: Employee | null;
  formData: EmployeeFormData;
  onFormDataChange: (data: EmployeeFormData) => void;
  onSave: () => void;
  roles: Role[];
}

export function EmployeeFormDialog({
  open,
  onOpenChange,
  editingEmployee,
  formData,
  onFormDataChange,
  onSave,
  roles
}: EmployeeFormDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>{editingEmployee ? '编辑员工' : '添加员工'}</DialogTitle>
          <DialogDescription className="sr-only">
            {editingEmployee ? '编辑员工信息' : '添加新员工'}
          </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="department">部门</Label>
              <Input
                id="department"
                value={formData.department || ''}
                onChange={(e) => onFormDataChange({ ...formData, department: e.target.value })}
                placeholder="所属部门"
              />
            </div>
            <div>
              <Label htmlFor="position">职位</Label>
              <Input
                id="position"
                value={formData.position || ''}
                onChange={(e) => onFormDataChange({ ...formData, position: e.target.value })}
                placeholder="职位名称"
              />
            </div>
          </div>

          {/* 角色选择 */}
          <div>
            <Label>角色配置 *</Label>
            <Card className="mt-2 p-4 bg-gray-50">
              <div className="grid grid-cols-2 gap-3">
                {roles
                  .filter(role => role.status === 'active')
                  .map((role) => (
                    <div key={role.id} className="flex items-start gap-2">
                      <Checkbox
                        id={`role-${role.id}`}
                        checked={formData.roleIds?.includes(role.id) || false}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            onFormDataChange({
                              ...formData,
                              roleIds: [...(formData.roleIds || []), role.id],
                            });
                          } else {
                            onFormDataChange({
                              ...formData,
                              roleIds: (formData.roleIds || []).filter(id => id !== role.id),
                            });
                          }
                        }}
                      />
                      <div className="flex-1">
                        <Label htmlFor={`role-${role.id}`} className="cursor-pointer text-foreground">
                          {role.name}
                        </Label>
                        {role.description && (
                          <p className="text-xs text-muted-foreground mt-0.5">
                            {role.description}
                          </p>
                        )}
                      </div>
                    </div>
                  ))}
              </div>
              {roles.filter(r => r.status === 'active').length === 0 && (
                <p className="text-sm text-muted-foreground text-center py-2">
                  暂无可用角色，请先在角色管理中创建角色
                </p>
              )}
            </Card>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={onSave}>保存</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}