import React from 'react';
import { UploadStatus } from './types';
import { FileUploader } from './components/FileUploader';
import { UploadList } from './components/UploadList';
import { Upload, Rocket, Database, ShieldCheck, Zap, LayoutGrid } from 'lucide-react';
import { useFileUpload } from './hooks/useFileUpload';

export default function App() {
  const { 
    files, 
    isUploading, 
    addFiles, 
    removeFile, 
    updateFilePath, 
    startUpload
  } = useFileUpload();

  const hasPendingFiles = files.some(f => f.status === UploadStatus.IDLE || f.status === UploadStatus.ERROR);

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col font-sans">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-20 shadow-sm">
        <div className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-gradient-to-br from-yellow-400 to-orange-500 p-2.5 rounded-xl shadow-md">
                <Rocket className="w-6 h-6 text-white" />
            </div>
            <div>
                <h1 className="text-xl font-bold text-gray-900 leading-tight tracking-tight">Twan Uploader</h1>
                <p className="text-xs text-gray-500 font-medium flex items-center gap-1.5">
                  <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
                  Secure Connection Active
                </p>
            </div>
          </div>
          <div className="flex items-center gap-4">
              <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-gray-600">
                 <a href="#features" className="hover:text-yellow-600 transition-colors">Features</a>
                 <a href="#about" className="hover:text-yellow-600 transition-colors">About</a>
              </nav>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-grow w-full max-w-3xl mx-auto px-6 py-12 space-y-8">
        
        {/* Intro */}
        <section className="text-center mb-10">
          <h2 className="text-3xl font-extrabold text-gray-900 mb-4">
            Upload Databases to Twan Data Center
          </h2>
          <p className="text-gray-600 text-lg leading-relaxed">
            The fastest, most secure way to manage your machine learning Databases. 
            Bulk upload files directly to the <strong>Twan</strong>.
          </p>
        </section>

        {/* Upload Area */}
        <div className="bg-white p-1 rounded-2xl shadow-sm border border-gray-200">
            <div className="p-8">
                <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-6">
                    <Upload className="w-5 h-5 text-blue-500" />
                    Select Dataset Files
                </h3>
                <FileUploader 
                    onFilesAdded={addFiles} 
                    disabled={isUploading} 
                />
            </div>
        </div>

        {/* File Queue */}
        <div id="queue">
            <UploadList 
                files={files} 
                onRemove={removeFile} 
                onPathChange={updateFilePath}
            />
        </div>
        
          {/* Upload Action */}
        {files.length > 0 && (
            <div className="flex justify-end pt-2">
                <button
                    onClick={startUpload}
                    disabled={!hasPendingFiles || isUploading}
                    className={`
                        flex items-center gap-2 px-10 py-4 rounded-xl font-bold shadow-lg transform transition-all text-lg
                        ${!hasPendingFiles || isUploading 
                            ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200' 
                            : 'bg-gradient-to-r from-yellow-400 to-orange-500 text-white hover:shadow-orange-200 hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0'}
                    `}
                >
                    {isUploading ? (
                        <>
                            <Rocket className="w-6 h-6 animate-pulse" />
                            Uploading...
                        </>
                    ) : (
                        <>
                            <Upload className="w-6 h-6" />
                            Start Secure Upload
                        </>
                    )}
                </button>
            </div>
        )}
      </main>

      {/* SEO Footer */}
      <footer className="bg-white border-t border-gray-200 mt-12 py-12">
        <div className="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-12">
          <article id="about" className="space-y-4">
            <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
              <Database className="w-5 h-5 text-yellow-500" />
              About Twan Uploader
            </h3>
            <p className="text-gray-600 text-sm leading-relaxed">
              Twan Uploader is a premier <strong>Twan Data Center Management Tool</strong>. 
              We streamline pushing large Databases to the cloud with enterprise-grade reliability.
            </p>
          </article>
          <article id="features" className="space-y-4">
            <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
              <Zap className="w-5 h-5 text-yellow-500" />
              Features
            </h3>
            <ul className="space-y-3 text-sm text-gray-600">
                <li className="flex gap-2 items-center"><ShieldCheck className="w-4 h-4 text-green-500"/> Secure Proxy Upload Technology</li>
                <li className="flex gap-2 items-center"><LayoutGrid className="w-4 h-4 text-blue-500"/> Bulk File Processing</li>
                <li className="flex gap-2 items-center"><Rocket className="w-4 h-4 text-orange-500"/> Optimized for High Performance</li>
            </ul>
          </article>
        </div>
      </footer>
    </div>
  );
}