import React from 'react';
import { Zap, HardDriveUpload, HardDriveDownload, Activity, CheckCircle, AlertCircle, XCircle } from 'lucide-react';
import { QuickTestConfig } from '../types';

interface Props {
  onQuickRead: () => void;
  onQuickWrite: (data: string) => void;
  onCancel: () => void;
  writeInput: string;
  onWriteInputChange: (value: string) => void;
  result: string | null;
  isPending: boolean;
  isScanning: boolean;
  config: QuickTestConfig;
}

export const QuickTestPanel: React.FC<Props> = ({
  onQuickRead,
  onQuickWrite,
  onCancel,
  writeInput,
  onWriteInputChange,
  result,
  isPending,
  isScanning,
  config
}) => {
  
  return (
    <div className="h-full flex flex-col items-center justify-center p-6 max-w-4xl mx-auto">
      <div className="text-center mb-10">
        <div className="inline-flex items-center justify-center p-3 bg-indigo-100 rounded-full mb-4">
          <Zap className="w-8 h-8 text-indigo-600" />
        </div>
        <h1 className="text-3xl font-bold text-slate-800 mb-2">Quick Test Mode</h1>
        <p className="text-slate-500">
          Automatically detects the first tag in the field and performs a Read or Write operation.<br/>
          Target: <strong>EPC Bank</strong>, Start Address: <strong>2</strong><br/>
          Length: <strong>{config.length} Words</strong>, Format: <strong>{config.format.toUpperCase()}</strong>
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
        
        {/* Read Card */}
        <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow flex flex-col items-center text-center">
          <div className="mb-6 p-4 bg-blue-50 text-blue-600 rounded-full">
            <HardDriveDownload className="w-8 h-8" />
          </div>
          <h2 className="text-xl font-bold text-slate-800 mb-2">Auto Read</h2>

          <div className="w-full bg-slate-50 border border-slate-200 rounded-xl p-4 mb-6 min-h-[80px] flex items-center justify-center font-mono text-lg text-slate-700 break-all">
             {isPending ? (
                <div className="flex items-center gap-2 text-amber-500 animate-pulse">
                   <Activity className="w-5 h-5" /> Scanning & Reading...
                </div>
             ) : (
                result ? (
                   <span className="text-emerald-600 font-bold">{result}</span>
                ) : (
                   <span className="text-slate-300">No Data Read</span>
                )
             )}
          </div>

          {isPending ? (
             <button
               onClick={onCancel}
               className="w-full py-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold text-lg shadow-lg shadow-red-500/30 transition-all flex items-center justify-center gap-2"
             >
               <XCircle className="w-5 h-5" /> Cancel
             </button>
          ) : (
             <button
               onClick={onQuickRead}
               disabled={isScanning && !isPending}
               className="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-500/30 transition-all flex items-center justify-center gap-2"
             >
               Start Read Test
             </button>
          )}
        </div>

        {/* Write Card */}
        <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow flex flex-col items-center text-center">
          <div className="mb-6 p-4 bg-purple-50 text-purple-600 rounded-full">
            <HardDriveUpload className="w-8 h-8" />
          </div>
          <h2 className="text-xl font-bold text-slate-800 mb-2">Auto Write</h2>

          <input 
            type="text"
            value={writeInput}
            onChange={(e) => onWriteInputChange(e.target.value)}
            placeholder={`${config.format === 'hex' ? 'Hex Data (e.g. A1 B2...)' : 'ASCII String'}`}
            className="w-full bg-slate-50 border border-slate-300 text-center text-lg rounded-xl p-4 mb-6 font-mono focus:ring-2 focus:ring-purple-500 outline-none"
          />

          {isPending ? (
             <button
               onClick={onCancel}
               className="w-full py-4 bg-red-500 hover:bg-red-600 text-white rounded-xl font-bold text-lg shadow-lg shadow-red-500/30 transition-all flex items-center justify-center gap-2"
             >
               <XCircle className="w-5 h-5" /> Cancel
             </button>
          ) : (
             <button
               onClick={() => onQuickWrite(writeInput)}
               disabled={(isScanning && !isPending) || !writeInput}
               className="w-full py-4 bg-slate-800 hover:bg-slate-900 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-xl font-bold text-lg shadow-lg shadow-slate-500/30 transition-all flex items-center justify-center gap-2"
             >
               Start Write Test
             </button>
          )}
        </div>

      </div>

      {isScanning && !isPending && (
         <div className="mt-8 flex items-center gap-2 px-4 py-2 bg-amber-50 text-amber-700 border border-amber-200 rounded-full text-sm animate-pulse">
            <Activity className="w-4 h-4" /> Background scanning is active in Inventory...
         </div>
      )}
    </div>
  );
};