'use client'

import { useEffect, useMemo } from "react"
import { PageHeader } from "@/components/ui/page-header"
import { KpiCard } from "@/components/ui/kpi-card"
import { ClipboardCheck, AlertTriangle } from "lucide-react"
import { useReceivingOrders } from "@/hooks/useReceiving"
import { usePurities } from "@/hooks/usePurities"
import i18n from "@/lib/i18n";
import { OrderInspections } from "./OrderInspections"

export default function InspectionsPage() {
  const receivingOrders = useReceivingOrders()
  const purities = usePurities()
  
  useEffect(() => {
    receivingOrders.fetchItems(1, 100, "", { status: "received" })
    purities.fetchItems(1, 100, "", { is_active: true })
  }, [receivingOrders.fetchItems, purities.fetchItems])

  const pendingItemsCount = useMemo(() => {
    return receivingOrders.items.flatMap(o => 
      (o.items || []).filter((i: any) => !i.assay_result_id)
    ).length
  }, [receivingOrders.items])
  
  return (
    <div className="flex flex-col gap-6">
      <PageHeader 
        title={i18n.t('app.admin.warehouse.inspections.page.text_15')} 
        description={i18n.t('app.admin.warehouse.inspections.page.text_16')}
      />

      <div className="grid gap-4 md:grid-cols-3">
        <KpiCard
          title={i18n.t('app.admin.warehouse.inspections.page.text_17')}
          value={pendingItemsCount}
          icon={ClipboardCheck}
          trend={{ value: 0, label: i18n.t('app.admin.warehouse.inspections.page.text_18'), isPositive: true }}
        />
        <KpiCard
          title={i18n.t('app.admin.warehouse.inspections.page.text_19')}
          value={0}
          icon={AlertTriangle}
          trend={{ value: 0, label: i18n.t('app.admin.warehouse.inspections.page.text_20'), isPositive: false }}
        />
      </div>

      <OrderInspections orders={receivingOrders.items} receiving={receivingOrders} purities={purities} />
    </div>
  )
}
