"use client";

import React, { useCallback, useEffect, useState } from "react";
import { MdReportProblem } from "react-icons/md";
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 {
  purchaseOrderId: number;
  shipmentLinkPath: (shipmentId: number) => string;
}

const PurchaseOrderItemDiscrepanciesPanel: React.FC<Props> = ({
  purchaseOrderId,
  shipmentLinkPath,
}) => {
  const { isAdmin } = useAuth();
  const canResolve = isAdmin();

  const [items, setItems] = useState<ItemDiscrepancy[]>([]);
  const [loading, setLoading] = useState(true);
  const [expanded, setExpanded] = useState(false);
  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.listByPurchaseOrder(purchaseOrderId);
      setItems(response.data || []);
    } catch (err) {
      console.error("Failed to load PO item discrepancies", err);
      setItems([]);
    } finally {
      setLoading(false);
    }
  }, [purchaseOrderId]);

  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;
  const totalCount = items.length;
  const hasActive = activeCount > 0;

  return (
    <>
      <div
        className={`rounded-lg shadow-sm border ${
          hasActive
            ? "bg-amber-50 border-amber-200"
            : "bg-green-50 border-green-200"
        }`}
      >
        <button
          type="button"
          onClick={() => setExpanded((e) => !e)}
          className="w-full flex items-center justify-between p-4 text-left"
        >
          <div className="flex items-center gap-3">
            <MdReportProblem
              size={24}
              color={hasActive ? "#B45309" : "#15803D"}
            />
            <div>
              <div
                className={`font-semibold ${
                  hasActive ? "text-amber-900" : "text-green-900"
                }`}
              >
                {hasActive
                  ? `${activeCount} active item discrepanc${
                      activeCount === 1 ? "y" : "ies"
                    } on this purchase order`
                  : "All item discrepancies resolved"}
              </div>
              <div className="text-xs text-gray-600">
                {totalCount} total · individual items reported damaged or missing
              </div>
            </div>
          </div>
          <div className="text-sm text-gray-600">
            {expanded ? "Hide" : "View"} details
          </div>
        </button>
      </div>

      {expanded && (
        <div className="space-y-4">
          {items.map((d) => (
            <ItemDiscrepancyCard
              key={d.id}
              discrepancy={d}
              canResolve={canResolve}
              onResolve={setResolveTarget}
              onReopen={setReopenTarget}
              onClear={canResolve ? setClearTarget : undefined}
              shipmentLinkPath={shipmentLinkPath}
            />
          ))}
        </div>
      )}

      {resolveTarget && (
        <TextInputModal
          isOpen={true}
          onClose={() => setResolveTarget(null)}
          onConfirm={handleResolve}
          title="Mark Discrepancy Resolved"
          description={`${resolveTarget.productName} on Pallet #${resolveTarget.palletNumber}.`}
          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 PurchaseOrderItemDiscrepanciesPanel;