"use client";

import { cn } from "@/lib/utils";
import { formatLocaleDate, formatLocaleTime, type Locale } from "@/lib/i18n-utils";
import { Calendar, Clock } from "lucide-react";
import { useLocale } from "next-intl";
import type { ReactNode } from "react";

const MISSING = "—";

interface DateCellProps {
  value: string | number | Date | undefined | null;
  withIcon?: boolean;
  options?: Intl.DateTimeFormatOptions;
  className?: string;
}

export function DateCell({ value, withIcon, options, className }: DateCellProps) {
  const locale = useLocale() as Locale;
  const text = formatLocaleDate(value, locale, options) || MISSING;

  if (!withIcon) return <span className={className}>{text}</span>;

  return (
    <div className={cn("inline-flex items-center justify-center gap-2", className)}>
      <Calendar className="size-4 text-muted-foreground" />
      <span>{text}</span>
    </div>
  );
}

interface TimeCellProps {
  value: string | number | Date | undefined | null;
  withIcon?: boolean;
  options?: Intl.DateTimeFormatOptions;
  className?: string;
}

export function TimeCell({ value, withIcon, options, className }: TimeCellProps) {
  const locale = useLocale() as Locale;
  const text = formatLocaleTime(value, locale, options) || MISSING;

  if (!withIcon) return <span className={className}>{text}</span>;

  return (
    <div className={cn("inline-flex items-center justify-center gap-2", className)}>
            <Clock className="size-4 text-muted-foreground" />
      <span>{text}</span>
    </div>
  );
}

interface DateTimeCellProps {
  date: string | number | Date | undefined | null;
  time?: string | number | Date | undefined | null;
  fallback?: ReactNode;
  dateOptions?: Intl.DateTimeFormatOptions;
  timeOptions?: Intl.DateTimeFormatOptions;
}

export function DateTimeCell({
  date,
  time,
  fallback,
  dateOptions,
  timeOptions,
}: DateTimeCellProps) {
  const locale = useLocale() as Locale;
  const dateText = formatLocaleDate(date, locale, dateOptions);
  const timeText = formatLocaleTime(time, locale, timeOptions);

  if (!dateText) {
    return (
      <span className="text-sm text-muted-foreground">{fallback ?? MISSING}</span>
    );
  }

  return (
    <div className="flex flex-col items-start gap-1">
      <div className="inline-flex items-center justify-center gap-2 text-sm text-foreground">
        <Calendar className="size-4 text-muted-foreground" />
        <span>{dateText}</span>
      </div>
      {timeText && (
        <div className="inline-flex items-center justify-center gap-2 text-sm text-foreground">
          <Clock className="size-4 text-muted-foreground" />
          <span>{timeText}</span>
        </div>
      )}
    </div>
  );
}