import { useState } from 'react';
import { SiteNavbar } from '../components/SiteNavbar';
import { useResources, Resource } from '../hooks/useApi';
import { CustomCard } from '../components/CustomCard';
import { Button, Link } from '@heroui/react';
import { CreateResourceModal } from '../components/CreateResourceModal';
import { EditResourceModal } from '../components/EditResourceModal';
import { useSession } from '../lib/auth-client';

export default function HomePage() {
  const { resources, isLoading } = useResources();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [selectedResource, setSelectedResource] = useState<Resource | null>(null);
  const { data: session } = useSession();

  return (
    <div className="min-h-screen bg-background text-foreground">
      <SiteNavbar />
      <main className="container mx-auto px-4 py-8">
        <section className="mb-12">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold">传送门 & 资源</h2>
            {session && (
              <Button onPress={() => setIsModalOpen(true)} color="primary" variant="secondary">
                添加资源
              </Button>
            )}
          </div>
          
          <CreateResourceModal isOpen={isModalOpen} onOpenChange={setIsModalOpen} />
          <EditResourceModal 
            isOpen={isEditModalOpen} 
            onOpenChange={setIsEditModalOpen} 
            resource={selectedResource}
          />
          
          {isLoading ? (
            <div>加载中...</div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {resources?.map((res) => (
                <CustomCard key={res.id} variant="glass" className="p-4">
                  <CustomCard.Header>
                    <div className="flex flex-col">
                        <p className="text-md">{res.title}</p>
                        {res.category && <p className="text-small text-default-500">{res.category}</p>}
                    </div>
                  </CustomCard.Header>
                  <CustomCard.Content>
                    <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{res.description}</p>
                  </CustomCard.Content>
                  <CustomCard.Footer className="flex justify-between items-center gap-2">
                     <Button as={Link} href={res.url} target="_blank" size="sm" color="primary">
                       访问
                     </Button>
                     {session && (
                       <Button 
                         size="sm" 
                         variant="ghost" 
                         onPress={() => {
                           setSelectedResource(res);
                           setIsEditModalOpen(true);
                         }}
                       >
                         编辑
                       </Button>
                     )}
                  </CustomCard.Footer>
                </CustomCard>
              ))}
              {!resources?.length && (
                  <div className="col-span-full text-center text-gray-500">
                      暂无资源
                  </div>
              )}
            </div>
          )}
        </section>
      </main>
    </div>
  );
}
