import React from 'react';

import MetricTimeline from '@/Components/Timeline/MetricTimeline';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { PageProps as InertiaPageProps } from '@/types';

interface Series {
  date: string;
  clicks: number;
  impressions: number;
  position: number | null;
}

interface Annotation {
  date: string;
  type: string;
  title: string;
  description: string;
  link: string | null;
  entity_id: number | null;
}

interface Meta {
  date_range: { from: string; to: string };
  total_days: number;
  totals: {
    clicks: number;
    impressions: number;
    avg_position: number | null;
  };
}

interface PageProps extends InertiaPageProps {
  series: Series[];
  annotations: Annotation[];
  meta: Meta;
  query: string;
  page_url: string | null;
  days: number;
}

export default function TimelineQueryPage({
  series,
  annotations,
  meta,
  query,
  page_url,
}: PageProps) {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="border-b border-border pb-6">
          <h1 className="text-3xl font-bold">Query Timeline</h1>
          <p className="text-muted-foreground">"{query}"</p>
          {page_url && <p className="text-sm text-muted-foreground">{page_url}</p>}
        </div>

        <MetricTimeline
          series={series}
          annotations={annotations}
          meta={meta}
        />
      </div>
    </DashboardLayout>
  );
}