import { Head, Link } from '@inertiajs/react';
import { GrowthScoreReport } from '@/components/growth-score/growth-score-report';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import { clients } from '@/routes/growth-score';
import type {
    ExternalCompany,
    GrowthAnalysis,
    SavedAdvisorAdvice,
} from '@/types/growth-score';

type Props = {
    company: {
        base_currency: string;
    } | null;
    client: ExternalCompany;
    analysis: GrowthAnalysis;
    saved_advice: SavedAdvisorAdvice | null;
};

export default function ClientGrowthScoreDetail({
    company,
    client: selected,
    analysis,
    saved_advice,
}: Props) {
    return (
        <>
            <Head title={`${selected.name} growth score`} />
            <div className="flex flex-col gap-6 p-4">
                <div className="flex flex-wrap items-start justify-between gap-4">
                    <Heading
                        title={selected.name}
                        description={`${selected.account_type === 'xero' ? 'Xero' : 'QuickBooks'} historical growth score.`}
                    />
                    <Button asChild variant="outline">
                        <Link href={clients()}>Back to clients</Link>
                    </Button>
                </div>

                <GrowthScoreReport
                    analysis={analysis}
                    savedAdvice={saved_advice}
                    currency={company?.base_currency}
                    externalCompany={{
                        id: selected.id,
                        accountType: selected.account_type,
                        name: selected.name,
                    }}
                />
            </div>
        </>
    );
}

ClientGrowthScoreDetail.layout = {
    breadcrumbs: [
        {
            title: 'Client Growth Score',
            href: clients(),
        },
        {
            title: 'Client',
            href: clients(),
        },
    ],
};
