import React, {useState} from 'react';
import {Card, CardContent, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Tabs, TabsList} from '@tryghost/shade/components';
import {GhAreaChart, KpiDropdownButton, KpiTabTrigger, KpiTabValue} from '@tryghost/shade/patterns';
import {KPI_METRICS} from '@/posts/analytics/Web/components/kpi-metrics';
import {type KpiDataItem, getWebKpiValues} from '@/posts/analytics/utils/kpi-helpers';
import {getEffectiveChartRange, sanitizeChartData} from '@/shared/analytics/chart-helpers';
import {useSearchParams} from '@tryghost/admin-x-framework';

interface KpisProps {
    data: KpiDataItem[] | null | undefined;
    range: number;
}

const Kpis:React.FC<KpisProps> = ({data, range}) => {
    const [searchParams] = useSearchParams();
    const initialTab = searchParams.get('tab') || 'visits';
    const [currentTab, setCurrentTab] = useState(initialTab);

    const currentMetric = KPI_METRICS[currentTab];

    const chartData = sanitizeChartData<KpiDataItem>(data as KpiDataItem[] || [], range, currentMetric.dataKey as keyof KpiDataItem, 'sum')?.map((item: KpiDataItem) => {
        const value = Number(item[currentMetric.dataKey]);
        return {
            date: String(item.date),
            value,
            formattedValue: currentMetric.formatter(value),
            label: currentMetric.label
        };
    });

    const kpiValues = getWebKpiValues(data);

    const chartRange = getEffectiveChartRange(range, data || [], {fieldName: currentMetric.dataKey as keyof KpiDataItem});

    return (
        <Card>
            <CardContent>
                <Tabs defaultValue={currentTab} variant='kpis'>
                    <TabsList className="-mx-6 hidden grid-cols-2 md:visible! md:grid!">
                        <KpiTabTrigger value="visits" onClick={() => {
                            setCurrentTab('visits');
                        }}>
                            <KpiTabValue color={KPI_METRICS.visits.color} label="Unique visitors" value={kpiValues.visits} />
                        </KpiTabTrigger>
                        <KpiTabTrigger value="views" onClick={() => {
                            setCurrentTab('views');
                        }}>
                            <KpiTabValue color={KPI_METRICS.views.color} label="Total views" value={kpiValues.views} />
                        </KpiTabTrigger>
                    </TabsList>
                    <DropdownMenu>
                        <DropdownMenuTrigger className='md:hidden' asChild>
                            <KpiDropdownButton>
                                {currentTab === 'visits' &&
                                    <KpiTabValue color='var(--chart-blue)' label="Unique visitors" value={kpiValues.visits} />
                                }
                                {currentTab === 'views' &&
                                    <KpiTabValue color='var(--chart-teal)' label="Total views" value={kpiValues.views} />
                                }
                            </KpiDropdownButton>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align='end' className="w-56">
                            <DropdownMenuItem onClick={() => setCurrentTab('visits')}>Unique visitors</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => setCurrentTab('views')}>Total views</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                    <div className='my-4 [&_.recharts-cartesian-axis-tick-value]:fill-gray-500'>
                        <GhAreaChart
                            className={'-mb-3 aspect-auto h-[16vw] max-h-[320px] min-h-[180px] w-full'}
                            color={currentMetric.color}
                            data={chartData}
                            id={currentMetric.dataKey}
                            range={chartRange}
                            showHours={true}
                            syncId="overview-charts"
                        />
                    </div>
                </Tabs>
            </CardContent>
        </Card>
    );
};

export default Kpis;
