"use client";
import { useTranslations } from "next-intl";
import Button from "../Button";

interface StatusModalProps {
  isOpen: boolean;
  onClose: () => void;
  currentStatus: string;
  selectedStatus: string;
  setSelectedStatus: (val: string) => void;
  statusMessage: string;
  setStatusMessage: (val: string) => void;
  errorMessage?: string;
  loading?: boolean;
  handleStatusUpdate: () => void;
}

export default function StatusModal({
  isOpen,
  onClose,
  currentStatus,
  selectedStatus,
  setSelectedStatus,
  statusMessage,
  setStatusMessage,
  errorMessage,
  loading,
  handleStatusUpdate,
}: StatusModalProps) {
  const t = useTranslations();
  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
      >
        <div className="flex items-start gap-3 mb-4">
          <div>
            <h2 className="text-lg font-bold text-neutrals800 dark:text-neutrals100">
              {t("order_card.status_modal.title")}
            </h2>
           
            <p className="text-xs text-yellow-500">
              {t("order_card.status_modal.warning")}
            </p>
          </div>
        </div>

        <hr className="mt-1 my-4 mb-3 border-t border-neutrals200 dark:border-neutrals700" />

        <p className="mb-1 text-[13px] text-neutrals600 dark:text-neutrals300">
          {t("order_card.status_modal.description")}
        </p>
        <textarea
          value={statusMessage}
          onChange={(e) => setStatusMessage(e.target.value)}
          placeholder={t("order_card.status_modal.placeholder")}
          className={`w-full border rounded-lg p-2 text-sm focus:outline-none ${errorMessage
            ? "border-red-500"
            : "border-neutrals300 dark:border-neutrals700 dark:bg-darkbg dark:text-neutrals200"
            }`}
          rows={4}
        />
        {errorMessage && (
          <p className="text-red-500 text-sm mt-1">{errorMessage}</p>
        )}

        <div className="flex justify-end gap-3 mt-4">
          <Button
            variant="outline"
            onClick={() => {
              setSelectedStatus(currentStatus);
              onClose();
            }}
            label={t("order_card.status_modal.cancel")}
          />
          <Button
            label={loading ? t("order_card.status_modal.updating") : t("order_card.status_modal.confirm_update")}
            type="button"
            onClick={handleStatusUpdate}
            variant="outline"
          />
        </div>
      </div>
    </div>
  );
}