import React from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Typography,
  Button,
  Box,
} from "@mui/material";

const EmployeeDetailsModal = ({ open, onClose, employee, type }) => {
  if (!employee) return null;

  // دالة لتحويل الحالة الرقمية إلى نصية
  const getStatusText = (active) => (active ? "Active" : "Inactive");

  // عنوان المودال حسب نوع الموظف
  const getTitle = () => {
    switch (type?.toLowerCase()) {
      case "waiter":
        return "Waiter Details";
      case "cooker":
        return "Cooker Details";
      case "accountant":
        return "Accountant Details";
      default:
        return "Employee Details";
    }
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>{getTitle()}</DialogTitle>
      <DialogContent dividers>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {employee.name && <Typography><b>Name:</b> {employee.name}</Typography>}
          {employee.email && <Typography><b>Email:</b> {employee.email}</Typography>}
          {employee.shift_type && <Typography><b>Shift:</b> {employee.shift_type}</Typography>}
          {employee.working_hours !== undefined && (
            <Typography><b>Working Hours:</b> {employee.working_hours}</Typography>
          )}
          {employee.monthly_salary !== undefined && (
            <Typography><b>Monthly Salary:</b> {employee.monthly_salary}</Typography>
          )}
          {employee.active !== undefined && (
            <Typography><b>Status:</b> {getStatusText(employee.active)}</Typography>
          )}
          {employee.code && <Typography><b>Code:</b> {employee.code}</Typography>}
          {employee.expires_at && <Typography><b>Expires At:</b> {employee.expires_at}</Typography>}
        </Box>
      </DialogContent>
      <DialogActions>
        <Button
          onClick={onClose}
          variant="outlined"
          sx={{ textTransform: "none", minWidth: { md: 120 } }}
        >
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default EmployeeDetailsModal;