"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 useSites from "@/hooks/useSites";
import SearchAndLayout from "@/components/SearchAndLayout";

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

export default function SitesPage({ username, name }: SitesPageProps) {
    const {
        sites,
        currentPage,
        itemPerPage,
        total,
        search,
        setSearch,
        handlePageChange,
        setItemPerPage,
        loadSites
    } = useSites();
    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}
                />

                {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>
    )
}