"use client"

import { useState } from "react"
import { getAnnualReportDownloadUrl } from "@/services/finance"
import { useTranslations } from "next-intl"
import { Download, FileText } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select } from "@/components/ui/select"

export default function ReportsPage() {
  const t = useTranslations("finance")
  const currentYear = new Date().getFullYear()
  const [selectedYear, setSelectedYear] = useState(String(currentYear))

  const years = Array.from({ length: 5 }, (_, i) => currentYear - i)

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">{t("reports")}</h1>

      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              {t("annualReport")}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-muted-foreground">
              {t("annualReportDescription")}
            </p>
            <div className="flex items-end gap-4">
              <Select
                value={selectedYear}
                onChange={(e) => setSelectedYear(e.target.value)}
              >
                {years.map((year) => (
                  <option key={year} value={String(year)}>
                    {year}
                  </option>
                ))}
              </Select>
              <a
                href={getAnnualReportDownloadUrl(parseInt(selectedYear))}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button>
                  <Download className="mr-2 h-4 w-4" />
                  {t("downloadPdf")}
                </Button>
              </a>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              {t("auditorReport")}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-muted-foreground">
              {t("auditorReportDescription")}
            </p>
            <Button variant="outline" disabled>
              <Download className="mr-2 h-4 w-4" />
              {t("comingSoon")}
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
