'use client';

import { CreditCardIcon } from '@heroicons/react/24/outline';
import { formatCurrency } from '@/lib/utils';
import type { DoorCharge } from './PaymentButtons';

// The POS step of the door screen.
//
// Unlike cash, the money is not in staff's hand when they pick POS: they first
// key the amount into the physical card terminal, wait for approval, and only
// then confirm here. So POS is two taps: pick POS (this panel opens with the
// amount to type), then "Mark as paid", which records it through the same
// door-checkin call as every other tender.
//
// Nothing talks to the terminal today. If an automatic amount push is added
// later, it starts when this panel opens and its approval replaces (or pre-fills)
// the manual confirmation below; the rest of the door flow stays unchanged.

export function PosChargePanel({
  charge,
  unitPrice,
  currency,
  disabled,
  onConfirm,
  onBack,
}: {
  charge: DoorCharge;
  unitPrice: number;
  currency: string;
  disabled?: boolean;
  onConfirm: () => void;
  onBack: () => void;
}) {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between px-1">
        <p className="text-sm font-semibold text-white flex items-center gap-1.5">
          <CreditCardIcon className="w-5 h-5" />
          POS — charge on the terminal
        </p>
        <button onClick={onBack} className="text-sm text-gray-400 min-h-[48px] px-2 active:text-white">
          Back
        </button>
      </div>

      <div className="rounded-2xl bg-gray-900 border border-violet-500/40 px-4 py-3 text-center">
        <p className="text-[11px] uppercase tracking-wide text-gray-400">Amount to charge</p>
        <p className="text-3xl font-bold text-white tabular-nums">{formatCurrency(charge.amount, currency)}</p>
        {charge.override ? (
          <p className="text-xs text-amber-400 mt-0.5">Custom amount</p>
        ) : charge.quantity > 1 ? (
          <p className="text-xs text-gray-400 mt-0.5">
            {charge.quantity} × {formatCurrency(unitPrice, currency)}
          </p>
        ) : null}
      </div>

      <button
        disabled={disabled}
        onClick={onConfirm}
        className="w-full min-h-[56px] rounded-2xl bg-violet-600 active:bg-violet-700 text-white text-lg font-bold disabled:opacity-50 active:scale-[0.98] transition-transform"
      >
        Mark as paid
      </button>
      <p className="text-xs text-gray-500 text-center px-2">
        Only tap once the terminal has approved the card.
      </p>
    </div>
  );
}