"use client"

import {
    LineChart,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    ResponsiveContainer,
    Area,
    AreaChart,
} from "recharts"
import { Card } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import type { RevenueOverTimePoint } from "@/api/rtk/dashboard-api"
import { useDashboardRevenueQuery } from "@/features/dashboard/hooks/use-dashboard-section-queries"
import { isDashboardSectionLoading } from "@/features/dashboard/hooks/dashboard-query-status"

const defaultData: RevenueOverTimePoint[] = [
    { name: "Nov", revenue: 0, target: 0 },
    { name: "Dec", revenue: 0, target: 0 },
    { name: "Jan", revenue: 0, target: 0 },
    { name: "Feb", revenue: 0, target: 0 },
    { name: "Mar", revenue: 0, target: 0 },
    { name: "Apr", revenue: 0, target: 0 },
]

export function RevenueChartCard({
    data: apiDataProp,
    isLoading: isLoadingProp,
}: {
    data?: RevenueOverTimePoint[];
    isLoading?: boolean;
} = {}) {
    const { data: apiDataQuery, isPending, isFetching } = useDashboardRevenueQuery({
        enabled: apiDataProp === undefined,
    })
    const apiData = apiDataProp ?? apiDataQuery
    const loading =
        isLoadingProp ??
        isDashboardSectionLoading(isPending, isFetching, apiData)

    if (loading) {
        return (
            <Card className="gap-0 p-5 h-full overflow-hidden">
                <div className="flex justify-between items-start mb-6">
                    <div className="flex flex-col gap-2">
                        <Skeleton className="h-4 w-32 rounded bg-border/70" />
                        <Skeleton className="h-3 w-44 rounded bg-border/50" />
                    </div>
                    <div className="flex gap-4">
                        <Skeleton className="h-3 w-14 rounded bg-border/50" />
                        <Skeleton className="h-3 w-14 rounded bg-border/50" />
                    </div>
                </div>
                <Skeleton className="flex-1 w-full min-h-[180px] sm:min-h-[220px] rounded-lg bg-border/30" />
            </Card>
        )
    }

    const data = apiData?.length ? apiData : defaultData

    return (
        <Card className="gap-0 p-5 h-full overflow-hidden">
            <div className="flex justify-between items-start mb-6">
                <div className="flex flex-col">
                    <h3 className="text-[13px] font-bold text-text font-['Lexend']">Revenue Over Time</h3>
                    <p className="text-[11px] text-gray-700 font-normal mt-0.5">vs. target ($M) · All time</p>
                </div>
                <div className="flex gap-4 items-center">
                    <div className="flex items-center gap-1.5 text-[11px] text-gray-700">
                        <div className="w-[10px] h-[3px] bg-accent rounded-full" />
                        <span>Actual</span>
                    </div>
                    <div className="flex items-center gap-1.5 text-[11px] text-gray-700">
                        <div className="w-[10px] h-0 border-t border-dashed border-border" />
                        <span>Target</span>
                    </div>
                </div>
            </div>

            <div className="flex-1 w-full min-h-[180px] sm:min-h-[220px]">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
                        <defs>
                            <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor="#6C63FF" stopOpacity={0.08} />
                                <stop offset="95%" stopColor="#6C63FF" stopOpacity={0} />
                            </linearGradient>
                        </defs>
                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#F3F4F6" />
                        <XAxis
                            dataKey="name"
                            axisLine={false}
                            tickLine={false}
                            tick={{ fill: '#6B7280', fontSize: 11 }}
                            dy={10}
                        />
                        <YAxis
                            axisLine={false}
                            tickLine={false}
                            tick={{ fill: '#6B7280', fontSize: 11 }}
                        />
                        <Tooltip
                            contentStyle={{
                                backgroundColor: '#0F1117',
                                border: '1px solid #2A2D3A',
                                borderRadius: '8px',
                                color: '#fff',
                                fontSize: '12px',
                                padding: '10px'
                            }}
                            itemStyle={{ color: '#A99EFF' }}
                            formatter={(value: number) => [`$${value}M`, '']}
                        />
                        <Area
                            type="monotone"
                            dataKey="revenue"
                            stroke="#6C63FF"
                            strokeWidth={2.5}
                            fillOpacity={1}
                            fill="url(#colorRevenue)"
                        />
                        <Line
                            type="monotone"
                            dataKey="target"
                            stroke="#D1D5DB"
                            strokeWidth={1.5}
                            strokeDasharray="5 5"
                            dot={false}
                        />
                    </AreaChart>
                </ResponsiveContainer>
            </div>
        </Card>
    )
}