"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useI18n } from "@/lib/i18n/context";
import { getSessionUser } from "@/lib/auth/sessionClient";
import { LAUNCH_CLAIM_LIMIT } from "@/lib/limits";

interface LaunchSpecialBannerProps {
  claimed: number;
}

/**
 * Countdown-Banner für das Launch-Special ("erste 500 Registrierungen bekommen
 * 100 Gratis-Scans"). Versteckt sich, sobald der Nutzer bereits Pro ist oder
 * seinen Bonus hat.
 */
export function LaunchSpecialBanner({ claimed }: LaunchSpecialBannerProps) {
  const { t } = useI18n();
  const [hidden, setHidden] = useState(false);

  useEffect(() => {
    let mounted = true;
    getSessionUser()
      .then((user) => {
        if (mounted && (user?.isPro || user?.launchBonus)) setHidden(true);
      })
      .catch(() => {});
    return () => {
      mounted = false;
    };
  }, []);

  if (hidden) return null;

  const total = LAUNCH_CLAIM_LIMIT;
  const soldOut = claimed >= total;
  const percent = Math.min(100, Math.round((claimed / total) * 100));

  return (
    <div className="relative z-30 bg-[#0B0F14] text-white border-b border-white/10">
      <div className="mx-auto max-w-[1440px] px-4 sm:px-8 py-3 flex flex-col sm:flex-row items-center gap-3">
        <span className="font-mono text-[10px] uppercase tracking-widest px-2 py-0.5 bg-amber-400 text-black font-bold shrink-0">
          {t.launch.badge}
        </span>

        <div className="flex-1 min-w-0 text-center sm:text-left">
          <p className="text-sm font-semibold leading-snug">{t.launch.title}</p>
          <p className="text-xs text-white/60">{t.launch.subtitle}</p>
        </div>

        <div className="flex items-center gap-3 shrink-0">
          <div className="hidden md:block w-40">
            <div className="flex justify-between font-mono text-[10px] uppercase tracking-caps text-white/60 mb-1">
              <span>
                {t.launch.claimed} {claimed}/{total}
              </span>
              <span>{percent}%</span>
            </div>
            <div className="h-1.5 bg-white/15">
              <div
                className="h-full bg-amber-400 transition-all duration-700"
                style={{ width: `${percent}%` }}
              />
            </div>
          </div>

          {soldOut ? (
            <span className="inline-flex items-center font-mono text-xs uppercase tracking-caps px-4 py-2 text-white/70 font-bold">
              {t.launch.allClaimed}
            </span>
          ) : (
            <Link
              href="/auth/signup"
              className="inline-flex items-center gap-1.5 bg-white text-black font-mono text-xs uppercase tracking-caps px-4 py-2 hover:bg-amber-400 transition-colors font-bold"
            >
              {t.launch.cta}
            </Link>
          )}
        </div>
      </div>
    </div>
  );
}