import { GrowthDashboardBackdrop } from '@/components/growth-score/growth-dashboard-backdrop';
import { FinancialHealthChart } from '@/components/growth-score/growth-score-charts';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import type { GrowthAnalysis, YearlyFinancials } from '@/types/growth-score';

export function FinancialHealthHero({
    analysis,
    years,
    selectedYear,
    onSelectedYearChange,
    currency = 'USD',
}: {
    analysis: GrowthAnalysis;
    years: YearlyFinancials[];
    selectedYear: number | null;
    onSelectedYearChange: (year: number) => void;
    currency?: string;
}) {
    const yearCountLabel = `${analysis.years.length} year${analysis.years.length === 1 ? '' : 's'}`;
    const yearRangeLabel =
        analysis.years.length > 0
            ? `${analysis.years[0].year}–${analysis.years[analysis.years.length - 1].year}`
            : null;

    return (
        <Card className="relative overflow-hidden border-primary/20 shadow-sm">
            <GrowthDashboardBackdrop />
            <CardContent className="relative space-y-5 p-5 md:p-6">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div className="space-y-1">
                        <p className="text-xs font-semibold tracking-widest text-primary uppercase">
                            Financial Health Dashboard
                        </p>
                        <h2 className="text-xl font-bold tracking-tight md:text-2xl">
                            {yearCountLabel}
                            {yearRangeLabel
                                ? ` of synced financial performance`
                                : ''}
                        </h2>
                        <p className="text-sm text-muted-foreground">
                            Last synced:{' '}
                            {analysis.sync.synced_at
                                ? new Intl.DateTimeFormat(undefined, {
                                      dateStyle: 'medium',
                                      timeStyle: 'short',
                                  }).format(new Date(analysis.sync.synced_at))
                                : 'Not yet synced'}
                            {analysis.sync.refreshing
                                ? ' · Refresh in progress.'
                                : ''}
                        </p>
                        {analysis.sync.last_error && (
                            <p className="text-sm text-destructive">
                                Latest refresh failed; showing the last
                                successful data.
                            </p>
                        )}
                    </div>
                </div>

                {years.length > 0 && (
                    <div
                        className="flex flex-wrap gap-2"
                        role="group"
                        aria-label="Highlight a year"
                    >
                        {years.map((item) => {
                            const isSelected = item.year === selectedYear;

                            return (
                                <button
                                    key={item.year}
                                    type="button"
                                    onClick={() =>
                                        onSelectedYearChange(item.year)
                                    }
                                    className={cn(
                                        'rounded-full border px-3 py-1 text-sm font-medium transition-colors',
                                        isSelected
                                            ? 'border-primary bg-primary/10 text-primary'
                                            : 'border-border bg-background/80 text-muted-foreground hover:border-primary/40 hover:text-foreground',
                                    )}
                                    aria-pressed={isSelected}
                                >
                                    {item.year}
                                </button>
                            );
                        })}
                    </div>
                )}

                <FinancialHealthChart
                    years={years}
                    selectedYear={selectedYear}
                    currency={currency}
                />
            </CardContent>
        </Card>
    );
}