import React from 'react';
import { Upload, FileSpreadsheet } from 'lucide-react';
import { AppState } from '../types';

interface UploadReloadProps {
  appState: AppState;
  onUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export function UploadReload({ appState, onUpload }: UploadReloadProps) {
  return (
    <div className="max-w-2xl mx-auto mt-12">
      <div className="bg-slate-800 rounded-xl border border-slate-700 p-8 shadow-xl">
        <h2 className="text-2xl font-semibold text-white mb-6 flex items-center gap-3">
          <Upload className="w-6 h-6 text-blue-500" />
          Upload Excel File
        </h2>
        
        <div className="border-2 border-dashed border-slate-600 rounded-lg p-12 text-center hover:bg-slate-700/30 transition-colors">
          <input 
            type="file" 
            id="file-upload" 
            accept=".xlsx, .xls" 
            className="hidden" 
            onChange={onUpload} 
          />
          <label htmlFor="file-upload" className="cursor-pointer flex flex-col items-center">
            <FileSpreadsheet className="w-16 h-16 text-slate-400 mb-4" />
            <span className="text-lg font-medium text-blue-400 hover:text-blue-300">Click to browse</span>
            <span className="text-sm text-slate-500 mt-2">or drag and drop your .xlsx file here</span>
          </label>
        </div>

        {appState.fileName && (
          <div className="mt-8 bg-slate-900 rounded-lg p-6 border border-slate-700">
            <h3 className="text-sm font-medium text-slate-400 uppercase tracking-wider mb-4">Current File in Memory</h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-slate-500">File Name</p>
                <p className="font-medium text-white truncate">{appState.fileName}</p>
              </div>
              <div>
                <p className="text-sm text-slate-500">Total Rows</p>
                <p className="font-medium text-white">{appState.data.length}</p>
              </div>
              <div className="col-span-2">
                <p className="text-sm text-slate-500">Loaded At</p>
                <p className="font-medium text-white">{appState.fileDate?.toLocaleString()}</p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}