'use client';

import { X, ArrowDownCircle, ArrowUpCircle, Trash2 } from 'lucide-react';
import Scanner from '@/components/Scanner';
import NewItemDialog from '@/components/NewItemDialog';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

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 px-1 space-y-3 md:space-y-4">
      {/* Mode Switcher */}
      <div className="flex p-1.5 bg-surface shadow-inner 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.5  text-xs sm:text-sm font-normal transition-all flex items-center justify-center gap-3",
              mode === m.id ? "bg-surface-container text-primary shadow-lg ring-1 ring-primary/20" : "text-secondary hover:text-foreground"
            )}
          >
            <m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} />
            <span className="truncate">{m.label}</span>
          </button>
        ))}
      </div>

      {/* Scanner Section */}
      <section className="glass-card p-6">
        {showScanner ? (
          <div className="space-y-2 md:space-y-3">
            <div className="flex justify-between items-center">
              <h2 className="text-lg font-normal">scanning...</h2>
              <button
                onClick={() => onShowScanner(false)}
                className="p-2.5 bg-surface border border-outline/30 text-secondary hover:text-error transition-all active:scale-95"
              >
                <X size={18} />
              </button>
            </div>
            <Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
          </div>
        ) : (
          <NewItemDialog
            onScannerClick={() => onShowScanner(true)}
            onAddItemClick={onAddItemClick}
          />
        )}
      </section>
    </div>
  );
}