"use client";

import { useTranslations } from "next-intl";
import { format } from "date-fns-jalali";
import { enUS } from "date-fns-jalali/locale/en-US";
import { faIR } from "date-fns-jalali/locale/fa-IR";
import { Bell, ChefHat, UtensilsCrossed, type LucideIcon } from "lucide-react";
import type { CafeNotification } from "@/lib/api/notifications";
import { cn } from "@/lib/utils";

export function notificationIcon(type: string): LucideIcon {
  if (type === "table_call_waiter") return Bell;
  if (type.startsWith("guest_order")) return ChefHat;
  if (type.includes("table")) return UtensilsCrossed;
  return Bell;
}

export function formatNotificationTime(iso: string, locale: string): string {
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) return "";
  const jalaliLocale = locale === "en" ? enUS : faIR;
  return format(date, "d MMM yyyy — HH:mm", { locale: jalaliLocale });
}

type NotificationRowProps = {
  item: CafeNotification;
  locale: string;
  onSelect: (n: CafeNotification) => void;
  compact?: boolean;
};

export function NotificationRow({ item, locale, onSelect, compact }: NotificationRowProps) {
  const Icon = notificationIcon(item.type);
  const timeLabel = formatNotificationTime(item.createdAt, locale);

  return (
    <button
      type="button"
      onClick={() => onSelect(item)}
      className={cn(
        "flex w-full gap-3 rounded-xl border border-border bg-card text-start shadow-sm transition active:scale-[0.98]",
        "hover:border-primary/40",
        !item.isRead && "border-primary/25 bg-[#E1F5EE]/40",
        compact ? "p-3" : "p-4"
      )}
    >
      <span
        className={cn(
          "flex shrink-0 items-center justify-center rounded-lg",
          compact ? "size-9" : "size-10",
          item.isRead ? "bg-muted text-muted-foreground" : "bg-[#E1F5EE] text-[#0F6E56]"
        )}
      >
        <Icon className={compact ? "size-4" : "size-5"} aria-hidden />
      </span>
      <span className="min-w-0 flex-1">
        <span className="flex items-start justify-between gap-2">
          <span className={cn("font-medium text-foreground", compact ? "text-xs" : "text-sm")}>
            {item.title}
          </span>
          {!item.isRead ? (
            <span className="mt-1 size-2 shrink-0 rounded-full bg-[#0F6E56]" aria-hidden />
          ) : null}
        </span>
        {item.body && !compact ? (
          <span className="mt-1 line-clamp-2 block text-sm leading-relaxed text-muted-foreground">
            {item.body}
          </span>
        ) : null}
        <span className="mt-1.5 flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
          {timeLabel ? <span>{timeLabel}</span> : null}
          {item.tableNumber ? (
            <span className="rounded-full border border-border/80 px-2 py-0.5">
              {item.tableNumber}
            </span>
          ) : null}
        </span>
      </span>
    </button>
  );
}

type NotificationDetailPanelProps = {
  item: CafeNotification;
  locale: string;
  onBack: () => void;
};

export function NotificationDetailPanel({ item, locale, onBack }: NotificationDetailPanelProps) {
  const t = useTranslations("notifications");
  const Icon = notificationIcon(item.type);
  const timeLabel = formatNotificationTime(item.createdAt, locale);

  return (
    <div className="flex flex-col gap-3 p-3">
      <button
        type="button"
        onClick={onBack}
        className="self-start text-xs font-medium text-[#0F6E56] hover:underline"
      >
        {t("backToList")}
      </button>
      <div className="flex gap-3 rounded-xl border border-primary/20 bg-[#E1F5EE]/50 p-4">
        <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#E1F5EE] text-[#0F6E56]">
          <Icon className="size-5" aria-hidden />
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-sm font-medium text-foreground">{item.title}</p>
          {item.body ? (
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{item.body}</p>
          ) : null}
          <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
            {timeLabel ? <span>{timeLabel}</span> : null}
            {item.tableNumber ? (
              <span className="rounded-full border border-border/80 bg-card px-2 py-0.5">
                {item.tableNumber}
              </span>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
}
