"use client";

import React, { useState, useCallback, useEffect } from "react";
import type { PackageUnit } from "./PackagingModal";

/* ------------------------------------------------------------------ */
/* Types                                                               */
/* ------------------------------------------------------------------ */

export interface PackageEntry {
  unit: PackageUnit;
  count: number;
  qtyPerUnit: number;
}

interface NumberPadModalProps {
  open: boolean;
  onClose: () => void;
  onConfirm: (qty: number, packages: PackageEntry[]) => void;
  maxQty: number;
  itemName: string;
  initialQty?: number;
  initialPackages?: PackageEntry[];
}

/* ------------------------------------------------------------------ */
/* Packaging options (inline, no separate modal needed)                */
/* ------------------------------------------------------------------ */

const PACKAGE_UNITS: PackageUnit[] = [
  { label: "박스", icon: "\uD83D\uDCE6", value: "box" },
  { label: "포대", icon: "\uD83D\uDECD\uFE0F", value: "bag" },
  { label: "팩",   icon: "\uD83D\uDCCB", value: "pack" },
  { label: "묶음", icon: "\uD83D\uDD17", value: "bundle" },
  { label: "롤",   icon: "\uD83E\uDDFB", value: "roll" },
  { label: "통",   icon: "\uD83E\uDEB3", value: "barrel" },
];

type Step = "packaging" | "pkg-count" | "qty-per-pkg" | "direct-qty" | "confirm";

/* ------------------------------------------------------------------ */
/* Numpad Keys                                                         */
/* ------------------------------------------------------------------ */

const KEYS = [
  { label: "7", action: "7" },
  { label: "8", action: "8" },
  { label: "9", action: "9" },
  { label: "\u2190", action: "backspace" },
  { label: "4", action: "4" },
  { label: "5", action: "5" },
  { label: "6", action: "6" },
  { label: "C", action: "clear" },
  { label: "1", action: "1" },
  { label: "2", action: "2" },
  { label: "3", action: "3" },
  { label: "MAX", action: "max" },
];

/* ------------------------------------------------------------------ */
/* Component                                                           */
/* ------------------------------------------------------------------ */

