import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { AlertCircle } from "lucide-react";
import { Link } from "react-router-dom";

interface UnpaidOrderAlertProps {
  orderId: string;
  expiresAt: string; // ISO timestamp
}

export function UnpaidOrderAlert({ orderId, expiresAt }: UnpaidOrderAlertProps) {
  // Non-dismissable alert - NO onDismiss prop
  // Alert will auto-hide when QR expires via Dashboard logic

  const formatExpiryTime = (isoString: string) => {
    try {
      return new Date(isoString).toLocaleTimeString('id-ID', {
        hour: '2-digit',
        minute: '2-digit'
      });
    } catch {
      return isoString;
    }
  };

  return (
    <Alert className="bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200 border-2">
      <div className="flex items-start gap-3">
        <div className="bg-orange-100 p-2 rounded-full flex-shrink-0">
          <AlertCircle className="w-5 h-5 text-orange-600" />
        </div>

        <div className="flex-1">
          <h4 className="font-semibold text-orange-900 mb-1 flex items-center gap-2">
            Pembayaran Belum Selesai
            <span className="text-xs bg-orange-200 text-orange-800 px-2 py-0.5 rounded">
              Segera
            </span>
          </h4>
          <AlertDescription className="text-orange-700">
            Anda memiliki pesanan konsultasi yang menunggu pembayaran. QRIS kode akan kedaluwarsa pada{" "}
            <strong>{formatExpiryTime(expiresAt)}</strong>.
          </AlertDescription>

          <Button
            asChild
            size="sm"
            className="mt-3 bg-orange-600 hover:bg-orange-700 text-white shadow-md"
          >
            <Link to={`/orders/${orderId}`}>
              Lihat & Bayar Sekarang →
            </Link>
          </Button>
        </div>
      </div>
    </Alert>
  );
}