'use client';

import { X, ArrowDownCircle, ArrowUpCircle, Trash2 } from 'lucide-react';
import Scanner from '@/components/Scanner';
import NewItemDialog from '@/components/NewItemDialog';
import { cn } from '@/lib/utils';

interface ScannerSectionProps {
  mode: string;
  onModeChange: (mode: string) => void;
  showScanner: boolean;
  onShowScanner: (show: boolean) => void;
  onScanSuccess: (result: any) => void;
  onOCRMatch: (result: any) => void;
  onAddItemClick: () => void;
}

export default function ScannerSection({
  mode,
  onModeChange,
  showScanner,
  onShowScanner,
  onScanSuccess,
  onOCRMatch,
  onAddItemClick,
}: ScannerSectionProps) {
  return (
    <div className="w-full space-y-4">
      {/* Mode Switcher */}
      <div className="flex p-1 bg-surface-container-lowest border border-border w-full gap-1">
        {[
          { id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
          { id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
          { id: 'TRASH', label: 'Trash', icon: Trash2 }
        ].map((m) => (
          <button
            key={m.id}
            data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined}
            onClick={() => onModeChange(m.id)}
            className={cn(
              "flex-1 py-3 text-xs sm:text-sm font-normal transition-all flex items-center justify-center gap-2",
              mode === m.id ? "bg-surface-bright text-primary border border-primary/30" : "text-secondary hover:bg-surface-container-lowest/40 hover:text-white"
            )}
          >
            <m.icon size={18} />
            <span className="truncate">{m.label}</span>
          </button>
        ))}
      </div>

      {/* Scanner Section */}
      <section className="level-1 p-6 md:p-8">
        {showScanner ? (
          <div className="space-y-4">
            <div className="flex justify-between items-center border-b border-border pb-3">
              <h2 className="text-lg font-normal text-white">Vision Sensor Active</h2>
              <button
                onClick={() => onShowScanner(false)}
                className="p-2 bg-surface-bright border border-border text-secondary hover:text-error transition-colors"
              >
                <X size={20} />
              </button>
            </div>
            <Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
          </div>
        ) : (
          <NewItemDialog
            onScannerClick={() => onShowScanner(true)}
            onAddItemClick={onAddItemClick}
          />
        )}
      </section>
    </div>
  );
}