import { ClientGrowthPanel } from '@admin/components/dashboard/client-growth-panel';
import { ClientsWorldMap } from '@admin/components/dashboard/clients-world-map';
import { CountryBreakdown } from '@admin/components/dashboard/country-breakdown';
import { ContentActivityChart } from '@admin/components/dashboard/content-activity-chart';
import { ContentMixChart } from '@admin/components/dashboard/content-mix-chart';
import { DashboardPanel } from '@admin/components/dashboard/dashboard-panel';
import { DashboardTablePanel } from '@admin/components/dashboard/dashboard-table-panel';
import { PublishStatusChart } from '@admin/components/dashboard/publish-status-chart';
import { StatCard } from '@admin/components/dashboard/stat-card';
import DashboardLayout from '@admin/layouts/dashboard-layout';
import type { DashboardPageProps } from '@admin/types/dashboard';
import { Head } from '@inertiajs/react';
import type { ReactElement } from 'react';

function Dashboard({
    greeting,
    summary,
    publishStatus,
    monthlyActivity,
    contentMix,
    clientsByCountry,
    clientGrowth,
    recentMessages,
    recentUpdates,
}: DashboardPageProps) {
    const mappedCountries = clientsByCountry.rows.filter((row) => row.iso !== null).length;

    return (
        <>
            <Head title="Dashboard">
                <link rel="stylesheet" href="/admin/assets/libs/apexcharts/apexcharts.css" />
                <link rel="stylesheet" href="/admin/assets/libs/jsvectormap/css/jsvectormap.min.css" />
            </Head>

            <div className="grid grid-cols-12 items-stretch gap-5">
                {summary.map((card) => (
                    <StatCard key={card.key} card={card} />
                ))}

                <div className="col-span-12">
                    <ClientGrowthPanel growth={clientGrowth} />
                </div>

                <div className="col-span-12 xl:col-span-8">
                    <DashboardPanel
                        title="Clients across Africa"
                        description={`${clientsByCountry.total} clients in ${clientsByCountry.rows.length} countries${mappedCountries > 0 ? ` · ${mappedCountries} on map` : ''}`}
                        actionHref={route('admin.clients')}
                        actionLabel="Manage clients"
                    >
                        <ClientsWorldMap clientsByCountry={clientsByCountry} />
                    </DashboardPanel>
                </div>

                <div className="col-span-12 xl:col-span-4">
                    <DashboardPanel
                        title="Countries breakdown"
                        description={`${clientsByCountry.total} clients · share of total and new clients per month`}
                        bodyClassName="p-0 overflow-hidden"
                    >
                        <CountryBreakdown clientsByCountry={clientsByCountry} />
                    </DashboardPanel>
                </div>

                <div className="col-span-12 xl:col-span-8">
                    <DashboardPanel
                        title="Site activity (last 12 months)"
                        description="New CMS records vs inbound contact messages"
                    >
                        <ContentActivityChart activity={monthlyActivity} />
                    </DashboardPanel>
                </div>

                <div className="col-span-12 xl:col-span-4">
                    <DashboardPanel
                        title="Publish status"
                        description="Active vs inactive across main content types"
                    >
                        <PublishStatusChart status={publishStatus} />
                    </DashboardPanel>
                </div>

                <div className="col-span-12">
                    <DashboardPanel title="Content inventory" description="Records per module">
                        <ContentMixChart items={contentMix} />
                    </DashboardPanel>
                </div>

                <div className="col-span-12 lg:col-span-6">
                    <DashboardTablePanel
                        title="Recent contact messages"
                        actionHref={route('admin.contact-messages')}
                        actionLabel="View all"
                    >
                        <table className="ti-custom-table ti-custom-table-head mb-0 w-full">
                            <thead>
                                <tr>
                                    <th scope="col" className="!text-start w-[35%]">
                                        From
                                    </th>
                                    <th scope="col" className="!text-start w-[35%]">
                                        Subject
                                    </th>
                                    <th scope="col" className="!text-start w-[15%]">
                                        Status
                                    </th>
                                    <th scope="col" className="!text-start w-[15%]">
                                        Date
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {recentMessages.length === 0 ? (
                                    <tr>
                                        <td colSpan={4} className="text-center text-gray-500 dark:text-white/70 py-8">
                                            No messages yet.
                                        </td>
                                    </tr>
                                ) : (
                                    recentMessages.map((message) => (
                                        <tr key={message.id}>
                                            <td>
                                                <span className="block font-medium">{message.name}</span>
                                                <span className="text-xs text-gray-500">{message.email}</span>
                                            </td>
                                            <td className="max-w-0 truncate">{message.subject}</td>
                                            <td>
                                                <span
                                                    className={`badge ${message.is_read ? 'bg-secondary/10 text-secondary' : 'bg-warning/10 text-warning'}`}
                                                >
                                                    {message.is_read ? 'Read' : 'Unread'}
                                                </span>
                                            </td>
                                            <td className="text-xs whitespace-nowrap">{message.created_at}</td>
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </DashboardTablePanel>
                </div>

                <div className="col-span-12 lg:col-span-6">
                    <DashboardTablePanel
                        title="Latest updates"
                        actionHref={route('admin.updates')}
                        actionLabel="Manage updates"
                    >
                        <table className="ti-custom-table ti-custom-table-head mb-0 w-full">
                            <thead>
                                <tr>
                                    <th scope="col" className="!text-start w-[55%]">
                                        Title
                                    </th>
                                    <th scope="col" className="!text-start w-[25%]">
                                        Status
                                    </th>
                                    <th scope="col" className="!text-start w-[20%]">
                                        Created
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {recentUpdates.length === 0 ? (
                                    <tr>
                                        <td colSpan={3} className="text-center text-gray-500 dark:text-white/70 py-8">
                                            No updates published yet.
                                        </td>
                                    </tr>
                                ) : (
                                    recentUpdates.map((update) => (
                                        <tr key={update.id}>
                                            <td className="max-w-0 truncate font-medium">{update.title}</td>
                                            <td>
                                                <span
                                                    className={`badge ${update.status ? 'bg-success/10 text-success' : 'bg-secondary/10 text-secondary'}`}
                                                >
                                                    {update.status ? 'Published' : 'Draft'}
                                                </span>
                                            </td>
                                            <td className="text-xs whitespace-nowrap">{update.created_at}</td>
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </DashboardTablePanel>
                </div>
            </div>
        </>
    );
}

Dashboard.layout = (page: ReactElement<DashboardPageProps>) => (
    <DashboardLayout
        title="Dashboard"
        subtitle="Home"
        description={`Welcome back, ${page.props.greeting.name} · CMS overview`}
    >
        {page}
    </DashboardLayout>
);

export default Dashboard;
