"use client";

import { Sprout } from "lucide-react";
import {
  DeliveryTrackingStepper,
  FeaturedCatalogTabs,
  InputsKpiRow,
  SupplierRatingList,
  VoucherCard,
} from "@/components/agnet/inputs";
import { useLocale } from "@/lib/i18n";
import { td } from "@/lib/i18n/dashboard-labels";
import type { InputsViewModel } from "@/lib/farmer-dashboard";

interface Props {
  data: InputsViewModel | null;
}

function hasDashboardData(data: InputsViewModel): boolean {
  return Boolean(
    data.kpis ??
      data.suppliers?.length ??
      data.catalog?.length ??
      data.voucher ??
      data.delivery,
  );
}

export default function InputsModule({ data }: Props) {
  const { locale } = useLocale();

  if (!data || !hasDashboardData(data)) {
    return <EmptyState locale={locale} />;
  }

  return (
    <div className="space-y-6" data-testid="inputs-module">
      <header className="flex items-start gap-4">
        <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-green/20 bg-green/5 p-2">
          <Sprout className="size-6 text-green stroke-[2px]" aria-hidden="true" />
        </div>
        <div>
          <h2 className="font-onest text-xl font-semibold tracking-[-0.8px] text-ink sm:text-2xl">
            {td("inputsPageTitle", locale)}
          </h2>
          <p className="font-inter text-sm text-muted">
            {td("inputsPageSubtitle", locale)}
          </p>
        </div>
      </header>

      {data.kpis ? <InputsKpiRow kpis={data.kpis} locale={locale} /> : null}

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-12">
        {data.suppliers && data.suppliers.length > 0 ? (
          <div className="xl:col-span-3">
            <SupplierRatingList suppliers={data.suppliers} locale={locale} />
          </div>
        ) : null}

        {data.catalog && data.catalog.length > 0 ? (
          <div className="xl:col-span-5">
            <FeaturedCatalogTabs catalog={data.catalog} locale={locale} />
          </div>
        ) : null}

        {data.voucher ? (
          <div className="xl:col-span-4">
            <VoucherCard voucher={data.voucher} locale={locale} />
          </div>
        ) : null}
      </div>

      {data.delivery ? (
        <DeliveryTrackingStepper delivery={data.delivery} locale={locale} />
      ) : null}
    </div>
  );
}

function EmptyState({ locale }: { locale: ReturnType<typeof useLocale>["locale"] }) {
  return (
    <div className="py-12 text-center" data-testid="inputs-empty-state">
      <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-[var(--glass)]">
        <Sprout className="size-6 text-muted" aria-hidden="true" />
      </div>
      <h3 className="font-onest text-lg font-semibold text-ink">
        {td("inputsEmptyTitle", locale)}
      </h3>
      <p className="mx-auto mt-1 max-w-sm font-inter text-sm text-muted">
        {td("inputsEmptyDescription", locale)}
      </p>
    </div>
  );
}