import { Link } from '@inertiajs/react';
import { Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { formatEuro } from '@/lib/format';
import { cn } from '@/lib/utils';
import { index as billingIndex } from '@/routes/billing';
import {
    create as classroomsCreate,
    index as classroomsIndex,
} from '@/routes/classrooms';
import { edit as companyEdit } from '@/routes/company';
import { index as onboardingIndex } from '@/routes/onboarding';
import type { OnboardingData, OnboardingStepKey } from '@/types';

type Props = {
    onboarding: OnboardingData;
};

const stepLabels: Record<OnboardingStepKey, string> = {
    subscription: 'Attiva un piano',
    package: 'Acquista una ricarica di crediti',
    classroom: 'Crea la prima aula',
    participants: 'Carica i discenti e invita il docente',
    formatemp: 'Collega le credenziali Forma.Temp',
};

const stepDescriptions: Partial<Record<OnboardingStepKey, string>> = {
    subscription: 'I crediti del piano si rinnovano ogni mese.',
    package: 'Crediti extra una tantum, se quelli del piano non bastano.',
};

const stepActionLabels: Record<OnboardingStepKey, string> = {
    subscription: 'Attiva un piano',
    package: 'Acquista crediti',
    classroom: 'Crea aula',
    participants: 'Vai alle aule',
    formatemp: 'Configura Forma.Temp',
};

export default function OnboardingChecklist({ onboarding }: Props) {
    if (onboarding.completed) {
        return null;
    }

    const totalSteps = onboarding.steps.length;
    const doneCount = onboarding.steps.filter((step) => step.done).length;
    const pkg = onboarding.package;

    const hrefFor = (key: OnboardingStepKey) => {
        switch (key) {
            case 'subscription':
                return billingIndex();
            case 'package':
                return pkg
                    ? billingIndex({ query: { package: pkg.slug } })
                    : billingIndex();
            case 'classroom':
                return classroomsCreate();
            case 'participants':
                return classroomsIndex();
            case 'formatemp':
                return companyEdit();
        }
    };

    return (
        <Card>
            <CardHeader className="gap-4">
                <div className="flex flex-wrap items-center justify-between gap-2">
                    <CardTitle>Configurazione dell&apos;account</CardTitle>
                    <span className="text-muted-foreground text-sm">
                        {doneCount} di {totalSteps} completati
                    </span>
                </div>
                <div className="flex gap-1.5">
                    {onboarding.steps.map((step, index) => (
                        <span
                            key={step.key}
                            className={cn(
                                'h-1.5 flex-1 rounded-full',
                                index < doneCount ? 'bg-primary' : 'bg-muted',
                            )}
                        />
                    ))}
                </div>
            </CardHeader>
            <CardContent>
                <ol className="flex flex-col">
                    {onboarding.steps.map((step, index) => {
                        const isLast = index === totalSteps - 1;
                        const isPackageStep = step.key === 'package';
                        const showPackageHint =
                            isPackageStep && pkg !== null && !step.done;

                        return (
                            <li
                                key={step.key}
                                className="relative flex gap-4 pb-6 last:pb-0"
                            >
                                {!isLast && (
                                    <span
                                        aria-hidden
                                        className="bg-border absolute top-6 left-3 w-px"
                                        style={{
                                            height: 'calc(100% - 1.5rem)',
                                        }}
                                    />
                                )}
                                <span
                                    className={cn(
                                        'relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full border',
                                        step.done
                                            ? 'bg-primary border-transparent'
                                            : 'bg-background border-border',
                                    )}
                                >
                                    {step.done && (
                                        <Check className="text-primary-foreground size-3.5" />
                                    )}
                                </span>
                                <div className="flex flex-1 flex-wrap items-center justify-between gap-3">
                                    <div className="min-w-0">
                                        <p
                                            className={cn(
                                                'text-sm font-medium',
                                                step.done
                                                    ? 'text-muted-foreground'
                                                    : 'text-foreground',
                                            )}
                                        >
                                            {stepLabels[step.key]}
                                        </p>
                                        {showPackageHint && pkg ? (
                                            <p className="text-muted-foreground mt-1 text-xs">
                                                Hai scelto {pkg.name} (
                                                {formatEuro(pkg.price_cents)}):
                                                completa l&apos;acquisto dalla
                                                pagina crediti
                                            </p>
                                        ) : (
                                            stepDescriptions[step.key] && (
                                                <p className="text-muted-foreground mt-1 text-xs">
                                                    {stepDescriptions[step.key]}
                                                </p>
                                            )
                                        )}
                                    </div>
                                    <Button variant="outline" size="sm" asChild>
                                        <Link href={hrefFor(step.key)}>
                                            {showPackageHint && pkg
                                                ? `Acquista ${pkg.name}`
                                                : stepActionLabels[step.key]}
                                        </Link>
                                    </Button>
                                </div>
                            </li>
                        );
                    })}
                </ol>
                <Button variant="ghost" size="sm" asChild className="mt-2">
                    <Link href={onboardingIndex()}>
                        Apri la configurazione guidata
                    </Link>
                </Button>
            </CardContent>
        </Card>
    );
}