import { MapPin, Phone } from "lucide-react";
import { toPersianDigits } from "@/lib/format/persian-digits";
import type { StoreDetail } from "@/types/api";

/** Iranian week: 0=Saturday..6=Friday. JS Date#getDay(): 0=Sunday..6=Saturday. */
function todaysWorkingHours(store: StoreDetail) {
  const jsDay = new Date().getDay();
  const iranianWeekday = (jsDay + 1) % 7;
  return store.working_hours.find((wh) => wh.weekday === iranianWeekday) ?? null;
}

function formatTime(value: string | null) {
  if (!value) return "";
  return toPersianDigits(value.slice(0, 5));
}

/** designspec.md §2.2 — hero-overlapping white info card. */
export function StoreInfoCard({ store }: { store: StoreDetail }) {
  const today = todaysWorkingHours(store);
  const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${store.name} ${store.address}`)}`;

  return (
    <div className="relative z-10 -mt-6 rounded-t-3xl bg-white px-4 pt-5 pb-4">
      <h1 className="text-title-large font-extrabold leading-none text-primary-action">{store.name}</h1>
      <p className="mt-1 text-[14px] leading-none text-gray-700">{store.category.name}</p>

      <div className="mt-3 flex flex-wrap items-center gap-2">
        {today && (
          <span className="rounded-full bg-teal-light px-2 py-1 text-[11px] font-semibold leading-none text-primary-action">
            {today.is_closed ? "تعطیل" : `${formatTime(today.opens_at)} تا ${formatTime(today.closes_at)}`}
          </span>
        )}
        <span className="text-[13px] leading-none text-gray-600">|</span>
        <span
          className={`rounded-full border px-2.5 py-1.5 text-[12px] font-semibold leading-none ${
            store.is_open ? "border-emerald-border bg-emerald-bg text-emerald-text-strong" : "border-gray-300 bg-gray-100 text-gray-600"
          }`}
        >
          <span className="inline-flex items-center gap-1.5">
            <span className={`h-1.5 w-1.5 rounded-full ${store.is_open ? "bg-emerald-500" : "bg-gray-500"}`} />
            {store.is_open ? "فعال" : "بسته"}
          </span>
        </span>
      </div>

      <div className="mt-4 flex items-center gap-2 rounded-[10px] border border-teal-border p-2">
        <span className="flex h-8 w-10 shrink-0 items-center justify-center rounded-[10px] border border-teal-border bg-teal-light text-primary-action">
          <MapPin className="h-4 w-4" />
        </span>
        <span className="flex-1 truncate text-right text-[14px] leading-normal text-foreground">{store.address}</span>
        <a href={mapsUrl} target="_blank" rel="noreferrer" className="shrink-0 text-[13px] font-medium text-teal">
          مسیریابی
        </a>
      </div>

      {store.phone_number && (
        <a
          href={`tel:${store.phone_number}`}
          className="mt-2 flex items-center gap-2 rounded-[10px] border border-teal-border p-2"
        >
          <span className="flex h-8 w-10 shrink-0 items-center justify-center rounded-[10px] border border-teal-border bg-teal-light text-primary-action">
            <Phone className="h-4 w-4" />
          </span>
          <span dir="ltr" className="text-right text-[14px] text-foreground">
            {store.phone_number}
          </span>
        </a>
      )}
    </div>
  );
}