import { Head, Link } from '@inertiajs/react';
import { GrowthScoreReport } from '@/components/growth-score/growth-score-report';
import Heading from '@/components/heading';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { mine } from '@/routes/growth-score';
import { edit as editIntegrations } from '@/routes/integrations';
import type { GrowthAnalysis, SavedAdvisorAdvice } from '@/types/growth-score';

type Props = {
    company: {
        id: number;
        name: string;
        base_currency: string;
        external_company_id: string | null;
        external_account_type: string | null;
    } | null;
    connected: boolean;
    analysis: GrowthAnalysis | null;
    saved_advice: SavedAdvisorAdvice | null;
};

export default function MyGrowthScore({
    company,
    connected,
    analysis,
    saved_advice,
}: Props) {
    return (
        <>
            <Head title="My Growth Score" />
            <div className="flex flex-col gap-6 p-4">
                <Heading
                    title="Analyze My Growth Score"
                    description="Synced revenue and net-income history for your linked QuickBooks or Xero company."
                />

                {!company && (
                    <Alert>
                        <AlertTitle>No company on this account</AlertTitle>
                        <AlertDescription>
                            Link a company to your user before analyzing growth.
                        </AlertDescription>
                    </Alert>
                )}

                {company && !connected && (
                    <Alert>
                        <AlertTitle>No accounting connection</AlertTitle>
                        <AlertDescription className="flex flex-col gap-3">
                            <p>
                                Choose your QuickBooks or Xero company in
                                Settings so we can pull live financial history.
                            </p>
                            <Button asChild className="w-fit">
                                <Link href={editIntegrations()}>
                                    Open integrations
                                </Link>
                            </Button>
                        </AlertDescription>
                    </Alert>
                )}

                {analysis && (
                    <GrowthScoreReport
                        analysis={analysis}
                        savedAdvice={saved_advice}
                        currency={company?.base_currency}
                        externalCompany={
                            company?.external_company_id &&
                            company.external_account_type
                                ? {
                                      id: company.external_company_id,
                                      accountType:
                                          company.external_account_type,
                                      name: company.name,
                                  }
                                : undefined
                        }
                    />
                )}
            </div>
        </>
    );
}

MyGrowthScore.layout = {
    breadcrumbs: [
        {
            title: 'My Growth Score',
            href: mine(),
        },
    ],
};
