"use client";

import { useEffect, useState } from "react";
import { AlertTriangle, X } from "lucide-react";

interface TrialInfo {
  status: string;
  trialStartedAt: string | null;
  trialDays: number;
  daysRemaining: number;
  expired: boolean;
}

export function TrialExpiryBanner() {
  const [trialInfo, setTrialInfo] = useState<TrialInfo | null>(null);
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    fetch("/api/user/trial-info")
      .then((res) => res.json())
      .then((data) => setTrialInfo(data))
      .catch(() => {});
  }, []);

  if (dismissed || !trialInfo) return null;

  // Not trialing — nothing to show
  if (trialInfo.status !== "TRIALING" && trialInfo.status !== "PAST_DUE") return null;

  const isPastDue = trialInfo.status === "PAST_DUE" || trialInfo.expired;

  return (
    <div className={`relative px-4 py-3 text-sm ${isPastDue ? "bg-red-600 text-white" : "bg-amber-500 text-black"}`}>
      <div className="flex items-center justify-center gap-2 pr-8">
        <AlertTriangle size={16} />
        {isPastDue ? (
          <span>
            Your trial has expired.{" "}
            <a href="/dashboard/billing" className="underline font-semibold hover:no-underline">
              Upgrade now
            </a>{" "}
            to resume your instances.
          </span>
        ) : (
          <span>
            You have <strong>{trialInfo.daysRemaining} day{trialInfo.daysRemaining !== 1 ? "s" : ""}</strong> left in
            your free trial.{" "}
            <a href="/dashboard/billing" className="underline font-semibold hover:no-underline">
              Upgrade here
            </a>{" "}
            to keep running after it ends.
          </span>
        )}
      </div>
      <button
        onClick={() => setDismissed(true)}
        className="absolute right-2 top-1/2 -translate-y-1/2 opacity-70 hover:opacity-100"
        aria-label="Dismiss"
      >
        <X size={16} />
      </button>
    </div>
  );
}