"use client";

import { useLocale, useTranslations } from "next-intl";
import { useGeneralSettings } from "@/lib/clientQueries";

interface ContactInfo {
  phone: string;
  whatsapp: string;
  email: string;
  address: string;
  hours: string;
}

export default function InfoSection() {
  const t = useTranslations("CONTACT_PAGE");
  const locale = useLocale();
  const isArabic = locale === "ar";
  const { data: generalSettings, isLoading } = useGeneralSettings();

  const contactInfo: ContactInfo | null = generalSettings
    ? {
        phone: (generalSettings as any)?.phone,
        whatsapp: (generalSettings as any)?.whatsapp,
        email: (generalSettings as any)?.email,
        address: (generalSettings as any)?.address,
        hours: (generalSettings as any)?.working_hours,
      }
    : null;

  if (isLoading && !generalSettings) {
    return (
      <section
        className="rounded-xl border border-[#0f5132]/10 bg-white p-5 shadow-[0_10px_30px_rgba(15,81,50,0.08)]"
        dir={isArabic ? "rtl" : "ltr"}
      >
        <div className="animate-pulse space-y-4">
          <div className="h-5 w-32 bg-slate-200 rounded-full" />
          <div className="space-y-3">
            <div className="h-3 w-full bg-slate-200 rounded-full" />
            <div className="h-3 w-5/6 bg-slate-200 rounded-full" />
            <div className="h-3 w-3/4 bg-slate-200 rounded-full" />
            <div className="h-3 w-2/3 bg-slate-200 rounded-full" />
            <div className="h-3 w-1/2 bg-slate-200 rounded-full" />
          </div>
        </div>
      </section>
    );
  }

  const addressLabel = isArabic ? "العنوان" : "Address";
  const hoursLabel = isArabic ? "ساعات العمل" : "Working Hours";

  const items = [
    {
      key: "phone",
      label: t("contact_info_phone"),
      render: contactInfo?.phone ? (
        <a
          dir="ltr"
          href={`tel:${contactInfo.phone.replace(/\s/g, "")}`}
          className="underline decoration-dotted decoration-[#0F5132]/50 hover:text-[#0F5132]"
        >
          {contactInfo.phone}
        </a>
      ) : (
        <span className="text-slate-400">-</span>
      ),
    },
    {
      key: "whatsapp",
      label: t("contact_info_whatsapp"),
      render: contactInfo?.whatsapp ? (
        <a
          href={`https://wa.me/${contactInfo.whatsapp.replace(/[^\d]/g, "")}`}
          className="underline decoration-dotted decoration-[#0F5132]/50 hover:text-[#0F5132]"
          target="_blank"
          rel="noreferrer"
          dir="ltr"
        >
          {contactInfo.whatsapp}
        </a>
      ) : (
        <span className="text-slate-400">-</span>
      ),
    },
    {
      key: "email",
      label: t("contact_info_email"),
      render: contactInfo?.email ? (
        <a
          href={`mailto:${contactInfo.email}`}
          className="underline decoration-dotted decoration-[#0F5132]/50 hover:text-[#0F5132]"
        >
          {contactInfo.email}
        </a>
      ) : (
        <span className="text-slate-400">-</span>
      ),
    },
    {
      key: "address",
      label: addressLabel,
      render: contactInfo?.address ? (
        <span className="leading-relaxed">{contactInfo.address}</span>
      ) : (
        <span className="text-slate-400">-</span>
      ),
    },
    {
      key: "hours",
      label: hoursLabel,
      render: contactInfo?.hours ? (
        <span>{contactInfo.hours}</span>
      ) : (
        <span className="text-slate-400">-</span>
      ),
    },
  ];

  return (
    <section
      className="rounded-xl border border-[#0f5132]/10 bg-white p-5 shadow-[0_10px_30px_rgba(15,81,50,0.08)]"
      dir={isArabic ? "rtl" : "ltr"}
    >
      <div className="flex items-start justify-between gap-3 flex-wrap">
        <h3 className="text-lg font-extrabold text-[#0f5132]">
          {t("contact_info_title")}
        </h3>
        <span className="text-xs text-slate-400">
          {t("contact_info_updated") || t("contact_info_title")}
        </span>
      </div>
      <div className="mt-4 space-y-3 text-sm text-slate-700">
        {items.map((item) => (
          <div
            key={item.key}
            className="flex flex-col gap-1 sm:flex-row sm:items-start sm:gap-3"
          >
            <span className="font-semibold text-slate-500 min-w-[90px]">
              {item.label}
            </span>
            <span className="flex-1 break-words">{item.render}</span>
          </div>
        ))}
      </div>
    </section>
  );
}