"use client";
import Sidebar from "@/components/Sidebar";
import { Plus } from "lucide-react";
import AddSite from "@/components/dialogues/AddSite";
import Sites from "@/components/cards/Sites";
import Pagination from "@/components/Pagination";
import useSite from "@/hooks/useSites";
import SearchAndLayout from "@/components/SearchAndLayout";
import Loading from "@/components/Loading";

interface SitesPageProps {
    username: string;
    name: string;
}

export default function SitesPage({ username, name }: SitesPageProps) {
    const {
        sites,
        currentPage,
        itemPerPage,
        total,
        search,
        setSearch,
        handlePageChange,
        setItemPerPage,
        loadSites,
        loading
    } = useSite();
    return (
        <Sidebar 
            username={username} 
            fullName={name} 
            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Sites']}
        >
            <main>
                <div className="flex gap-4 items-center">
                    <div className="flex-1">
                        <h1 className="text-2xl font-bold">Sites</h1>
                        <p className="text-sm opacity-70">
                            Manage your sites. Sites are real-world locations where you can 
                            monitor your assets & add networks.
                        </p>
                    </div>
                    <button 
                        className="btn btn-primary" 
                        onClick={() => document.getElementById('add_site')?.showModal()}
                    >
                        <Plus className="w-5 h-5" />
                        Add Site
                    </button>
                </div>
                
                <AddSite onSiteAdded={loadSites} />
                <SearchAndLayout 
                    search={search}
                    setSearch={setSearch}
                    itemPerPage={itemPerPage}
                    setItemPerPage={setItemPerPage}
                />


                {loading ? (
                    <div className="flex justify-center items-center h-48 mt-4">
                        <Loading />
                    </div>
                ) : (
                    <>
                        {sites.length > 0 ? (
                            <div className={
                                itemPerPage === 5 
                                    ? "flex flex-col gap-4 pt-4" 
                                    : "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4"
                            }>
                                {sites.map((site: any) => (
                                    <Sites 
                                        key={site.id} 
                                        id={site.id} 
                                        name={site.name} 
                                        description={site.description} 
                                        networks={site.networks} 
                                    />
                                ))}
                            </div>
                        ) : (
                            <div className="flex justify-center items-center h-48 bg-base-200 rounded-lg mt-4">
                                <div className="text-center">
                                    <h3 className="text-lg font-bold">No Sites Found</h3>
                                    <p className="text-sm opacity-70">No sites match your current search criteria</p>
                                </div>
                            </div>
                        )}
                    
                        <Pagination 
                            currentPage={currentPage} 
                            totalItems={total} 
                            itemsPerPage={itemPerPage} 
                            onPageChange={handlePageChange}
                        />
                    </>
                )}
            </main>
        </Sidebar>
    )
}