"use client";

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/app/_globalRedux/store";
import { setMakeInactiveIndex } from "@/app/_globalRedux/dashboard/optionsSlice";
import { VehicleData } from "@/app/_globalRedux/services/types/getListVehiclesmobTypes";
import { useSaveInactiveVehicleMutation } from "@/app/_globalRedux/services/saveInactiveVehicle";
import { useMakeActiveVehicleMutation } from "@/app/_globalRedux/services/makeActiveVehicle";
import { useLazyGetVehiclesByStatusQuery } from "@/app/_globalRedux/services/trackingDashboard";
import { Modal, Select, Input, Button, Upload, message } from "antd";
import type { UploadFile, UploadProps } from "antd";

type StoredAccidentalImage = {
  vehicleId: number;
  vehicleNumber: string;
  fileName: string;
  mimeType: string;
  dataUrl: string;
  savedAt: number;
};

const ACCIDENTAL_IMAGE_STORAGE_KEY = "accidental-image-latest-by-vehicle-v1";

interface MakeInactiveVehicleProps {
  vehicleData: VehicleData;
}

export const MakeInactiveVehicle: React.FC<MakeInactiveVehicleProps> = ({
  vehicleData,
}) => {
  const dispatch = useDispatch();
  const { makeInactiveIndex } = useSelector(
    (state: RootState) => state.vehicleOverviewOptions,
  );
  const { groupId, userId, parentUser } = useSelector(
    (state: RootState) => state.auth,
  );
  const selectedVehicleListTab = useSelector(
    (state: RootState) => state.selectedVehicleListTab,
  );

  const [selectedReason, setSelectedReason] = useState("");
  const [remarkText, setRemarkText] = useState("");
  const [accidentalImages, setAccidentalImages] = useState<UploadFile[]>([]);

  const vehicleNumberKey =
    vehicleData.vehReg?.trim() || String(vehicleData.vId);

  const readStoredAccidentalImages = (): Record<string, StoredAccidentalImage> => {
    if (typeof window === "undefined") return {};
    try {
      const raw = localStorage.getItem(ACCIDENTAL_IMAGE_STORAGE_KEY);
      return raw ? (JSON.parse(raw) as Record<string, StoredAccidentalImage>) : {};
    } catch {
      return {};
    }
  };

  const writeStoredAccidentalImages = (
    data: Record<string, StoredAccidentalImage>,
  ) => {
    if (typeof window === "undefined") return;
    localStorage.setItem(ACCIDENTAL_IMAGE_STORAGE_KEY, JSON.stringify(data));
  };

  const fileToDataUrl = (file: File) =>
    new Promise<string>((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(String(reader.result || ""));
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });

  const persistLatestAccidentalImage = async (file: UploadFile) => {
    const originalFile = file.originFileObj;
    if (!(originalFile instanceof File)) return;

    const dataUrl = await fileToDataUrl(originalFile);
    const nextEntry: StoredAccidentalImage = {
      vehicleId: vehicleData.vId,
      vehicleNumber: vehicleNumberKey,
      fileName: originalFile.name,
      mimeType: originalFile.type,
      dataUrl,
      savedAt: Date.now(),
    };

    const allStored = readStoredAccidentalImages();
    const previous = allStored[vehicleNumberKey];

    if (!previous || previous.savedAt <= nextEntry.savedAt) {
      allStored[vehicleNumberKey] = nextEntry;
      writeStoredAccidentalImages(allStored);
    }
  };

  const [saveInactiveVehicle, { isLoading: isInactivating }] =
    useSaveInactiveVehicleMutation();
  const [makeActiveVehicle, { isLoading: isActivating }] =
    useMakeActiveVehicleMutation();
  const [triggerRefetchVehicleList] = useLazyGetVehiclesByStatusQuery();

  const isVehicleInactive = vehicleData.gpsDtl.inactiveStatus === 1;

  const reasonOptions = [
    "Without Driver",
    "At Workshop",
    "Accidental",
    "Vehicle on Sale",
    "Other",
  ];

  const handleSubmit = async () => {
    try {
      if (isVehicleInactive) {
        const payload = {
          sys_service_id: vehicleData.vId,
          reason: "",
          Other: 0,
          inputDatetime: "",
          otherReason: "",
        };

        await makeActiveVehicle(payload).unwrap();
        message.success("Vehicle marked as active successfully!");
        triggerRefetchVehicleList({
          userId,
          token: groupId,
          pUserId: parentUser,
          mode:
            selectedVehicleListTab.toUpperCase() === "ALL"
              ? ""
              : selectedVehicleListTab.toUpperCase(),
        });
      } else {
        if (selectedReason === "Accidental" && accidentalImages.length === 0) {
          message.error("Please upload one accidental image.");
          return;
        }

        // Make vehicle inactive - use full form data
        const now = new Date();
        const currentDateTime =
          now.getFullYear() +
          "-" +
          String(now.getMonth() + 1).padStart(2, "0") +
          "-" +
          String(now.getDate()).padStart(2, "0") +
          " " +
          String(now.getHours()).padStart(2, "0") +
          ":" +
          String(now.getMinutes()).padStart(2, "0") +
          ":" +
          String(now.getSeconds()).padStart(2, "0");

        const payload = {
          sys_service_id: vehicleData.vId,
          reason: selectedReason === "Other" ? "" : selectedReason,
          Other: selectedReason === "Other" ? 1 : 0,
          inputDatetime: currentDateTime,
          otherReason: selectedReason === "Other" ? remarkText : remarkText,
        };

        await saveInactiveVehicle(payload).unwrap();

        if (selectedReason === "Accidental" && accidentalImages[0]) {
          await persistLatestAccidentalImage(accidentalImages[0]);
        }

        message.success("Vehicle marked as inactive successfully!");
        triggerRefetchVehicleList({
          userId,
          token: groupId,
          pUserId: parentUser,
          mode:
            selectedVehicleListTab.toUpperCase() === "ALL"
              ? ""
              : selectedVehicleListTab.toUpperCase(),
        });
      }

      handleCancel();
    } catch (error) {
      console.error("Failed to update vehicle status:", error);
      message.error(
        `Failed to ${
          isVehicleInactive ? "activate" : "deactivate"
        } vehicle. Please try again.`,
      );
    }
  };

  const handleCancel = () => {
    dispatch(setMakeInactiveIndex(-1));
    setSelectedReason("");
    setRemarkText("");
    setAccidentalImages([]);
  };

  const uploadProps: UploadProps = {
    accept: "image/*",
    multiple: false,
    maxCount: 1,
    fileList: accidentalImages,
    beforeUpload: () => false,
    onChange: ({ fileList }) => {
      const latest = fileList.slice(-1);
      setAccidentalImages(latest);
    },
  };

  useEffect(() => {
    if (makeInactiveIndex !== vehicleData.vId) return;

    const saved = readStoredAccidentalImages()[vehicleNumberKey];
    if (!saved) {
      setAccidentalImages([]);
      return;
    }

    setAccidentalImages([
      {
        uid: `local-${saved.savedAt}`,
        name: saved.fileName,
        status: "done",
        url: saved.dataUrl,
        type: saved.mimeType,
      },
    ]);
  }, [makeInactiveIndex, vehicleData.vId, vehicleNumberKey]);

  return (
    <Modal
      title={isVehicleInactive ? "Activate Vehicle" : "Reason"}
      open={makeInactiveIndex === vehicleData.vId}
      onCancel={handleCancel}
      width={350}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          Cancel
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={handleSubmit}
          loading={isInactivating || isActivating}
          disabled={
            !isVehicleInactive &&
            (!selectedReason ||
              !remarkText ||
              (selectedReason === "Accidental" &&
                accidentalImages.length === 0))
          }
        >
          {isVehicleInactive ? "Active" : "Submit"}
        </Button>,
      ]}
    >
      {isVehicleInactive ? (
        <div className="py-4">
          <p>Make this vehicle active</p>
        </div>
      ) : (
        <div className="space-y-4">
          <div>
            <Select
              placeholder="Select a reason..."
              value={selectedReason || undefined}
              onChange={setSelectedReason}
              className="w-full"
              size="large"
              allowClear
            >
              {reasonOptions.map((reason) => (
                <Select.Option key={reason} value={reason}>
                  {reason}
                </Select.Option>
              ))}
            </Select>
          </div>

          {selectedReason && (
            <div>
              <Input
                placeholder="Please Enter Remark..."
                value={remarkText}
                onChange={(e) => setRemarkText(e.target.value)}
                size="large"
              />
            </div>
          )}

          {selectedReason === "Accidental" && (
            <div>
              <Upload.Dragger {...uploadProps} className="w-full">
                <p className="ant-upload-text">
                  Click or drag file to this area to upload
                </p>
                <p className="ant-upload-hint">Upload a image (required).</p>
              </Upload.Dragger>
            </div>
          )}
        </div>
      )}
    </Modal>
  );
};