// buzzwareTech types
import { useTranslation } from "@buzzwaretech/i18n";
import type { IUser } from "@buzzwaretech/types";
// buzzwareTech ui
// hooks
import { useCurrentTime } from "@/hooks/use-current-time";

export interface IUserGreetingsView {
  user: IUser;
}

export function UserGreetingsView(props: IUserGreetingsView) {
  const { user } = props;
  // current time hook
  const { currentTime } = useCurrentTime();
  // store hooks
  const { t } = useTranslation();

  const hour = new Intl.DateTimeFormat("en-US", {
    hour12: false,
    hour: "numeric",
  }).format(currentTime);

  const date = new Intl.DateTimeFormat("en-US", {
    month: "short",
    day: "numeric",
  }).format(currentTime);

  const weekDay = new Intl.DateTimeFormat("en-US", {
    weekday: "long",
  }).format(currentTime);

  let timeString = "";
  try {
    timeString = new Intl.DateTimeFormat("en-US", {
      timeZone: user?.user_timezone || undefined,
      hour12: false, // Use 24-hour format
      hour: "2-digit",
      minute: "2-digit",
    }).format(currentTime);
  } catch (e) {
    // Fallback if timezone is empty or invalid
    timeString = new Intl.DateTimeFormat("en-US", {
      hour12: false,
      hour: "2-digit",
      minute: "2-digit",
    }).format(currentTime);
  }

  const greeting =
    parseInt(hour, 10) < 12
      ? "morning"
      : parseInt(hour, 10) < 18
        ? "afternoon"
        : "evening";

  return (
    <div className="my-6 flex flex-col items-center">
      <h2 className="text-center text-20 font-semibold">
        {t("good")} {t(greeting)}, {user?.first_name} {user?.last_name}
      </h2>
      <h5 className="flex items-center gap-2 font-medium text-placeholder">
        <div>
          {greeting === "morning"
            ? "🌤️"
            : greeting === "afternoon"
              ? "🌥️"
              : "🌙️"}
        </div>
        <div>
          {weekDay}, {date} {timeString}
        </div>
      </h5>
    </div>
  );
}