"use client";

import Link from "next/link";
import { getServiceItemAccent, ServiceItem } from "@/lib/menu";

const toneStyles = {
  primary: "bg-primary",
  secondary: "bg-[var(--secondary)]",
  slate: "bg-slate-600",
};

function TileBody({
  item,
  accent,
  disabled,
}: {
  item: ServiceItem;
  accent: ReturnType<typeof getServiceItemAccent>;
  disabled: boolean;
}) {
  return (
    <>
      {disabled ? (
        <span className="absolute left-1 top-1 rounded-full bg-amber-100 px-1 py-px text-[8px] font-semibold leading-3 text-amber-800">
          به زودی
        </span>
      ) : null}
      <span
        className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all duration-200 sm:h-9 sm:w-9 sm:rounded-xl [&_svg]:h-4 [&_svg]:w-4 sm:[&_svg]:h-5 sm:[&_svg]:w-5 ${
          disabled ? "bg-slate-200 text-slate-500" : `${accent.icon} ${accent.iconHover} group-hover:scale-105`
        }`}
      >
        {item.icon}
      </span>
      <span
        className={`line-clamp-2 min-h-[2rem] text-center text-[10px] font-medium leading-tight sm:text-xs sm:leading-4 ${
          disabled ? "text-slate-500" : `text-slate-800 ${accent.labelHover}`
        }`}
      >
        {item.label}
      </span>
    </>
  );
}

export function ServiceTile({ item }: { item: ServiceItem }) {
  const disabled = item.phase === "soon" || !item.href;
  const accent = getServiceItemAccent(item.id);
  const frame =
    "group relative flex min-h-[5.25rem] flex-col items-center justify-center gap-1 rounded-xl border border-slate-200/90 px-1 py-2 sm:min-h-[5.75rem] sm:gap-1.5 sm:px-1.5 sm:py-2.5";

  if (disabled) {
    return (
      <div className={`${frame} bg-slate-50 opacity-80`}>
        <TileBody item={item} accent={accent} disabled />
      </div>
    );
  }

  return (
    <Link
      href={item.href!}
      className={`${frame} bg-white shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md active:scale-[0.99] ${accent.tile}`}
    >
      <TileBody item={item} accent={accent} disabled={false} />
    </Link>
  );
}

export function ServiceSectionCard({
  title,
  tone,
  children,
}: {
  title: string;
  tone: keyof typeof toneStyles;
  children: React.ReactNode;
}) {
  return (
    <section className="overflow-hidden rounded-2xl border border-[var(--border)] bg-white shadow-card">
      <div className={`px-3 py-2.5 text-sm font-bold text-white sm:px-4 ${toneStyles[tone]}`}>{title}</div>
      <div className="grid grid-cols-3 gap-2 p-2 sm:grid-cols-4 sm:gap-2.5 sm:p-3">{children}</div>
    </section>
  );
}