// Import ========================================================================================================================
import App from '@/layouts/aia/app-layout';
import Input from '@/components/input';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import HeroContent from '@/components/aia/hero-content';
import ReportCard from '@/components/report-card';
import { router } from '@inertiajs/react';
import { useState } from 'react';

type ReportItem = {
  id: number;
  title: string;
  year: number;
  summary?: string | null;
  cover_image_url?: string | null;
  published_at?: string | null;
  download_type: 'upload' | 'link';
  download_url: string;
};

type ReportProps = {
  reports: ReportItem[];
  filters: {
    year?: number | null;
  };
  years: number[];
};

export default function Report({ reports, filters, years }: ReportProps) {
  const [selectedYear, setSelectedYear] = useState<string>(
    filters.year ? String(filters.year) : ''
  );

  const reportCards = reports.map((report) => {
    const formattedDate = report.published_at
      ? new Intl.DateTimeFormat('en', {
        day: '2-digit',
        month: 'short',
        year: 'numeric',
      }).format(new Date(report.published_at))
      : String(report.year);

    return {
      id: report.id,
      reportImage: report.cover_image_url || undefined,
      reportTitle: report.title,
      reportDate: formattedDate,
      downloadLink: report.download_url,
      downloadType: report.download_type,
    };
  });

  const handleYearChange = (value: string | boolean) => {
    const yearValue = typeof value === 'string' ? value : '';
    setSelectedYear(yearValue);

    router.get(
      route('report'),
      { year: yearValue || undefined },
      { preserveState: true, preserveScroll: true }
    );
  };

  return (
    <App
      subNav={
        <SectionNavigation
          links={
            [{ name: 'AI in Taiwan', href: route('ai-in-taiwan') },
            { name: 'Voice of Impact', href: route('voice-of-impact') },
            { name: 'Certification', href: route('certification') },
            { name: 'Report', href: route('report') }
            ]
          }
        />
      }
      pageMeta={
        < PageMeta
          title="AI in Taiwan"

        />
      }

      mainClass="pageContent"

    >

      <HeroContent
        heroContentHeading="Deep Dives into AI's Cutting Edge
"
        heroContentDescription="Stay ahead in AI innovation with Taiwan AI Academy’s exclusive reports. Our in-depth analyses provide valuable insights into AI trends, industry applications, and research breakthroughs, empowering businesses and professionals to navigate the future of AI with confidence."
      />
      <div className="container pageSection">
        <div className="w-[237px] mb-32">
          <Input
            className="inputText-input inputText-input--page"
            type="select"
            required={false}
            id="input-select-year"
            placeholder="Select a year"
            description=""
            error={false}
            value={selectedYear}
            options={[
              { value: "", label: "All years" },
              ...years.map((year) => ({
                value: String(year),
                label: String(year),
              })),
            ]}
            onChange={handleYearChange}
          />
        </div>
      </div>
      <div className="container pageSection">
        <div className="grid grid-cols gap-24 md:grid-cols-2 md:gap-x-20 lg:grid-cols-4">

          {reportCards.map((card) => (
            <ReportCard
              key={card.id}
              reportImage={card.reportImage}
              reportTitle={card.reportTitle}
              reportDate={card.reportDate}
              downloadLink={card.downloadLink}
              downloadType={card.downloadType}
            />
          ))}



        </div>
      </div>

    </App >
  );
}