"use client";

import React, { useCallback, useEffect, useState } from "react";
import toast from "react-hot-toast";
import { itemDiscrepanciesService } from "@/services/api";
import { ItemDiscrepancy } from "@/types/item-discrepancy";
import { useAuth } from "@/contexts/AuthContext";
import ItemDiscrepancyCard from "./ItemDiscrepancyCard";
import TextInputModal from "@/components/ui/TextInputModal";
import ConfirmationModal from "@/components/ui/ConfirmationModal";

interface Props {
  shipmentId: number;
  purchaseOrderLinkPath: (poId: number) => string;
}

const ShipmentItemDiscrepanciesPanel: React.FC<Props> = ({
  shipmentId,
  purchaseOrderLinkPath,
}) => {
  const { isAdmin } = useAuth();
  const canResolve = isAdmin();

  const [items, setItems] = useState<ItemDiscrepancy[]>([]);
  const [loading, setLoading] = useState(true);
  const [resolveTarget, setResolveTarget] = useState<ItemDiscrepancy | null>(
    null
  );
  const [reopenTarget, setReopenTarget] = useState<ItemDiscrepancy | null>(
    null
  );
  const [clearTarget, setClearTarget] = useState<ItemDiscrepancy | null>(null);

  const fetch = useCallback(async () => {
    try {
      setLoading(true);
      const response = await itemDiscrepanciesService.listByShipment(shipmentId);
      setItems(response.data || []);
    } catch (err) {
      console.error("Failed to load shipment item discrepancies", err);
      setItems([]);
    } finally {
      setLoading(false);
    }
  }, [shipmentId]);

  useEffect(() => {
    fetch();
  }, [fetch]);

  const handleResolve = async (note: string) => {
    if (!resolveTarget) return;
    try {
      await itemDiscrepanciesService.resolve(resolveTarget.id, note);
      toast.success("Discrepancy resolved.");
      setResolveTarget(null);
      fetch();
    } catch (err: any) {
      toast.error(err.response?.data?.message || "Failed to resolve.");
    }
  };

  const handleReopen = async (note: string) => {
    if (!reopenTarget) return;
    try {
      await itemDiscrepanciesService.reopen(reopenTarget.id, note);
      toast.success("Discrepancy reopened.");
      setReopenTarget(null);
      fetch();
    } catch (err: any) {
      toast.error(err.response?.data?.message || "Failed to reopen.");
    }
  };

  const handleClearConfirm = async () => {
    if (!clearTarget) return;
    try {
      await itemDiscrepanciesService.clear(clearTarget.id);
      toast.success("Item marked OK and stock restored.");
      setClearTarget(null);
      fetch();
    } catch (err: any) {
      toast.error(err.response?.data?.message || "Failed to clear.");
    }
  };

  if (loading || items.length === 0) return null;

  const activeCount = items.filter((d) => !d.isResolved).length;

  return (
    <>
      <div className="bg-white rounded-lg shadow">
        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-black">
              Item Discrepancies
            </h2>
            <div className="text-sm text-gray-500">
              {activeCount > 0 ? (
                <span className="text-amber-700 font-medium">
                  {activeCount} active
                </span>
              ) : (
                <span className="text-green-700 font-medium">All resolved</span>
              )}
              <span className="text-gray-400">
                {" · "}
                {items.length} total
              </span>
            </div>
          </div>
          <div className="space-y-4">
            {items.map((d) => (
              <ItemDiscrepancyCard
                key={d.id}
                discrepancy={d}
                canResolve={canResolve}
                onResolve={setResolveTarget}
                onReopen={setReopenTarget}
                onClear={canResolve ? setClearTarget : undefined}
                purchaseOrderLinkPath={purchaseOrderLinkPath}
                hideShipmentLink={true}
              />
            ))}
          </div>
        </div>
      </div>

      {resolveTarget && (
        <TextInputModal
          isOpen={true}
          onClose={() => setResolveTarget(null)}
          onConfirm={handleResolve}
          title="Mark Discrepancy Resolved"
          description={`${resolveTarget.productName} on Pallet #${resolveTarget.palletNumber}. Note how it was handled.`}
          placeholder="e.g. Replacement scheduled in shipment SH-1234"
          confirmText="Mark Resolved"
          cancelText="Cancel"
          required={true}
          multiline={true}
        />
      )}

      {reopenTarget && (
        <TextInputModal
          isOpen={true}
          onClose={() => setReopenTarget(null)}
          onConfirm={handleReopen}
          title="Reopen Discrepancy"
          description={`${reopenTarget.productName} on Pallet #${reopenTarget.palletNumber}.`}
          placeholder="e.g. Replacement never arrived"
          confirmText="Reopen"
          cancelText="Cancel"
          required={true}
          multiline={true}
        />
      )}

      {clearTarget && (
        <ConfirmationModal
          isOpen={true}
          onClose={() => setClearTarget(null)}
          onConfirm={handleClearConfirm}
          title="Mark Item OK"
          description={`Revert ${clearTarget.productName} (barcode ${
            clearTarget.barcode || "—"
          }) back to OK and restore stock by 1?`}
          iconColor="#10B981"
          iconContainerColor="#D1FAE5"
          confirmText="Mark OK"
          cancelText="Cancel"
          autoCloseOnConfirm={false}
        />
      )}
    </>
  );
};

export default ShipmentItemDiscrepanciesPanel;