"use client";

import { useLocale, useTranslations } from "next-intl";
import { Calendar, MapPin, Phone, UserRound } from "lucide-react";
import { AR_LOCALE_LATIN_DIGITS } from "@/lib/arDateFormat";
import { isValidLatLng, parseCoord } from "@/lib/coordinates";
import LocationMapView from "@/components/maps/LocationMapView";
import type { AuctionItem } from "../types";

function formatCreatedAt(value: string | null | undefined, locale: string) {
  if (value == null || String(value).trim() === "") return null;
  const d = new Date(String(value));
  if (Number.isNaN(d.getTime())) return String(value);
  const ar = (locale || "").toLowerCase().startsWith("ar");
  try {
    return new Intl.DateTimeFormat(ar ? AR_LOCALE_LATIN_DIGITS : "en-US", {
      dateStyle: "medium",
      timeStyle: "short",
    }).format(d);
  } catch {
    return d.toLocaleString("en-US");
  }
}

export default function InfoSection({ item }: { item: AuctionItem }) {
  const t = useTranslations("SINGLE_AUCTION.INFO");
  const locale = useLocale();
  const description = item?.description || t("description_fallback");

  const country = item?.country || "—";
  const city = item?.state || "—";
  const district = "";

  const ownerName =
    item?.created_by?.stable_name || item?.created_by?.name || "—";

  const ownerPhoneRaw =
    item?.created_by?.phone ?? item?.owner?.phone ?? null;
  const ownerPhone =
    ownerPhoneRaw != null && String(ownerPhoneRaw).trim() !== ""
      ? String(ownerPhoneRaw).trim()
      : null;
  const ownerTelHref = ownerPhone
    ? `tel:${ownerPhone.replace(/[^\d+]/g, "")}`
    : null;

  const createdAtFormatted = formatCreatedAt(item?.created_at, locale);

  const mapLat = parseCoord(item?.lat);
  const mapLng = parseCoord(item?.lng);
  const showMap =
    mapLat != null &&
    mapLng != null &&
    isValidLatLng(mapLat, mapLng);

  return (
    <div className="bg-white rounded-2xl p-5 border border-[#0F5132]/12 shadow-[0_12px_30px_rgba(15,81,50,0.08)]">
      <h3 className="text-lg font-bold text-[#0F5132] mb-3 flex items-center gap-2.5">
        <span className="w-2.5 h-2.5 rounded-full bg-[#0F5132]/90 shadow-[0_0_0_4px_rgba(15,81,50,0.14)]" />
        {t("title")}
      </h3>

      <p className="text-slate-700 leading-7 mb-3">{description}</p>

      <div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
        {createdAtFormatted ? (
          <div className="p-3 rounded-lg bg-gray-50 md:col-span-2">
            <div className="text-slate-500 mb-1 flex items-center gap-1.5">
              <Calendar className="w-4 h-4 text-[#0F5132]" />
              <span>{t("created_at_label")}</span>
            </div>
            <div className="font-bold text-slate-900">{createdAtFormatted}</div>
          </div>
        ) : null}
        <div className="p-3 rounded-lg bg-gray-50 ">
          <div className="text-slate-500 mb-1 flex items-center gap-1.5">
            <MapPin className="w-4 h-4 text-[#0F5132]" />
            <span>{t("location_label")}</span>
          </div>
          <div className="font-bold">
            {country} • {city} {district && `• ${district}`}
          </div>
        </div>

        {showMap ? (
          <div className="p-3 rounded-lg bg-gray-50 md:col-span-2">
            <div className="text-slate-500 mb-2 flex items-center gap-1.5">
              <MapPin className="w-4 h-4 text-[#0F5132]" />
              <span>{t("map_label")}</span>
            </div>
            <LocationMapView lat={mapLat} lng={mapLng} height={220} />
          </div>
        ) : null}

        <div className="p-3 rounded-lg bg-gray-50 ">
          <div className="text-slate-500 mb-1 flex items-center gap-1.5">
            <UserRound className="w-4 h-4 text-[#0F5132]" />
            <span>{t("owner_label")}</span>
          </div>
          <div className="font-bold">{ownerName}</div>
          {ownerPhone && ownerTelHref ? (
            <div className="mt-2 pt-2 border-t border-slate-200/80">
              <div className="text-slate-500 mb-1 flex items-center gap-1.5 text-xs">
                <Phone className="w-3.5 h-3.5 text-[#0F5132] shrink-0" />
                <span>{t("owner_phone_label")}</span>
              </div>
              <a
                href={ownerTelHref}
                className="font-semibold text-[#0F5132] hover:underline break-all"
                dir="ltr"
              >
                {ownerPhone}
              </a>
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}