WFDASHDRIVER-APP/components/CollectModal.tsx

'use client';

import { useState } from 'react';
import { OrderItem } from '@/lib/types';
import { cn, formatCurrency } from '@/lib/utils';
import { getItemDisplayDescription, getItemDisplayQty } from '@/lib/pocketbase';
import { X, Minus, Plus, Check } from 'lucide-react';

interface CollectModalProps {
  item: OrderItem | null;
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (item: OrderItem, receivedQty: number, notes: string) => void;
}

export default function CollectModal({
  item,
  isOpen,
  onClose,
  onConfirm,
}: CollectModalProps) {
  const [receivedQty, setReceivedQty] = useState('');
  const [notes, setNotes] = useState('');
  const [error, setError] = useState('');

  if (!isOpen || !item) return null;

  const expectedQty = getItemDisplayQty(item);
  const parsedQty = parseFloat(receivedQty) || 0;
  const isPartial = parsedQty > 0 && parsedQty < expectedQty;
  const isOverQty = parsedQty > expectedQty;
  const displayDescription = getItemDisplayDescription(item);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    const qty = parseFloat(receivedQty);
    if (isNaN(qty) || qty <= 0) {
      setError('Please enter a valid quantity');
      return;
    }

    onConfirm(item, qty, notes);
    setReceivedQty('');
    setNotes('');
    setError('');
  };

  const adjustQty = (delta: number) => {
    const current = parseFloat(receivedQty) || 0;
    const newQty = Math.max(0, current + delta);
    setReceivedQty(newQty.toString());
    setError('');
  };

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
      <div className="absolute inset-0 bg-black/50 modal-overlay" onClick={onClose} />
      <div className="relative bg-[#e6e5e0] bottom-sheet w-full max-w-md flex flex-col max-h-[calc(100dvh-1rem)] sm:max-h-[85vh] border border-[rgba(38,37,30,0.1)] animate-slide-up">
        <form
          onSubmit={handleSubmit}
          className="flex flex-col min-h-0 flex-1"
        >
          {/* Drag indicator */}
          <div className="sm:hidden flex justify-center pt-2 pb-1">
            <div className="w-10 h-1 bg-[rgba(38,37,30,0.2)] rounded-full" />
          </div>

          {/* Header */}
          <div className="flex items-center justify-between px-6 pt-2 pb-5">
            <div className="flex items-center gap-2.5">
              <div className="w-8 h-8 bg-[#e6f1ec] rounded-xl flex items-center justify-center">
                <Check size={18} className="text-[#18714f]" />
              </div>
              <h2 className="text-lg font-bold text-[#26251e]">Collect Item</h2>
            </div>
            <button
              type="button"
              onClick={onClose}
              aria-label="Close"
              className="p-2 rounded-xl hover:bg-[rgba(38,37,30,0.06)] active:bg-[rgba(38,37,30,0.12)] transition-colors"
            >
              <X size={18} className="text-[rgba(38,37,30,0.55)]" />
            </button>
          </div>

          {/* Scrollable body — overflow lives on a child so the form
              can still submit via Enter / native submit semantics. */}
          <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-6 pb-6 space-y-5">
            {/* Item info */}
            <div className="p-4 bg-[#ebeae5] rounded-xl">
              <p className="text-sm font-semibold text-[#26251e] truncate">{displayDescription}</p>
              {item.sku && (
                <p className="text-[10px] text-[rgba(38,37,30,0.5)] font-mono mt-0.5">#{item.sku}</p>
              )}
              <div className="flex items-center gap-3 mt-1.5 text-xs text-[rgba(38,37,30,0.55)]">
                <span className="font-medium text-[#26251e]">
                  {item.expand?.supplier?.suppliername || 'Unknown'}
                </span>
                <span>Expected: {expectedQty} units</span>
              </div>
              {item.selling_price && (
                <p className="text-xs text-[#18714f] font-medium mt-1">
                  Unit price: {formatCurrency(item.selling_price)}
                </p>
              )}
            </div>

            {/* Quantity */}
            <div>
              <label htmlFor="received-qty" className="block text-sm font-semibold text-[#26251e] mb-2">
                Received Quantity *
              </label>
              <div className="flex items-center gap-3 flex-wrap">
                <button
                  type="button"
                  onClick={() => adjustQty(-1)}
                  aria-label="Decrease quantity"
                  className="w-12 h-12 flex items-center justify-center rounded-xl bg-[#ebeae5] active:bg-[#e1e0db] transition-colors touch-manipulation press-feedback-sm"
                >
                  <Minus size={18} className="text-[#26251e]" />
                </button>
                <input
                  id="received-qty"
                  type="number"
                  step="0.01"
                  inputMode="decimal"
                  value={receivedQty}
                  onChange={(e) => { setReceivedQty(e.target.value); setError(''); }}
                  className="w-20 text-center text-2xl font-bold py-3 border-2 border-[rgba(38,37,30,0.1)] rounded-xl focus:ring-2 focus:ring-[#f54e00]/30 focus:border-[#f54e00] transition-all bg-[#f2f1ed] text-[#26251e]"
                  placeholder="0"
                  autoFocus
                />
                <button
                  type="button"
                  onClick={() => adjustQty(1)}
                  aria-label="Increase quantity"
                  className="w-12 h-12 flex items-center justify-center rounded-xl bg-[#ebeae5] active:bg-[#e1e0db] transition-colors touch-manipulation press-feedback-sm"
                >
                  <Plus size={18} className="text-[#26251e]" />
                </button>
                {expectedQty > 0 && (
                  <button
                    type="button"
                    onClick={() => { setReceivedQty(expectedQty.toString()); setError(''); }}
                    className="px-3 py-2 text-xs font-medium text-[#125a3e] bg-[#e6f1ec] rounded-lg active:bg-[#c2dfd0] transition-colors touch-manipulation"
                  >
                    Full ({expectedQty})
                  </button>
                )}
              </div>
              {isPartial && (
                <p className="text-xs text-[#8a5a02] mt-2 font-medium">
                  Partial collection: {parsedQty} of {expectedQty} units
                </p>
              )}
              {isOverQty && (
                <p className="text-xs text-[#26251e] mt-2 font-medium">
                  Over collection: {parsedQty} exceeds expected {expectedQty}
                </p>
              )}
              {error && <p className="text-xs text-[#b3224a] mt-2">{error}</p>}
            </div>

            {/* Notes */}
            <div>
              <label htmlFor="collect-notes" className="block text-sm font-semibold text-[#26251e] mb-2">
                Notes (optional)
              </label>
              <textarea
                id="collect-notes"
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                className="w-full p-3 text-sm bg-[#f2f1ed] border border-[rgba(38,37,30,0.1)] rounded-xl text-[#26251e] placeholder:text-[rgba(38,37,30,0.4)] focus:ring-2 focus:ring-[#f54e00]/30 focus:border-[#f54e00] focus:bg-[#f7f7f4] transition-all resize-none selectable"
                rows={2}
                placeholder="Add any notes about this collection..."
              />
            </div>
          </div>

          {/* Pinned footer — sits above BottomNav (z-50). pb accounts for
              the 4rem nav height + safe-area inset + visual gap so the
              button never hides under the tab bar. */}
          <div
            className="px-6 pt-3 pb-[calc(4rem+env(safe-area-inset-bottom,0px)+0.75rem)] border-t border-[rgba(38,37,30,0.08)] bg-[#e6e5e0] flex-shrink-0"
            style={{ boxShadow: '0 -8px 24px rgba(0,0,0,0.06)' }}
          >
            <button
              type="submit"
              className={cn(
                'w-full py-4 px-4 rounded-xl text-white font-semibold text-[15px]',
                'bg-[#1f8a65] active:bg-[#125a3e] transition-all',
                'touch-manipulation press-feedback min-h-[56px]',
                (!parsedQty || parsedQty < 0) && 'opacity-50'
              )}
              style={{ boxShadow: '0 4px 12px rgba(31,138,101,0.3)' }}
            >
              Confirm Collection
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}