import { useTranslation } from "react-i18next";
import { BadgeCheck, Building2, IdCard, User } from "lucide-react";
import {
  PortalFieldLabel,
  PortalReadOnlyField,
} from "@/external-portal/components/shared/PortalFormPrimitives";
import type { ComplaintVerificationSession } from "../types/complaint.types";

interface ComplaintVerifiedInfoPanelProps {
  session: ComplaintVerificationSession;
}

export function ComplaintVerifiedInfoPanel({
  session,
}: ComplaintVerifiedInfoPanelProps) {
  const { t } = useTranslation();
  const isTinComplaint = session.method === "tin";

  return (
    <section className="mb-6 rounded-xl border border-emerald-200 bg-emerald-50/80 p-5 md:p-6">
      <h3 className="mb-4 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-emerald-800">
        <BadgeCheck className="h-4 w-4" />
        {isTinComplaint
          ? t("complaint.tin.verifiedInfo")
          : t("complaint.fayda.verifiedInfo")}
      </h3>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        {isTinComplaint ? (
          <>
            <PortalReadOnlyField
              label={t("complaint.tin.organizationName")}
              value={session.organization?.organizationName}
              icon={Building2}
            />
            <PortalReadOnlyField
              label={t("complaint.tin.tinLabel")}
              value={session.organization?.tin}
              icon={IdCard}
              mono
            />
            {session.organization?.tradeName ? (
              <PortalReadOnlyField
                label={t("complaint.tin.tradeName")}
                value={session.organization.tradeName}
                icon={Building2}
              />
            ) : null}
            {session.organization?.licenseNumber ? (
              <PortalReadOnlyField
                label={t("complaint.tin.licenseNumber")}
                value={session.organization.licenseNumber}
                icon={IdCard}
                mono
              />
            ) : null}
          </>
        ) : (
          <>
            <PortalReadOnlyField
              label={t("complaint.fullName")}
              value={session.citizen?.fullName}
              icon={User}
            />
          </>
        )}
      </div>
    </section>
  );
}
