"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { useSession } from "next-auth/react"
import { Loading } from "@/components/ui/loading"
import { KPICard } from "@/components/ui/kpi-card"
import { Button } from "@/components/ui/button"
import { useGetProfileQuery } from "@/api/rtk/auth-api"
import { REPORTS_RANGE } from "@/features/reports/constants"
import { useReportDataQuery } from "@/features/reports/hooks/use-report-data-query"
import { useLeaderboardQuery } from "@/features/leaderboard/hooks/use-leaderboard-query"
import {
  getFirstAccessiblePath,
  hasPermission,
  type PermissionSource,
} from "@/lib/permissions"

const TeamPerformanceGrid = React.lazy(() => import("./team-performance-grid").then(m => ({ default: m.TeamPerformanceGrid })))
const TransactionTrendChart = React.lazy(() => import("./transaction-trend-chart").then(m => ({ default: m.TransactionTrendChart })))
const ServiceSalesByMonthChartCard = React.lazy(() =>
    import("./service-sales-by-month-chart").then((m) => ({
        default: m.ServiceSalesByMonthChartCard,
    })),
)
const WinLossChart = React.lazy(() => import("./win-loss-chart").then(m => ({ default: m.WinLossChart })))
const StageConversionChart = React.lazy(() => import("./stage-conversion-chart").then(m => ({ default: m.StageConversionChart })))
const ReportsLeaderboardPanel = React.lazy(() =>
    import("./reports-leaderboard-panel").then((m) => ({ default: m.ReportsLeaderboardPanel })),
)
const RepPerformanceTable = React.lazy(() => import("./rep-performance-table").then(m => ({ default: m.RepPerformanceTable })))
const DealSizeDistChart = React.lazy(() => import("./deal-size-dist-chart").then(m => ({ default: m.DealSizeDistChart })))
const MonthlyActivityChart = React.lazy(() => import("./monthly-activity-chart").then(m => ({ default: m.MonthlyActivityChart })))
const TopCustomersTransactionsPanel = React.lazy(() =>
    import("./top-customers-transactions-panel").then((m) => ({ default: m.TopCustomersTransactionsPanel })),
)

function isForbiddenError(error: Error | null | undefined): boolean {
    if (!error) return false
    const msg = error.message.toLowerCase()
    return msg.includes("forbidden") || msg.includes("permission")
}

export default function ReportsPage() {
    const router = useRouter()
    const { data: session } = useSession()
    const backendUser = (session as { backendUser?: PermissionSource } | null)?.backendUser
    const { data: profile } = useGetProfileQuery()
    const permissionSource: PermissionSource = backendUser ?? profile ?? null

    const allowed = React.useMemo(
        () => hasPermission(permissionSource, "READ", "REPORT"),
        [permissionSource],
    )

    React.useEffect(() => {
        if (!permissionSource) return
        if (!allowed) {
            router.replace(getFirstAccessiblePath(permissionSource))
        }
    }, [permissionSource, allowed, router])

    const {
        data,
        isLoading,
        isFetching,
        isError,
        error,
        refetch,
    } = useReportDataQuery(
        { range: REPORTS_RANGE, teamFilter: "all" },
        { enabled: allowed },
    )

    const {
        data: leaderboard,
        isLoading: leaderboardLoading,
        isError: leaderboardLoadError,
    } = useLeaderboardQuery({ enabled: allowed })

    if (!permissionSource || !allowed) {
        return (
            <Loading variant="api" layout="page" message="Checking access..." />
        )
    }

    const loading = (isLoading || isFetching) && !data

    if (loading) {
        return (
            <Loading variant="api" layout="page" message="Loading reports..." />
        )
    }

    if (isError || !data) {
        const isForbidden = isForbiddenError(error)

        return (
            <div className="flex flex-col items-center justify-center min-h-[400px] gap-4 w-full">
                <p className="text-sm font-semibold text-rose-500 font-['Lexend']">
                    {isForbidden
                        ? "You do not have permission to view reports."
                        : "Failed to load reports. Please try again."}
                </p>
                {!isForbidden ? (
                    <Button size="sm" onClick={() => void refetch()}>
                        Reload
                    </Button>
                ) : null}
            </div>
        )
    }

    return (
        <div className="flex flex-col h-full gap-5 p-1 sm:p-2 md:p-4 animate-in fade-in duration-500 overflow-hidden">
            <div className="flex flex-col gap-1 border-b border-white/40 pb-6">
                <h1 className="text-[21px] font-extrabold text-text font-['Lexend'] tracking-tight">Reports & Analytics</h1>
                <p className="text-[12px] text-gray-600 font-medium font-['Lexend_Deca']">All time</p>
            </div>

            <div className="flex-1 min-h-0 overflow-y-auto pr-1 pb-6 scrollbar-themed">
                <div className="flex flex-col gap-6">
                    <div className="grid grid-cols-4 gap-3.5">
                        {data.kpis.map((kpi, i) => (
                            <KPICard
                                key={i}
                                label={kpi.label}
                                value={kpi.value}
                                change={kpi.change}
                                isUp={kpi.isUp}
                                subtext={kpi.subtext}
                            />
                        ))}
                    </div>

                    <React.Suspense fallback={<Loading variant="api" layout="section" message="Loading analytics dashboard..." />}>
                        <div className="flex flex-col gap-6">
                            <TeamPerformanceGrid teams={data.teams} />

                            <div className="grid grid-cols-1 xl:grid-cols-[1.6fr_1fr] gap-4">
                                <TransactionTrendChart data={data.transactionTrend ?? []} />
                                <WinLossChart winLoss={data.winLoss} />
                            </div>

                            <ServiceSalesByMonthChartCard
                                data={data.serviceSalesByMonth}
                                exportQuery={{
                                    range: REPORTS_RANGE,
                                    teamFilter: "all",
                                }}
                            />

                            <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
                                <StageConversionChart data={data.stageConversion} />
                                <ReportsLeaderboardPanel
                                    entries={leaderboard}
                                    isLoading={leaderboardLoading && !leaderboardLoadError}
                                />
                            </div>

                            <RepPerformanceTable data={data.repPerformance} />

                            <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 pb-2">
                                <DealSizeDistChart data={data.dealSizeDist} />
                                <MonthlyActivityChart data={data.monthlyActivity} />
                                <TopCustomersTransactionsPanel data={data.topCustomersByTransactions} />
                            </div>
                        </div>
                    </React.Suspense>
                </div>
            </div>
        </div>
    )
}