import React, { useState, useEffect } from 'react';
import { db } from '../services/db';
import { Post, User } from '../types';
import PostCard from '../components/PostCard';
import UploadModal from '../components/UploadModal';
import { Plus, LayoutGrid, List } from 'lucide-react';
import { APP_NAME } from '../constants';

const Home: React.FC = () => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [isUploadOpen, setIsUploadOpen] = useState(false);
  const currentUser = db.getAuthSession() as User;
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  useEffect(() => {
    // Real-time feed simulation from localStorage
    setPosts(db.getPosts());
  }, [refreshTrigger]);

  const handleUpdate = () => {
    setRefreshTrigger(prev => prev + 1);
  };

  return (
    <div className="max-w-2xl mx-auto px-4 pt-24 pb-20">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h2 className="text-2xl font-black tracking-tight text-white uppercase italic">
            {APP_NAME} <span className="text-neutral-600">Feed</span>
          </h2>
          <p className="text-xs text-neutral-500 font-bold uppercase tracking-widest mt-1">
            Private Doc Network
          </p>
        </div>
        <button 
          onClick={() => setIsUploadOpen(true)}
          className="bg-white text-black font-black p-3 rounded-full hover:scale-105 transition-transform shadow-xl shadow-white/5"
        >
          <Plus size={24} />
        </button>
      </div>

      <div className="space-y-6">
        {posts.length > 0 ? (
          posts.map(post => (
            <PostCard 
              key={post.id} 
              post={post} 
              currentUser={currentUser} 
              onUpdate={handleUpdate}
            />
          ))
        ) : (
          <div className="glass rounded-3xl p-12 text-center border-dashed border-neutral-800">
            <div className="w-16 h-16 bg-neutral-900 rounded-2xl flex items-center justify-center mx-auto mb-6 text-neutral-700">
              <List size={32} />
            </div>
            <h3 className="text-xl font-bold mb-2">Network is Quiet</h3>
            <p className="text-neutral-500 max-w-xs mx-auto text-sm leading-relaxed">
              No documents shared yet. Be the first to publish confidential files to the collective.
            </p>
            <button 
              onClick={() => setIsUploadOpen(true)}
              className="mt-6 text-white font-bold text-sm underline underline-offset-4"
            >
              Start Uploading
            </button>
          </div>
        )}
      </div>

      {isUploadOpen && (
        <UploadModal 
          currentUser={currentUser} 
          onClose={() => setIsUploadOpen(false)}
          onSuccess={handleUpdate}
        />
      )}
    </div>
  );
};

export default Home;