import { Link } from '@inertiajs/react';
import { AlertTriangle, Building2, Database, PlugZap } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { edit as integrations } from '@/routes/integrations';

type DashboardEmptyStateProps = {
    status: string;
    companyName?: string;
    message?: string;
};

const stateContent: Record<
    string,
    {
        title: string;
        description: string;
        icon: typeof Building2;
    }
> = {
    no_company: {
        title: 'Set up your first company',
        description:
            'Connect a company to turn your accounting data into a clear financial command center.',
        icon: Building2,
    },
    not_connected: {
        title: 'Connect your accounting data',
        description:
            'Link QuickBooks or Xero to unlock growth score, financial trends, and actionable insights.',
        icon: PlugZap,
    },
    insufficient_history: {
        title: 'Your dashboard is almost ready',
        description:
            'We need more adjacent financial years before we can calculate reliable growth trends.',
        icon: Database,
    },
    error: {
        title: 'Your data needs attention',
        description:
            'The latest financial data could not be loaded, but your connection is still in place.',
        icon: AlertTriangle,
    },
};

export function DashboardEmptyState({
    status,
    companyName,
    message,
}: DashboardEmptyStateProps) {
    const content = stateContent[status] ?? stateContent.not_connected;
    const Icon = content.icon;

    return (
        <Card className="overflow-hidden border-primary/20 bg-gradient-to-br from-primary/10 via-card to-card">
            <CardHeader className="flex flex-row items-start gap-4">
                <span className="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                    <Icon className="size-6" />
                </span>
                <div>
                    <CardTitle>{content.title}</CardTitle>
                    <p className="mt-1 text-sm text-muted-foreground">
                        {companyName ? `${companyName} · ` : ''}
                        {message ?? content.description}
                    </p>
                </div>
            </CardHeader>
            <CardContent className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <Alert className="bg-background/70">
                    <AlertTitle>What you’ll see here</AlertTitle>
                    <AlertDescription>
                        Revenue movement, profitability, growth score, data
                        health, and the next best action.
                    </AlertDescription>
                </Alert>
                <Button asChild className="shrink-0">
                    <Link href={integrations()}>Open integrations</Link>
                </Button>
            </CardContent>
        </Card>
    );
}