import React from "react";
import { Modal } from "@/components/common/modal";
import { X } from "lucide-react";

interface Leave {
  id: string;
  leaveDate?: string;
  fromDate?: string;
  toDate?: string;
  leaveType?: string;
  reason: string;
  status: "Pending" | "Approved" | "Rejected" | "PENDING" | "APPROVED" | "REJECTED";
  approvedBy?: string;
  approver?: {
    firstName: string;
    lastName: string;
  };
  comment?: string;
}

interface ViewLeaveModalProps {
  isOpen: boolean;
  onClose: () => void;
  leave: Leave | null;
}

export default function ViewLeaveModal({ isOpen, onClose, leave }: ViewLeaveModalProps) {
  if (!leave) return null;

  let displayDate = leave.leaveDate;
  if (!displayDate) {
    if (leave.fromDate && leave.toDate && leave.fromDate === leave.toDate) {
      displayDate = `${new Date(leave.fromDate).toLocaleDateString()} (${leave.leaveType || ''})`;
    } else if (leave.fromDate && leave.toDate) {
      displayDate = `${new Date(leave.fromDate).toLocaleDateString()} to ${new Date(leave.toDate).toLocaleDateString()}`;
    } else if (leave.fromDate) {
      displayDate = new Date(leave.fromDate).toLocaleDateString();
    } else {
      displayDate = "N/A";
    }
  }

  return (
    <Modal isOpen={isOpen} onClose={onClose} className="max-w-[700px] m-4">
      <div className="no-scrollbar relative w-full max-w-[700px] rounded-3xl bg-white p-4 lg:p-8">
        <div className="px-2 pr-14">
          <h4 className="mb-2 text-xl lg:text-2xl font-semibold text-brand-950">
            Leave Details
          </h4>
          {/* <p className="mb-6 text-sm text-gray-500 lg:mb-7">
            ID: #{leave.id}
          </p> */}
        </div>

        {/* Body */}
        <div className="px-2 space-y-6 lg:space-y-5">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
              <p className="mb-1.5 block text-sm font-normal text-gray-500">Status</p>
              <p className={`font-medium text-sm ${leave.status === "Approved" ? "text-green-600" :
                leave.status === "Rejected" ? "text-red-600" :
                  "text-orange-600"
                }`}>
                {leave.status}
              </p>
            </div>
            <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
              <p className="mb-1.5 block text-sm font-normal text-gray-500">Leave Dates</p>
              <p className="font-medium text-sm text-gray-800 whitespace-pre-wrap">{displayDate}</p>
            </div>
          </div>

          <div>
            <h5 className="mb-4 text-lg font-medium text-gray-800">Leave Information</h5>
            <div className="bg-white border border-gray-200 rounded-lg p-4 space-y-4">
              <div className="flex items-center gap-3">
                <div>
                  <p className="text-sm text-gray-500 font-normal">Reason</p>
                  <p className="text-sm font-medium text-gray-800 mt-1.5">{leave.reason}</p>
                </div>
              </div>
              {/* <div className="pt-4 border-t border-gray-100">
                <div>
                  <p className="mb-1.5 block text-sm font-normal text-gray-500">Start Date</p>
                  <p className="text-sm font-medium text-gray-800">{selectedProject.startDate || "N/A"}</p>
                </div>
              </div> */}
              {leave.status !== "Pending" && (
                <div className="pt-4 border-t border-gray-100 space-y-4">
                  <div>
                    <p className="text-sm font-normal text-gray-500">Action By</p>
                    <p className="text-sm font-medium text-gray-900 mt-1">{leave.approver ? `${leave.approver.firstName} ${leave.approver.lastName}` : (leave.approvedBy || "N/A")}</p>
                  </div>
                  {leave.comment && (
                    <div>
                      <p className="text-sm font-normal text-gray-500">Comment</p>
                      <p className="text-sm font-medium text-gray-900 mt-1 italic">"{leave.comment}"</p>
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
}