"use client";

import React, { useCallback, useEffect, useState } from "react";
import { MdReportProblem } from "react-icons/md";
import toast from "react-hot-toast";
import { discrepanciesService } from "@/services/api";
import { Discrepancy } from "@/types/discrepancy";
import { useAuth } from "@/contexts/AuthContext";
import DiscrepancyCard from "./DiscrepancyCard";
import TextInputModal from "@/components/ui/TextInputModal";

interface PurchaseOrderDiscrepanciesPanelProps {
  purchaseOrderId: number;
  /** Path builder for shipment link (admin or supplier). */
  shipmentLinkPath: (shipmentId: number) => string;
}

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

  const [discrepancies, setDiscrepancies] = useState<Discrepancy[]>([]);
  const [loading, setLoading] = useState(true);
  const [expanded, setExpanded] = useState(false);
  const [resolveTarget, setResolveTarget] = useState<Discrepancy | null>(null);
  const [reopenTarget, setReopenTarget] = useState<Discrepancy | null>(null);

  const fetch = useCallback(async () => {
    try {
      setLoading(true);
      const response =
        await discrepanciesService.listByPurchaseOrder(purchaseOrderId);
      setDiscrepancies(response.data || []);
    } catch (err) {
      console.error("Failed to load PO discrepancies", err);
      setDiscrepancies([]);
    } finally {
      setLoading(false);
    }
  }, [purchaseOrderId]);

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

  const handleResolve = async (note: string) => {
    if (!resolveTarget) return;
    try {
      await discrepanciesService.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 discrepanciesService.reopen(reopenTarget.id, note);
      toast.success("Discrepancy reopened.");
      setReopenTarget(null);
      fetch();
    } catch (err: any) {
      toast.error(err.response?.data?.message || "Failed to reopen.");
    }
  };

  if (loading || discrepancies.length === 0) {
    return null;
  }

  const activeCount = discrepancies.filter((d) => !d.isResolved).length;
  const totalCount = discrepancies.length;
  const hasActive = activeCount > 0;

  // Group discrepancies by shipment for the expanded view
  const groupedByShipment = discrepancies.reduce<
    Record<string, { shipmentId: number; shipmentNumber: string | null; items: Discrepancy[] }>
  >((acc, d) => {
    const key = String(d.shipmentId);
    if (!acc[key]) {
      acc[key] = {
        shipmentId: d.shipmentId,
        shipmentNumber: d.shipmentNumber,
        items: [],
      };
    }
    acc[key].items.push(d);
    return acc;
  }, {});
  const shipmentGroups = Object.values(groupedByShipment);

  return (
    <>
      {/* Banner */}
      <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 discrepanc${
                      activeCount === 1 ? "y" : "ies"
                    } on this purchase order`
                  : "All discrepancies resolved"}
              </div>
              <div className="text-xs text-gray-600">
                {totalCount} total · {hasActive
                  ? "missing or damaged pallets need follow-up"
                  : "audit trail preserved"}
              </div>
            </div>
          </div>
          <div className="text-sm text-gray-600">
            {expanded ? "Hide" : "View"} details
          </div>
        </button>
      </div>

      {expanded && (
        <div className="space-y-6">
          {shipmentGroups.map((group) => (
            <div key={group.shipmentId} className="space-y-3">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-semibold text-gray-700">
                  Shipment {group.shipmentNumber || `#${group.shipmentId}`}
                </h3>
                <span className="text-xs text-gray-500">
                  {group.items.length} discrepanc
                  {group.items.length === 1 ? "y" : "ies"}
                </span>
              </div>
              {group.items.map((d) => (
                <DiscrepancyCard
                  key={d.id}
                  discrepancy={d}
                  canResolve={canResolve}
                  onResolve={setResolveTarget}
                  onReopen={setReopenTarget}
                  shipmentLinkPath={shipmentLinkPath}
                />
              ))}
            </div>
          ))}
        </div>
      )}

      {resolveTarget && (
        <TextInputModal
          isOpen={true}
          onClose={() => setResolveTarget(null)}
          onConfirm={handleResolve}
          title="Mark Discrepancy Resolved"
          description={`Pallet #${resolveTarget.palletNumber} on ${
            resolveTarget.shipmentNumber || "this shipment"
          }. 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={`Pallet #${reopenTarget.palletNumber} on ${
            reopenTarget.shipmentNumber || "this shipment"
          }. Add a note explaining why.`}
          placeholder="e.g. Replacement never arrived"
          confirmText="Reopen"
          cancelText="Cancel"
          required={true}
          multiline={true}
        />
      )}
    </>
  );
};

export default PurchaseOrderDiscrepanciesPanel;