import { useEffect, useState } from 'react'
import { LibraryHeader } from '../features/library/LibraryHeader'
import { UploadArea } from '../features/library/UploadArea'
import { DocumentGrid } from '../features/library/DocumentGrid'
import { useLibrary } from '../features/library/useLibrary'

export function HomePage() {
  const [currentTab, setCurrentTab] = useState<'library' | 'trash'>('library')
  const { fetchDocuments, fetchTrash } = useLibrary()

  // Initial fetch
  useEffect(() => {
    if (currentTab === 'library') {
      fetchDocuments()
    } else {
      fetchTrash()
    }
  }, [currentTab, fetchDocuments, fetchTrash])

  return (
    <div className="min-h-screen transition-colors">
      <LibraryHeader currentTab={currentTab} onTabChange={setCurrentTab} />
      
      <main className="max-w-7xl mx-auto px-6 py-8">
        {currentTab === 'library' ? (
          <UploadArea>
            {/* Hero Section */}
            <div className="relative overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-accent-600 to-indigo-900 text-white mb-8 shadow-2xl shadow-accent-900/20">
              {/* Decorative background shapes */}
              <div className="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-white/10 blur-3xl rounded-full mix-blend-overlay"></div>
              <div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-accent-400/20 blur-3xl rounded-full mix-blend-overlay"></div>
              
              <div className="relative px-8 py-10 sm:px-12 sm:py-14 flex flex-col md:flex-row items-center justify-between gap-8">
                <div className="max-w-xl">
                  <h2 className="text-3xl sm:text-4xl font-heading font-bold tracking-tight mb-3">
                    What will you edit today?
                  </h2>
                  <p className="text-base sm:text-lg text-accent-100 font-medium mb-6 leading-relaxed">
                    Upload any PDF to instantly annotate, sign, and modify it. Drop your files right here to get started.
                  </p>
                  <label className="cursor-pointer inline-flex items-center justify-center px-6 py-3 text-base font-bold rounded-full text-accent-900 bg-white hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-white/30 transition-all shadow-xl hover:-translate-y-1 active:translate-y-0">
                    <svg className="w-5 h-5 mr-2 text-accent-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                    </svg>
                    <span>Browse Files</span>
                    <input 
                      type="file" 
                      accept="application/pdf"
                      multiple
                      className="hidden"
                      onChange={(e) => {
                        const uploader = document.querySelector('input[type="file"][multiple]') as HTMLInputElement
                        if (uploader && uploader !== e.target) {
                          uploader.files = e.target.files
                          const event = new Event('change', { bubbles: true })
                          uploader.dispatchEvent(event)
                        }
                      }}
                    />
                  </label>
                </div>
                
                {/* Visual Graphic */}
                <div className="hidden md:block w-72 h-72 relative">
                  <div className="absolute inset-0 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 transform rotate-6 shadow-2xl"></div>
                  <div className="absolute inset-0 bg-white/20 backdrop-blur-md rounded-2xl border border-white/30 transform -rotate-3 shadow-2xl flex items-center justify-center">
                     <svg className="w-24 h-24 text-white/80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                  </div>
                </div>
              </div>
            </div>

            <div className="mb-6 flex items-center justify-between">
              <h3 className="text-2xl font-heading font-bold text-gray-900 dark:text-white">Recent Documents</h3>
            </div>
            
            <DocumentGrid isTrash={false} />
          </UploadArea>
        ) : (
          <DocumentGrid isTrash={true} />
        )}
      </main>
    </div>
  )
}