"use client";

import { useEffect, useRef, useState } from "react";
import { AlarmClock } from "lucide-react";
import { getRemainingSeconds } from "@/lib/formatters/date";
import styles from "./CountdownTimer.module.css";

interface CountdownTimerProps {
  /** ISO 8601 deadline — sumber kebenaran waktu berasal dari server. */
  deadline: string;
  label?: string;
  onExpire?: () => void;
  className?: string;
  variant?: "default" | "exam";
}

function pad(n: number): string {
  return String(n).padStart(2, "0");
}

export default function CountdownTimer({
  deadline,
  label = "Sisa waktu",
  onExpire,
  className,
  variant = "default",
}: CountdownTimerProps) {
  const [remaining, setRemaining] = useState(() => getRemainingSeconds(deadline));
  const onExpireRef = useRef(onExpire);

  useEffect(() => {
    onExpireRef.current = onExpire;
  }, [onExpire]);

  useEffect(() => {
    const id = setInterval(() => {
      setRemaining((prev) => {
        const next = getRemainingSeconds(deadline);
        if (next <= 0 && prev > 0) {
          onExpireRef.current?.();
        }
        return next;
      });
    }, 1000);
    return () => clearInterval(id);
  }, [deadline]);

  const isExpired = remaining <= 0;
  const isUrgent = !isExpired && remaining <= 300; // < 5 mins for exam
  const hours = Math.floor(remaining / 3600);
  const minutes = Math.floor((remaining % 3600) / 60);
  const seconds = remaining % 60;

  if (variant === "exam") {
    return (
      <div
        className={`${styles.examCard} ${isUrgent ? styles.examUrgent : ""} ${isExpired ? styles.examExpired : ""} ${className ?? ""}`}
        role="timer"
        aria-live="polite"
      >
        <div className={styles.examIconBox}>
          <AlarmClock size={28} strokeWidth={2.2} aria-hidden />
        </div>
        <div className={styles.examTextBox}>
          <span className={styles.examLabel}>{label}</span>
          <span className={styles.examValue}>
            {isExpired ? "00:00:00" : `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`}
          </span>
        </div>
      </div>
    );
  }

  return (
    <div
      className={`${styles.wrapper} ${isUrgent ? styles.urgent : ""} ${isExpired ? styles.expired : ""} ${className ?? ""}`}
      role="timer"
      aria-live="polite"
    >
      <AlarmClock size={16} aria-hidden />
      <div className={styles.text}>
        <span className={styles.label}>{label}</span>
        <span className={styles.time}>
          {isExpired ? "Waktu habis" : `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`}
        </span>
      </div>
    </div>
  );
}