"use client";

import { useState } from "react";
import { useFeedbackModal } from "@/app/components/providers/feedback-modal-provider";
import { useLoadingModal } from "@/app/components/providers/loading-modal-provider";
import { getErrorMessage } from "@/lib/api/types";
import { usePin, useUpdatePin } from "@/lib/query/hooks/pin";
import { MaterialIcon } from "../icons/nav-icons";
import { Button } from "../ui/button";
import { PageEnter, PageTextEnter } from "../ui/page-enter";
import { PinFormModal } from "./pin-form-modal";

export function PinView() {
  const { showLoading, hideLoading } = useLoadingModal();
  const { showSaveSuccess } = useFeedbackModal();
  const pinQuery = usePin();
  const updatePinMutation = useUpdatePin();
  const [mutationError, setMutationError] = useState<string | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const pinInfo = pinQuery.data ?? null;
  const isSubmitting = updatePinMutation.isPending;

  const error =
    mutationError ??
    (pinQuery.error
      ? getErrorMessage(pinQuery.error, "Gagal memuat data PIN.")
      : null);

  async function handleUpdate(pin: string) {
    setMutationError(null);
    showLoading({
      message: "Jangan tutup, proses sedang berlangsung",
      ariaLabel: "Memproses PIN Otoritas",
    });

    try {
      await updatePinMutation.mutateAsync(pin);
      setIsModalOpen(false);
      showSaveSuccess({
        description: "PIN Otoritas yang baru sudah bisa digunakan.",
      });
    } catch (err) {
      setMutationError(getErrorMessage(err, "Gagal memperbarui PIN Otoritas."));
    } finally {
      hideLoading();
    }
  }

  function closePinModal() {
    setIsModalOpen(false);
    setMutationError(null);
  }

  return (
    <PageEnter className="flex flex-col p-5">
      {error && (
        <PageEnter delay={0.1}>
          <p className="text-m-regular mb-4 rounded-lg border border-danger-200 bg-danger-50 px-4 py-3 text-danger-700">
            {error}
          </p>
        </PageEnter>
      )}

      {pinQuery.isPending ? (
        <p className="text-m-regular text-neutral-80">Memuat data...</p>
      ) : (
        <PageEnter
          delay={0.1}
          className="w-full max-w-[300px] overflow-hidden rounded-[10px] border border-neutral-40 bg-neutral-10"
        >
          <div className="relative px-5 pt-[22.5px] pb-1">
            <div className="absolute top-[45px] left-0 h-5 w-1 rounded-r-sm bg-primary-500" />
            <PageTextEnter
              as="h1"
              delay={0.08}
              className="text-l-medium text-neutral-100"
            >
              PIN Otoritas
            </PageTextEnter>
          </div>

          <PageEnter delay={0.15} className="flex flex-col gap-4 px-5 pt-5 pb-5">
            <div className="flex flex-col gap-1">
              <p className="text-[28px] leading-[42px] font-medium text-neutral-100">
                {pinInfo?.pin || "------"}
              </p>
              {pinInfo?.lastUpdatedLabel ? (
                <p className="text-s-regular text-neutral-80">
                  {pinInfo.lastUpdatedLabel}
                </p>
              ) : (
                <p className="text-s-regular text-neutral-80">
                  PIN Otoritas belum diatur.
                </p>
              )}
            </div>

            <PageEnter delay={0.2}>
              <Button
                variant="primary"
                size="md"
                className="w-fit gap-2 px-3"
                onClick={() => setIsModalOpen(true)}
              >
                <MaterialIcon name="security" size={20} />
                Ubah PIN
              </Button>
            </PageEnter>
          </PageEnter>
        </PageEnter>
      )}

      <PinFormModal
        key={isModalOpen ? "open" : "closed"}
        open={isModalOpen}
        pinInfo={pinInfo}
        isSubmitting={isSubmitting}
        onClose={closePinModal}
        onSubmit={handleUpdate}
      />
    </PageEnter>
  );
}