import { LineChart, TrendingUp } from 'lucide-react';
import { route } from 'ziggy-js';

import { Suspense } from 'react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { ChartDataTable } from '@/Components/ui/ChartDataTable';
import { LazyLineChart } from '@/Components/ui/charts';
import { EmptyState } from '@/Components/ui/empty-state';
import { InlineLoader } from '@/Components/ui/inline-loader';

interface TimelineDataPoint extends Record<string, unknown> {
  interval: string;
  clicks_lift: number;
  ctr_improvement: number;
}

interface RoiTimelineChartProps {
  timelineData?: TimelineDataPoint[];
  className?: string;
  primaryColor?: string;
  /** Optional site id — when provided, the zero-state surfaces a "View Recommendations" CTA. */
  siteId?: number;
}

// Loading fallback for chart (canonical: InlineLoader inside fixed-height container).
const ChartLoader = () => (
  <div className="flex h-[300px] items-center justify-center">
    <InlineLoader label="Loading chart…" />
  </div>
);

export default function RoiTimelineChart({
  timelineData = [],
  className,
  primaryColor,
  siteId,
}: RoiTimelineChartProps) {
  const hasData = timelineData.length > 0;

  return (
    <Card className={className}>
      <CardHeader>
        <div className="flex items-center gap-2">
          <TrendingUp
            className="size-5"
            style={primaryColor ? { color: primaryColor } : undefined}
            {...(!primaryColor && { className: 'size-5 text-primary' })}
          />
          <CardTitle className="text-lg">ROI Timeline</CardTitle>
        </div>
        <CardDescription>
          Pages grouped by tracking age (7, 14, 30, 90+ days) — not a chronological timeline
        </CardDescription>
      </CardHeader>
      <CardContent>
        {!hasData ? (
          <EmptyState
            size="sm"
            variant="zero"
            icon={LineChart}
            title="No timeline data yet"
            description="ROI metrics appear after you apply a recommendation and the next GSC sync completes."
            primaryAction={
              siteId
                ? {
                    label: 'View Recommendations',
                    href: route('recommendations.index', { site: siteId }),
                  }
                : undefined
            }
          />
        ) : (
          <>
            <Suspense fallback={<ChartLoader />}>
              <LazyLineChart
                data={timelineData}
                xKey="interval"
                yKeys={['clicks_lift', 'ctr_improvement']}
                height={300}
                showGrid={true}
                showLegend={true}
                showTooltip={true}
                aria-label="Line chart showing avg daily click lift by tracking cohort age (7, 14, 30, 90+ days)"
              />
            </Suspense>

            {/* Accessible data table companion to the chart */}
            <ChartDataTable
              data={timelineData}
              columns={[
                { key: 'interval', label: 'Tracking Interval' },
                { key: 'clicks_lift', label: 'Total Clicks Lift' },
                { key: 'ctr_improvement', label: 'CTR Improvement' },
              ]}
              caption="Total clicks lift and CTR improvement by tracking cohort age"
            />
          </>
        )}
      </CardContent>
    </Card>
  );
}