import { ArrowRight, ArrowUpRight, Target } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { GRADE_LABELS, GRADE_STYLES, isGrowthGrade } from '@/lib/growth-grade';
import { cn } from '@/lib/utils';
import type { GradeProjection } from '@/types/growth-score';

type ProjectionPoint = GradeProjection & {
    label: string;
};

function Step({
    point,
    emphasize = false,
}: {
    point: ProjectionPoint;
    emphasize?: boolean;
}) {
    const validGrade = isGrowthGrade(point.grade) ? point.grade : null;

    return (
        <div className="min-w-0 flex-1 text-center">
            <p className="text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
                {point.label}
            </p>
            <p
                className={cn(
                    'mt-1 text-2xl font-bold tracking-tight',
                    emphasize
                        ? 'text-foreground'
                        : 'text-emerald-600 dark:text-emerald-400',
                )}
            >
                {point.score > 0
                    ? new Intl.NumberFormat('en-US', {
                          maximumFractionDigits: 1,
                      }).format(point.score)
                    : '—'}
            </p>
            <p className="truncate text-xs text-muted-foreground">
                {validGrade
                    ? `${validGrade} · ${GRADE_LABELS[validGrade]}`
                    : 'Awaiting advice'}
            </p>
        </div>
    );
}

export function GrowthProjection({
    current,
    months3,
    months6,
    months12,
}: {
    current: ProjectionPoint;
    months3?: GradeProjection;
    months6?: GradeProjection;
    months12?: GradeProjection;
}) {
    const points: ProjectionPoint[] = [
        { ...current, label: 'Current Score' },
        months3
            ? { ...months3, label: '3 Months' }
            : { grade: '', score: 0, label: '3 Months' },
        months6
            ? { ...months6, label: '6 Months' }
            : { grade: '', score: 0, label: '6 Months' },
        months12
            ? { ...months12, label: '12 Months' }
            : { grade: '', score: 0, label: '12 Months' },
    ];
    const target = months12 ?? months6 ?? months3;
    const targetGrade = isGrowthGrade(target?.grade) ? target.grade : null;

    return (
        <Card className="overflow-hidden border-primary/20 bg-gradient-to-r from-primary/5 via-card to-card">
            <CardContent className="flex flex-col gap-4 p-5 md:flex-row md:items-center md:p-6">
                <div className="flex min-w-0 items-center gap-2">
                    <Target className="size-5 shrink-0 text-primary" />
                    <p className="text-sm font-semibold">Growth Projection</p>
                </div>

                <div className="flex min-w-0 flex-1 flex-col gap-3 md:flex-row md:items-center">
                    {points.map((point, index) => (
                        <div
                            key={point.label}
                            className="flex min-w-0 flex-1 items-center gap-2"
                        >
                            <Step point={point} emphasize={index === 0} />
                            {index < points.length - 1 && (
                                <ArrowRight className="hidden size-4 shrink-0 text-muted-foreground md:block" />
                            )}
                        </div>
                    ))}
                </div>

                <div
                    className={cn(
                        'flex shrink-0 items-center gap-2 rounded-xl border px-4 py-3',
                        targetGrade
                            ? GRADE_STYLES[targetGrade]
                            : 'border-border bg-muted text-muted-foreground',
                    )}
                >
                    <ArrowUpRight className="size-4" />
                    <div>
                        <p className="text-[11px] font-semibold tracking-wide uppercase">
                            Target Grade
                        </p>
                        <p className="text-sm font-bold">
                            {targetGrade
                                ? `${targetGrade} Achievable`
                                : 'Generate advice'}
                        </p>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}