export function NumberPadModal({
  open,
  onClose,
  onConfirm,
  maxQty,
  itemName,
  initialQty,
  initialPackages,
}: NumberPadModalProps) {
  const [step, setStep] = useState<Step>("packaging");
  const [selectedUnit, setSelectedUnit] = useState<PackageUnit | null>(null);
  const [pkgCount, setPkgCount] = useState("0");
  const [qtyPerPkg, setQtyPerPkg] = useState("0");
  const [directQty, setDirectQty] = useState("0");

  /* Reset on open */
  useEffect(() => {
    if (open) {
      if (initialPackages && initialPackages.length > 0) {
        // Editing existing -- go to confirm
        const p = initialPackages[0];
        setSelectedUnit(p.unit);
        setPkgCount(String(p.count));
        setQtyPerPkg(String(p.qtyPerUnit));
        setDirectQty("0");
        setStep("confirm");
      } else if (initialQty !== undefined && initialQty > 0) {
        setDirectQty(String(initialQty));
        setSelectedUnit(null);
        setStep("confirm");
      } else {
        setStep("packaging");
        setSelectedUnit(null);
        setPkgCount("0");
        setQtyPerPkg("0");
        setDirectQty("0");
      }
    }
  }, [open, initialQty, initialPackages]);

  /* Computed values */
  const pkgCountNum = parseInt(pkgCount, 10) || 0;
  const qtyPerPkgNum = parseInt(qtyPerPkg, 10) || 0;
  const directQtyNum = parseInt(directQty, 10) || 0;
  const totalQty = selectedUnit ? pkgCountNum * qtyPerPkgNum : directQtyNum;
  const isOverMax = totalQty > maxQty;

  /* Generic numpad input handler */
  const handleInput = useCallback(
    (key: string, setter: React.Dispatch<React.SetStateAction<string>>, max?: number) => {
      setter((prev) => {
        switch (key) {
          case "backspace":
            return prev.length <= 1 ? "0" : prev.slice(0, -1);
          case "clear":
            return "0";
          case "max":
            return String(max ?? maxQty);
          default: {
            const next = prev === "0" ? key : prev + key;
            const num = parseInt(next, 10);
            if (isNaN(num)) return prev;
            if (max !== undefined) return String(Math.min(num, max));
            return next;
          }
        }
      });
    },
    [maxQty]
  );

  /* Step handlers */
  const handleSelectPackaging = (unit: PackageUnit) => {
    setSelectedUnit(unit);
    setPkgCount("0");
    setQtyPerPkg("0");
    setStep("pkg-count");
  };

  const handleSkipPackaging = () => {
    setSelectedUnit(null);
    setDirectQty("0");
    setStep("direct-qty");
  };

  const handlePkgCountConfirm = () => {
    if (pkgCountNum <= 0) return;
    setStep("qty-per-pkg");
  };

  const handleQtyPerPkgConfirm = () => {
    if (qtyPerPkgNum <= 0) return;
    setStep("confirm");
  };

  const handleDirectQtyConfirm = () => {
    if (directQtyNum <= 0) return;
    setStep("confirm");
  };

  const handleEdit = () => {
    if (selectedUnit) {
      setStep("packaging");
    } else {
      setStep("direct-qty");
    }
  };

  const handleFinalConfirm = () => {
    if (totalQty <= 0) return;
    const finalQty = Math.min(totalQty, maxQty);
    const packages: PackageEntry[] = selectedUnit
      ? [{ unit: selectedUnit, count: pkgCountNum, qtyPerUnit: qtyPerPkgNum }]
      : [];
    onConfirm(finalQty, packages);
    onClose();
  };

  if (!open) return null;

  /* Render numpad grid */
  const renderNumpad = (
    currentValue: string,
    onKey: (key: string) => void,
    onConfirmStep: () => void,
    confirmLabel: string,
    confirmDisabled: boolean,
  ) => (
    <>
      {/* Display */}
      <input
        type="text"
        readOnly
        value={parseInt(currentValue, 10).toLocaleString()}
        className="w-full px-4 py-3 text-right text-3xl font-bold border-2 border-gray-200 rounded-xl bg-gray-50 text-gray-900 mb-3"
        style={{ fontVariantNumeric: "tabular-nums" }}
      />

      {/* Numpad grid: 4x3 + bottom row */}
      <div className="grid grid-cols-4 gap-2.5">
        {KEYS.map((key) => (
          <button
            key={key.action}
            onClick={() => onKey(key.action)}
            className={`h-14 rounded-xl text-lg font-semibold active:scale-95 transition-all ${
              key.action === "backspace" || key.action === "clear"
                ? "bg-amber-100 text-amber-700 hover:bg-amber-200"
                : key.action === "max"
                ? "bg-blue-100 text-blue-700 hover:bg-blue-200 text-sm"
                : "bg-gray-100 text-gray-900 hover:bg-gray-200"
            }`}
          >
            {key.label}
          </button>
        ))}

        {/* Bottom row: 0 (span 2) + Confirm (span 2) */}
        <button
          onClick={() => onKey("0")}
          className="col-span-2 h-14 rounded-xl text-lg font-semibold bg-gray-100 text-gray-900 hover:bg-gray-200 active:scale-95 transition-all"
        >
          0
        </button>
        <button
          onClick={onConfirmStep}
          disabled={confirmDisabled}
          className={`col-span-2 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all ${
            confirmDisabled ? "opacity-40 cursor-not-allowed" : ""
          }`}
          style={{
            background: confirmDisabled
              ? "#9ca3af"
              : "linear-gradient(135deg, #10b981 0%, #059669 100%)",
          }}
        >
          {confirmLabel}
        </button>
      </div>
    </>
  );

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Overlay */}
      <div className="absolute inset-0 bg-black/40" onClick={onClose} />

      {/* Panel */}
      <div className="relative bg-white w-[90%] max-w-[360px] rounded-2xl shadow-2xl z-10 overflow-hidden">
        {/* Header - blue gradient */}
        <div
          className="flex items-center justify-between px-4 py-3"
          style={{ background: "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)" }}
        >
          <div className="flex items-center gap-2">
            {step !== "packaging" && (
              <button
                onClick={() => {
                  if (step === "pkg-count") setStep("packaging");
                  else if (step === "qty-per-pkg") setStep("pkg-count");
                  else if (step === "direct-qty") setStep("packaging");
                  else if (step === "confirm") {
                    if (selectedUnit) setStep("qty-per-pkg");
                    else setStep("direct-qty");
                  }
                }}
                className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30 active:scale-95 transition-all"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                </svg>
              </button>
            )}
            <span className="text-[13px] text-white/90 bg-white/20 px-3 py-1 rounded-full">
              최대 {maxQty.toLocaleString()} EA
            </span>
          </div>
          {/* Step indicator */}
          <div className="flex items-center gap-1.5">
            {(selectedUnit
              ? ["packaging", "pkg-count", "qty-per-pkg", "confirm"] as Step[]
              : ["packaging", "direct-qty", "confirm"] as Step[]
            ).map((s) => (
              <div
                key={s}
                className={`w-2 h-2 rounded-full transition-all ${
                  s === step ? "bg-white scale-125" : "bg-white/30"
                }`}
              />
            ))}
          </div>
        </div>

        {/* Body */}
        <div className="p-4">
          {/* ====== Step 1: Packaging Selection ====== */}
          {step === "packaging" && (
            <>
              <p className="text-center text-sm font-semibold text-gray-700 mb-4">
                포장 단위를 선택하세요
              </p>
              <div className="grid grid-cols-3 gap-3 mb-3">
                {PACKAGE_UNITS.map((unit) => (
                  <button
                    key={unit.value}
                    onClick={() => handleSelectPackaging(unit)}
                    className="flex flex-col items-center gap-2 py-4 px-3 border-2 border-gray-200 rounded-xl bg-white text-sm font-medium text-gray-700 hover:border-blue-400 hover:bg-blue-50 active:scale-95 transition-all min-h-[80px]"
                  >
                    <span className="text-2xl">{unit.icon}</span>
                    <span>{unit.label}</span>
                  </button>
                ))}
              </div>
              {/* Skip button */}
              <button
                onClick={handleSkipPackaging}
                className="w-full py-3.5 rounded-xl border-2 border-dashed border-gray-300 text-sm font-medium text-gray-500 hover:border-gray-400 hover:bg-gray-50 active:scale-[0.98] transition-all flex items-center justify-center gap-2"
              >
                <span className="text-lg">{"\u23ED\uFE0F"}</span>
                건너뛰기 (포장 없음)
              </button>
            </>
          )}

          {/* ====== Step 2: Package Count ====== */}
          {step === "pkg-count" && selectedUnit && (
            <>
              <p className="text-center text-sm font-semibold text-gray-700 mb-1">
                {selectedUnit.icon} {selectedUnit.label} 몇 개?
              </p>
              <p className="text-center text-xs text-gray-400 mb-3">
                포장 개수를 입력하세요
              </p>
              {renderNumpad(
                pkgCount,
                (key) => handleInput(key, setPkgCount, 9999),
                handlePkgCountConfirm,
                "다음",
                pkgCountNum <= 0,
              )}
            </>
          )}

          {/* ====== Step 3: Qty per Package ====== */}
          {step === "qty-per-pkg" && selectedUnit && (
            <>
              <p className="text-center text-sm font-semibold text-gray-700 mb-1">
                {selectedUnit.icon} {selectedUnit.label} 1개당 수량?
              </p>
              <p className="text-center text-xs text-gray-400 mb-3">
                개당 수량(EA)을 입력하세요
              </p>
              {renderNumpad(
                qtyPerPkg,
                (key) => handleInput(key, setQtyPerPkg),
                handleQtyPerPkgConfirm,
                "다음",
                qtyPerPkgNum <= 0,
              )}
              {/* Live calculation preview */}
              {pkgCountNum > 0 && qtyPerPkgNum > 0 && (
                <div className={`mt-3 text-center text-sm font-semibold px-3 py-2 rounded-lg ${
                  pkgCountNum * qtyPerPkgNum > maxQty
                    ? "bg-red-50 text-red-600 border border-red-200"
                    : "bg-blue-50 text-blue-700 border border-blue-200"
                }`}>
                  {pkgCountNum}{selectedUnit.label} x {qtyPerPkgNum.toLocaleString()}EA = {(pkgCountNum * qtyPerPkgNum).toLocaleString()}EA
                  {pkgCountNum * qtyPerPkgNum > maxQty && (
                    <span className="block text-xs mt-0.5">최대 수량({maxQty.toLocaleString()}EA)을 초과합니다</span>
                  )}
                </div>
              )}
            </>
          )}

          {/* ====== Step: Direct Qty (skip packaging) ====== */}
          {step === "direct-qty" && (
            <>
              <p className="text-center text-sm font-semibold text-gray-700 mb-1">
                입고 수량 입력
              </p>
              <p className="text-center text-xs text-gray-400 mb-3">
                수량(EA)을 직접 입력하세요
              </p>
              {renderNumpad(
                directQty,
                (key) => handleInput(key, setDirectQty, maxQty),
                handleDirectQtyConfirm,
                "다음",
                directQtyNum <= 0,
              )}
            </>
          )}

          {/* ====== Step: Confirm ====== */}
          {step === "confirm" && (
            <>
              <div className="flex flex-col items-center gap-3 py-4">
                <p className="text-sm font-semibold text-gray-500">최종 확인</p>

                {selectedUnit ? (
                  <div className="w-full bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-xl p-4 text-center">
                    <p className="text-3xl mb-2">{selectedUnit.icon}</p>
                    <p className="text-lg font-bold text-gray-900">
                      {pkgCountNum}{selectedUnit.label} x {qtyPerPkgNum.toLocaleString()}EA
                    </p>
                    <p className={`text-2xl font-black mt-1 ${isOverMax ? "text-red-500" : "text-green-600"}`}
                      style={{ fontVariantNumeric: "tabular-nums" }}
                    >
                      = {totalQty.toLocaleString()} EA
                    </p>
                    {isOverMax && (
                      <p className="text-xs text-red-500 mt-1 font-medium">
                        최대 수량({maxQty.toLocaleString()}EA)을 초과합니다. {maxQty.toLocaleString()}EA로 적용됩니다.
                      </p>
                    )}
                  </div>
                ) : (
                  <div className="w-full bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-4 text-center">
                    <p className="text-sm text-gray-500 mb-1">입고 수량</p>
                    <p className="text-3xl font-black text-blue-600"
                      style={{ fontVariantNumeric: "tabular-nums" }}
                    >
                      {directQtyNum.toLocaleString()} EA
                    </p>
                  </div>
                )}

                <p className="text-xs text-gray-400 truncate max-w-full px-2">
                  {itemName}
                </p>
              </div>

              {/* Action buttons */}
              <div className="flex gap-3">
                <button
                  onClick={handleEdit}
                  className="flex-1 h-14 rounded-xl text-base font-semibold bg-gray-100 text-gray-700 hover:bg-gray-200 active:scale-95 transition-all"
                >
                  수정
                </button>
                <button
                  onClick={handleFinalConfirm}
                  className="flex-1 h-14 rounded-xl text-base font-bold text-white active:scale-95 transition-all"
                  style={{
                    background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
                  }}
                >
                  확인
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}