"use client";

import { useTranslations } from "next-intl";
import {
  getVaccinationStatusForDisplay,
  vaccinationStatusValueLabel,
} from "@/lib/animalVaccinationStatus";

export default function HorseDetailsSection({ item }: { item: any }) {
  const t = useTranslations("SINGLE_AUCTION.HORSE_DETAILS");
  const tVax = useTranslations("ANIMAL_VACCINATION_STATUS");
  const horse = item?.horse || {};
  const vaccinationDisplay = getVaccinationStatusForDisplay(horse);

  let genderKey: string;
  if (horse.gender) {
    genderKey =
      horse.gender === "male"
        ? "gender_male"
        : horse.gender === "female"
          ? "gender_female"
          : "gender_unknown";
  } else {
    genderKey = "gender_unknown";
  }

  const genderLabel = t(genderKey );

  const getHorseTypeLabel = (raw: any): string => {
    const rawKey = String(raw || "").trim();
    if (!rawKey) return "—";
    const key = rawKey.toLowerCase();
    const normalizedKey = key === "female" ? "non_breeding_female" : key;

    const typeKey = `type_values.${normalizedKey}`;
    const translated = t(typeKey);
    // If a key is missing, next-intl can return the key itself.
    if (translated === typeKey) return rawKey;
    return translated;
  };

  const ageYears = (() => {
    if (!horse.date_of_birth) return "—";
    const dob = new Date(horse.date_of_birth);
    if (Number.isNaN(dob.getTime())) return horse.date_of_birth;
    const diff = Date.now() - dob.getTime();
    const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));
    if (years < 1) {
      const months = Math.floor(diff / (1000 * 60 * 60 * 24 * 30));
      return t("age_months", { months });
    }
    return t("age_years", { years });
  })();

  return (
    <section className="bg-white rounded-2xl p-5 shadow">
      <h3 className="text-lg font-bold text-[#0F5132] mb-4">{t("title")}</h3>
      <div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
        <div className="space-y-2">
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">{t("name")}</div>
            <div className="font-bold">{horse.name || item?.title || "—"}</div>
          </div>
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">{t("usage")}</div>
            <div className="font-bold">{horse.animal_usage || "—"}</div>
          </div>
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">{t("color")}</div>
            <div className="font-bold">{horse.animal_color || "—"}</div>
          </div>
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">{t("breed")}</div>
            <div className="font-bold">{horse.breed || "—"}</div>
          </div>
        </div>
        <div className="space-y-2">
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">{t("gender")}</div>
            <div className="font-bold">{genderLabel}</div>
          </div>
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">{t("birth_and_age")}</div>
            <div className="font-bold">
              {horse.date_of_birth || "—"}{" "}
              {horse.date_of_birth && `• ${ageYears}`}
            </div>
          </div>
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">{t("height")}</div>
            <div className="font-bold">
              {horse.height
                ? t("height_with_unit", { value: horse.height })
                : "—"}
            </div>
          </div>
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">{t("type")}</div>
            <div className="font-bold">{getHorseTypeLabel(horse.type)}</div>
          </div>
        </div>
      </div>
      <div
        className={`mt-4 grid gap-3 text-xs ${
          vaccinationDisplay ? "md:grid-cols-4" : "md:grid-cols-3"
        }`}
      >
        <div className="p-3 rounded-xl bg-stone-50  ">
          <div className=" mb-1">{t("father_name")}</div>
          <div className="font-semibold">{horse.father_name || "—"}</div>
        </div>
        <div className="p-3 rounded-xl bg-stone-50  ">
          <div className=" mb-1">{t("mother_name")}</div>
          <div className="font-semibold">{horse.mother_name || "—"}</div>
        </div>
        <div className="p-3 rounded-xl bg-stone-50  ">
          <div className=" mb-1">{t("mother_father_name")}</div>
          <div className="font-semibold">{horse.mother_father_name || "—"}</div>
        </div>
        {vaccinationDisplay && (
          <div className="p-3 rounded-xl bg-stone-50  ">
            <div className=" mb-1">{tVax("label")}</div>
            <div className="font-semibold">
              {vaccinationStatusValueLabel(vaccinationDisplay, tVax)}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}