"use client";

import { MapPinned } from "lucide-react";
import {
  ComplianceChecklist,
  EkycCard,
  FarmProfileCard,
  GisMapCard,
  LandEvidenceList,
  YieldHistoryChart,
} from "@/components/agnet/identity";
import { useLocale } from "@/lib/i18n";
import { ti } from "@/lib/i18n/dashboard-labels";
import type { IdentityViewModel } from "@/lib/farmer-dashboard";

interface Props {
  data: IdentityViewModel | null;
}

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

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

  return (
    <div className="mx-auto max-w-[1400px] space-y-6" data-testid="identity-module">
      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[3fr_2fr]">
        {data.gis ? <GisMapCard gis={data.gis} /> : null}
        {data.ekyc ? (
          <EkycCard fullName={data.fullName} ekyc={data.ekyc} kycStatus={data.kycStatus} />
        ) : null}
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <FarmProfileCard data={data} />
        {data.landEvidence?.length ? <LandEvidenceList items={data.landEvidence} /> : null}
        {data.yieldHistory?.length ? <YieldHistoryChart items={data.yieldHistory} /> : null}
        {data.compliance?.length ? <ComplianceChecklist items={data.compliance} /> : null}
      </div>
    </div>
  );
}

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