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-2 md: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">
          필드 내의 첫 번째 태그를 자동으로 감지하여 읽기 또는 쓰기 작업을 수행합니다.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">

        {/* Read/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-blue-50 text-blue-600 rounded-full">
            <HardDriveDownload className="w-8 h-8" />
          </div>

          {/* 1. Read Button */}
          <div className="w-full mb-6">
            {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>

          {/* 2. Read Result Display */}
          <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>

          {/* 3. Write Input */}
          <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"
          />

          {/* 4. Write Button */}
          <div className="w-full">
            {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>

        {/* Info / Config Card */}
        <div className="flex flex-col justify-center space-y-6">
          <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
            <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
              <Zap className="w-5 h-5 text-indigo-500" />
              Test Configuration
            </h3>
            <div className="space-y-4">
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-500 text-sm">Target Bank</span>
                <span className="font-bold text-slate-700">EPC (01)</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-500 text-sm">Start Address</span>
                <span className="font-bold text-slate-700">2 (User Data)</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-500 text-sm">Data Length</span>
                <span className="font-bold text-slate-700">{config.length} Words</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-500 text-sm">Format</span>
                <span className="font-bold text-slate-700">{config.format.toUpperCase()}</span>
              </div>
            </div>
          </div>

          <div className="bg-indigo-50 p-6 rounded-2xl border border-indigo-100 text-sm text-indigo-800">
            <h4 className="font-bold mb-2 flex items-center gap-2">
              <AlertCircle className="w-4 h-4" />
              Note
            </h4>
            <p>
              설정(길이, 포맷)을 변경하려면 <strong>Settings</strong> 탭으로 이동하세요.
            </p>
          </div>
        </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>
  );
};