frontend/src/components/InputPanel.tsx

import React from 'react';

interface InputPanelProps {
  csvData: string;
  setCsvData: (data: string) => void;
  onAnalyze: () => void;
  isAnalyzing: boolean;
  hospitalName: string;
  onShuffle: () => void;
}

export const InputPanel: React.FC<InputPanelProps> = ({
  csvData,
  setCsvData,
  onAnalyze,
  isAnalyzing,
  hospitalName,
  onShuffle
}) => {
  return (
    <div className="bg-white/5 p-6 rounded-2xl shadow-2xl border border-white/10 backdrop-blur-xl">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-semibold text-white">Patient Data Input</h2>
        <button onClick={onShuffle} disabled={isAnalyzing} className="text-sm text-cyan-300 hover:text-cyan-200 disabled:opacity-50 transition">New Batch</button>
      </div>
      
      <div className="bg-black/10 p-3 rounded-xl mb-4 border border-white/10">
        <p className="text-sm text-slate-300">
            Now viewing sample data from: <strong className="font-semibold text-white">{hospitalName}</strong>
        </p>
      </div>

      <textarea
        value={csvData}
        onChange={(e) => setCsvData(e.target.value)}
        className="w-full h-80 p-3 border border-white/20 rounded-xl shadow-inner bg-black/20 focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 transition duration-150 ease-in-out font-mono text-xs text-slate-200 placeholder:text-slate-500"
        placeholder="patient_id,age,gender,..."
        disabled={isAnalyzing}
      />
      <button
        onClick={onAnalyze}
        disabled={isAnalyzing || !csvData.trim()}
        className="mt-4 w-full bg-white/10 border border-white/20 text-white font-bold py-3 px-4 rounded-xl hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-cyan-400 disabled:bg-white/5 disabled:text-slate-400 disabled:cursor-not-allowed transition-all duration-200 ease-in-out flex items-center justify-center backdrop-blur-sm"
      >
        {isAnalyzing ? (
          <>
            <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Analyzing...
          </>
        ) : (
          'Analyze Patients'
        )}
      </button>
    </div>
  );
};