import { InfoButton } from '@/components/grow-better/help-tip';
import { Badge } from '@/components/ui/badge';
import type { GrowBetterAssessment, GrowBetterHelp } from '@/types/grow-better';

const coreKeys = ['revenue', 'profit', 'cash', 'debt'] as const;

const pillarDirection = {
    revenue: 'higher',
    profit: 'higher',
    cash: 'balanced',
    debt: 'lower',
} as const;

export function GrowBetterHero({
    assessment,
    narrative,
    deltaLabel,
    scoreHelp,
}: {
    assessment: GrowBetterAssessment;
    narrative: string;
    deltaLabel: string;
    scoreHelp: GrowBetterHelp;
}) {
    const progress = Math.max(0, Math.min(1, assessment.overall / 1000));
    const circumference = 2 * Math.PI * 100;
    const core = coreKeys.map(
        (key) =>
            assessment.pillars.find((pillar) => pillar.key === key) ?? null,
    );

    return (
        <section className="grid items-center gap-8 md:grid-cols-[220px_1fr] md:gap-12">
            <div className="relative mx-auto size-52">
                <svg
                    viewBox="0 0 220 220"
                    className="size-full -rotate-90"
                    aria-hidden
                >
                    <circle
                        cx="110"
                        cy="110"
                        r="100"
                        fill="none"
                        className="stroke-muted"
                        strokeWidth="6"
                    />
                    <circle
                        cx="110"
                        cy="110"
                        r="100"
                        fill="none"
                        className="stroke-primary transition-[stroke-dashoffset] duration-700"
                        strokeWidth="6"
                        strokeLinecap="round"
                        strokeDasharray={circumference}
                        strokeDashoffset={circumference * (1 - progress)}
                    />
                </svg>
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                    <p className="text-5xl font-light tracking-tight tabular-nums">
                        {assessment.overall}
                    </p>
                    <p className="mt-1 text-[11px] tracking-wide text-muted-foreground">
                        Growth Score
                    </p>
                    <p className="mt-2 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
                        {assessment.delta === null
                            ? 'No prior period'
                            : `${assessment.delta >= 0 ? '↑' : '↓'} ${assessment.delta > 0 ? '+' : ''}${assessment.delta} ${deltaLabel}`}
                    </p>
                </div>
            </div>
            <div>
                <p className="mb-3 flex items-center gap-1.5 text-[11px] font-semibold tracking-widest text-primary uppercase">
                    Monily Growth Score
                    <InfoButton
                        title="Monily Growth Score"
                        help={scoreHelp}
                        direction="higher"
                    />
                </p>
                <h2 className="text-3xl font-light tracking-tight md:text-4xl">
                    You&apos;re{' '}
                    <span className="font-medium text-primary">
                        {assessment.grade}
                    </span>
                </h2>
                <p className="mt-3 max-w-xl text-sm leading-relaxed text-muted-foreground">
                    {narrative}
                </p>
                <div className="mt-4">
                    <Badge variant="secondary">{assessment.stage}</Badge>
                </div>
                <div className="mt-6 grid grid-cols-2 overflow-hidden rounded-xl border sm:grid-cols-4">
                    {core.map((pillar) => (
                        <div
                            key={pillar?.key ?? 'missing'}
                            className="border-r border-b p-4 last:border-r-0 sm:border-b-0"
                        >
                            <p className="text-2xl font-light tabular-nums">
                                {pillar?.display_score ?? '—'}
                                <span className="ml-1 text-xs text-muted-foreground">
                                    /100
                                </span>
                            </p>
                            <p className="mt-1 flex items-center gap-1 text-[11px] text-muted-foreground">
                                {pillar?.name
                                    .replace(' Growth', '')
                                    .replace(' Management', '') ?? '—'}
                                {pillar && (
                                    <InfoButton
                                        title={pillar.name}
                                        help={pillar.help}
                                        direction={
                                            pillarDirection[
                                                pillar.key as keyof typeof pillarDirection
                                            ]
                                        }
                                    />
                                )}
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}