"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { BarChart3, CalendarRange, FileBarChart, ShoppingCart, type LucideIcon } from "lucide-react"

import { salesApi } from "@/lib/api/sales"
import { errorMessage } from "@/lib/error-map"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { SalesReportDefinition } from "@/types/sales"

const reportIcons: Record<string, LucideIcon> = {
  sales: BarChart3,
  invoice: FileBarChart,
  product: ShoppingCart,
  period: CalendarRange,
}

export default function SalesReportsPage() {
  const [reports, setReports] = useState<SalesReportDefinition[] | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    setError(null)
    salesApi.listReports().then(setReports).catch((err) => setError(errorMessage(err)))
  }, [])

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Sales Reports</h1>
        <p className="text-base text-muted-foreground">
          Card-based report hub with the same layout and handling style used across stock management.
        </p>
      </div>

      {error && <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>}

      {!error && reports === null && (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <Skeleton key={i} className="h-40 rounded-xl" />
          ))}
        </div>
      )}

      {!error && reports && reports.length === 0 && (
        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
          <FileBarChart className="size-12 text-muted-foreground" />
          <p className="text-base text-muted-foreground">No sales reports are available.</p>
        </div>
      )}

      {!error && reports && reports.length > 0 && (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {reports.map((report) => (
            <Link key={report.id} href={`/dashboard/sales/reports/${report.id}`}>
              <Card className="h-full transition-shadow group-hover:shadow-md">
                <CardHeader>
                  <div className="flex items-center gap-3">
                    <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                      {(() => {
                        const Icon = reportIcons[report.id.toLowerCase()] ?? FileBarChart
                        return <Icon className="size-5" />
                      })()}
                    </div>
                    <CardTitle className="text-lg">{report.name}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-base text-muted-foreground">{report.description}</p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}
