"use client";

import {
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
  Typography,
  Chip,
  Divider,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { ticketPriorities, ticketStatuses } from "@/core/constant";
import { TicketInterface } from "@/core/types";

export default function TicketDetailModal({
  open,
  onClose,
  ticket,
}: {
  open: boolean;
  onClose: () => void;
  ticket: TicketInterface | null;
}) {
  if (!ticket) return null;
  const status = ticketStatuses.find((p) => p.id === ticket?.status);
  const priority = ticketPriorities.find((p) => p.id === ticket?.priority);
  return (
    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
      <DialogTitle className="flex justify-between items-center text-slate-800">
        <span>جزئیات تیکت #{ticket.id.slice(-6)}</span>
        <IconButton onClick={onClose} size="small">
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent dividers>
        <div className="space-y-4">
          <div>
            <Typography variant="subtitle2" className="text-slate-500">
              واحد / بخش
            </Typography>
            <Typography className="font-semibold text-slate-900">
              {ticket.department?.displayName}
            </Typography>
          </div>
          <div>
            <Typography variant="subtitle2" className="text-slate-500">
              كاربر
            </Typography>
            <Typography className="font-semibold text-slate-900">
              {ticket.createdBy}
            </Typography>
          </div>
          <div>
            <Typography variant="subtitle2" className="text-slate-500">
              ارجاع به
            </Typography>
            <Typography className="font-semibold text-slate-900">
              {ticket.assignee.fullname}
            </Typography>
          </div>
          <div className="flex items-center justify-start gap-4">
            <div>
              <Typography variant="subtitle2" className="text-slate-500">
                وضعیت
              </Typography>
              <Chip
                label={status?.displayName}
                className={`mt-1 bg-blue-100 text-blue-700 font-medium`}
              />
            </div>
            <div>
              <Typography variant="subtitle2" className="text-slate-500">
                اولویت
              </Typography>
              <Chip
                label={priority?.displayName}
                className={`mt-1 bg-red-100 text-red-700 font-medium`}
              />
            </div>
            <div>
              <Typography variant="subtitle2" className="text-slate-500">
                محل وقوع مشكل
              </Typography>
              <Chip
                label={ticket?.location}
                className={`mt-1 bg-blue-100 text-blue-700 font-medium`}
              />
            </div>
          </div>

          <Divider />

          <div>
            <Typography variant="subtitle2" className="text-slate-500">
              توضیحات
            </Typography>
            <Typography className="text-slate-700 mt-2 leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-100">
              {ticket.description || "توضیحی ثبت نشده است."}
            </Typography>
          </div>
          <div>
            <Typography variant="subtitle2" className="text-slate-500">
              اقدام كارشناس
            </Typography>
            <Typography className="text-slate-700 mt-2 leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-100">
              {ticket.helpdeskAction || "توضیحی ثبت نشده است."}
            </Typography>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}