"use client";
import { useTranslations } from "next-intl";
import Button from "../Button";
import { useState } from "react";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { uploadEvidence } from "@/lib/actions/orderActions";
import { toast } from "react-toastify";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useRouter } from "next/navigation";
import { upsertSellerOrders } from "@/app/store/slices/orders/sellerOrderSlice";

interface EvidenceModalProps {
  isOpen: boolean;
  onClose: () => void;
  orderId: string;
}

export default function EvidenceModal({
  isOpen,
  onClose,
  orderId,
}: EvidenceModalProps) {
  const t = useTranslations();
  if (!isOpen) return null;

  const { user } = useAppSelector((state) => state?.auth);
  const order = useAppSelector((state) => state.sellerOrders.byId[orderId]);

  const dispatch = useAppDispatch();
  const router = useRouter();
  const [message, setMessage] = useState<string>("");
  const [evidenceFile, setEvidenceFile] = useState<File | null>(null);
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);

  const handleUploadEvidence = async () => {
    if (!evidenceFile) {
      setErrorMessage(t("evidence_modal.validation.file_required"));
      return;
    }
    if (!message.trim()) {
      setErrorMessage(t("evidence_modal.validation.message_required"));
      return;
    }

    setErrorMessage("");
    setLoading(true);
    try {
      const formData = new FormData();
      formData.append("evidence", evidenceFile);
      formData.append("message", message);
      const response = await uploadEvidence(user?.token, {
        orderId,
        payload: formData,
      });

      if (!response?.success) {
        setErrorMessage(t("evidence_modal.validation.upload_failed"));
        return;
      }

      toast.success(t("evidence_modal.success.upload_success"));
      dispatch(
        upsertSellerOrders([
          {
            ...order,
            evidenceInfo: {
              status: "pending",
              statusHistory: null,
            },
          },
        ]),
      );

      onClose();
    } catch (error) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      setErrorMessage(t("evidence_modal.validation.upload_error"));
    } finally {
      setLoading(false);
    }
  };

  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("evidence_modal.upload_order_evidence")}
            </h2>

            <p className="text-xs text-yellow-500">
              {t("evidence_modal.evidence_reviewed")}
            </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("evidence_modal.upload_instruction")}
        </p>

        <div className="my-4">
          <label className="block text-sm font-medium mb-2 text-neutrals800 dark:text-neutrals400">
            {t("evidence_modal.upload_evidence")}{" "}
            <span className="text-red-500">*</span>
          </label>

          <div className="relative">
            <input
              id="logo-upload"
              type="file"
              accept="image/*"
              onChange={(e) => {
                const file = e.target.files?.[0];
                if (file) {
                  setEvidenceFile(file);
                }
              }}
              className="sr-only"
            />

            <label
              htmlFor="logo-upload"
              className="flex flex-col items-center justify-center w-full h-36 cursor-pointer rounded-xl border-2 border-dashed
                 border-neutrals200 bg-neutrals50 transition
                 hover:bg-neutrals100
                 dark:bg-background dark:border-darkborder dark:hover:bg-darkborder"
            >
              {!evidenceFile ? (
                <>
                  <svg
                    className="w-8 h-8 mb-2 text-neutrals400"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M12 16v-8m0 0l-3 3m3-3l3 3M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1"
                    />
                  </svg>

                  <p className="text-sm text-neutrals600 dark:text-neutrals400">
                    {t("evidence_modal.click_to_upload")}
                  </p>
                  <p className="text-xs text-neutrals400 mt-1">
                    {t("evidence_modal.file_formats")}
                  </p>
                </>
              ) : (
                <>
                  <p className="text-sm font-medium text-neutrals800 dark:text-neutrals200">
                    {t("evidence_modal.selected_file")}
                  </p>
                  <p className="mt-1 text-xs text-neutrals500 truncate max-w-[90%]">
                    {evidenceFile.name}
                  </p>
                  <p className="mt-2 text-xs text-primary500 dark:text-primary400">
                    {t("evidence_modal.click_to_change")}
                  </p>
                </>
              )}
            </label>
          </div>
        </div>

        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder={t("order_card.status_modal.placeholder")}
          className={`w-full border rounded-lg p-2 dark:bg-darkbg 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={() => {
              onClose();
            }}
            label={t("order_card.status_modal.cancel")}
          />
          <Button
            label={
              loading
                ? t("evidence_modal.uploading")
                : t("evidence_modal.upload_evidence_button")
            }
            type="button"
            onClick={handleUploadEvidence}
            variant="outline"
          />
        </div>
      </div>
    </div>
  );
}