import * as React from 'react';
import AdminLayout from './layout';
import {
    dashboardApi,
    type DashboardResponse,
} from '@/features/admin/dashboard/services/api';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { DateRangePicker } from '@/components/ui/date-range-picker';
import { LineChart } from '@/components/ui/chart';
import { AnalyticsReport } from '@/features/admin/dashboard/components/AnalyticsReport';
import { Spinner } from '@/components/ui/spinner';
import { toast } from '@/components/ui/sonner';
import { cn } from '@/lib/utils';

function isoDaysAgo(days: number) {
    const d = new Date();
    d.setDate(d.getDate() - days);
    return d.toISOString().slice(0, 10);
}

const METRICS = [
    { key: 'scans', label: 'Scans', color: '#c4383e' },
    { key: 'otp_sent', label: 'OTP sent', color: '#d97706' },
    { key: 'otp_verified', label: 'OTP verified', color: '#16a34a' },
    { key: 'quizzes_started', label: 'Quizzes started', color: '#2563eb' },
    { key: 'quizzes_completed', label: 'Quizzes completed', color: '#7c3aed' },
    { key: 'offers_unlocked', label: 'Offers unlocked', color: '#525252' },
] as { key: keyof DashboardResponse['totals']; label: string; color: string }[];

export default function AdminDashboard() {
    const [range, setRange] = React.useState({
        from: isoDaysAgo(13),
        to: isoDaysAgo(0),
    });
    const [data, setData] = React.useState<DashboardResponse | null>(null);
    const [loading, setLoading] = React.useState(true);
    const [isFirstLoad, setIsFirstLoad] = React.useState(true);

    React.useEffect(() => {
        let cancelled = false;
        setLoading(true);
        dashboardApi
            .get(range)
            .then((res) => !cancelled && setData(res))
            .catch(() => toast.error('Failed to load dashboard analytics.'))
            .finally(() => {
                if (!cancelled) {
                    setLoading(false);
                    setIsFirstLoad(false);
                }
            });
        return () => {
            cancelled = true;
        };
    }, [range.from, range.to]);

    return (
        <AdminLayout title="Dashboard">
            <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
                <p className="text-sm text-(--color-ink-muted)">
                    Quiz & Win activity overview
                </p>
                <DateRangePicker
                    from={range.from}
                    to={range.to}
                    onChange={setRange}
                />
            </div>

            {isFirstLoad && loading ? (
                <div className="flex justify-center py-24">
                    <Spinner className="h-6 w-6 text-(--color-accent)" />
                </div>
            ) : data ? (
                <div className="space-y-6">
                    <div
                        className={cn(
                            'grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6',
                            loading && 'opacity-60',
                        )}
                    >
                        {METRICS.map((m) => (
                            <Card
                                key={m.key}
                                interactive
                                className="group relative overflow-hidden"
                            >
                                <div
                                    className="absolute inset-0 opacity-5 transition-opacity duration-300 group-hover:opacity-10"
                                    style={{ backgroundColor: m.color }}
                                />
                                <CardContent className="relative p-4">
                                    <div className="mb-2 flex items-center gap-2">
                                        <div
                                            className="h-2 w-2 rounded-full"
                                            style={{ backgroundColor: m.color }}
                                        />
                                        <p className="text-xs font-medium tracking-wide text-(--color-ink-faint) uppercase">
                                            {m.label}
                                        </p>
                                    </div>
                                    <p className="text-2xl font-semibold text-(--color-ink)">
                                        {data.totals[m.key].toLocaleString()}
                                    </p>
                                </CardContent>
                            </Card>
                        ))}
                        {loading && (
                            <div className="absolute inset-0 flex items-center justify-center">
                                <Spinner className="h-4 w-4 text-(--color-accent)" />
                            </div>
                        )}
                    </div>

                    <Card>
                        <CardHeader>
                            <CardTitle>Daily trend</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <LineChart
                                labels={data.series.map((s) => s.date)}
                                series={METRICS.map((m) => ({
                                    label: m.label,
                                    color: m.color,
                                    values: data.series.map((s) => s[m.key]),
                                }))}
                            />
                        </CardContent>
                    </Card>

                    <AnalyticsReport from={range.from} to={range.to} />
                </div>
            ) : (
                <p className="text-sm text-(--color-ink-faint)">
                    No data available.
                </p>
            )}
        </AdminLayout>
    );
}