"use client";

import { useState } from "react";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { useDiskId } from "@/hooks/useDiskId";
import { createPreference } from "@/lib/afc";
import { DiskIdInput } from "@/components/afc/DiskIdInput";
import { BalanceDisplay } from "@/components/afc/BalanceDisplay";
import { AfcPackageCard } from "@/components/afc/AfcPackageCard";

const PRICE_PER_AFC = 15;

const PACKAGES = [
  { amount: 10, popular: false },
  { amount: 25, popular: true },
  { amount: 50, popular: false },
  { amount: 100, popular: false },
];

export default function BuyAfcPage() {
  const t = useTranslations("afc");
  const locale = useLocale();
  const disk = useDiskId();
  const [customAmount, setCustomAmount] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleBuy(amount: number) {
    if (!disk.verified || !disk.diskId) return;
    setLoading(true);
    setError(null);
    try {
      const data = await createPreference(disk.diskId, amount);
      // Redirect to MercadoPago checkout
      window.location.href = data.initPoint;
    } catch (e: any) {
      setError(e.message);
      setLoading(false);
    }
  }

  return (
    <div className="max-w-3xl mx-auto px-4 py-12">
      {/* Back */}
      <Link
        href={`/${locale}/afc`}
        className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-300 transition-colors mb-8"
      >
        ← {t("back_to_store")}
      </Link>

      <h1 className="text-3xl font-bold mb-2">{t("buy_title")}</h1>
      <p className="text-gray-400 mb-8">{t("buy_subtitle")}</p>

      {/* Disk ID */}
      <div className="mb-8">
        <DiskIdInput
          diskId={disk.diskId}
          onChange={disk.setDiskId}
          onVerify={() => disk.verify(disk.diskId)}
          loading={disk.loading}
          verified={disk.verified}
          playerName={disk.playerName}
          error={disk.error}
          onClear={disk.clear}
        />
      </div>

      {disk.verified && (
        <>
          {/* Balance */}
          <div className="mb-8">
            <BalanceDisplay balance={disk.balance} compact />
          </div>

          {/* Packages */}
          <div className="space-y-3 mb-8">
            <h2 className="text-lg font-semibold text-white mb-4">{t("select_package")}</h2>
            {PACKAGES.map((pkg) => (
              <AfcPackageCard
                key={pkg.amount}
                amount={pkg.amount}
                priceMxn={pkg.amount * PRICE_PER_AFC}
                popular={pkg.popular}
                loading={loading}
                onSelect={() => handleBuy(pkg.amount)}
              />
            ))}
          </div>

          {/* Custom amount */}
          <div className="bg-gray-900 border border-white/5 rounded-2xl p-6">
            <h3 className="text-sm font-medium text-gray-400 mb-3">{t("custom_amount")}</h3>
            <div className="flex gap-3">
              <div className="flex-1 relative">
                <input
                  type="number"
                  min="1"
                  value={customAmount}
                  onChange={(e) => setCustomAmount(e.target.value)}
                  placeholder="AFC"
                  className="w-full bg-gray-800 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-gray-600 focus:outline-none focus:border-amber-500/50 transition-all"
                />
                {customAmount && Number(customAmount) > 0 && (
                  <span className="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-gray-500">
                    = ${Number(customAmount) * PRICE_PER_AFC} MXN
                  </span>
                )}
              </div>
              <button
                onClick={() => {
                  const amt = Number(customAmount);
                  if (amt >= 1) handleBuy(amt);
                }}
                disabled={loading || !customAmount || Number(customAmount) < 1}
                className="px-6 py-3 bg-amber-500 hover:bg-amber-400 disabled:bg-gray-700 disabled:text-gray-500 text-black font-semibold rounded-xl transition-colors"
              >
                {t("buy")}
              </button>
            </div>
          </div>

          {error && (
            <div className="mt-4 bg-red-500/10 border border-red-500/30 rounded-xl p-4 text-sm text-red-400">
              {error}
            </div>
          )}

          {/* Payment info */}
          <p className="mt-6 text-xs text-gray-600 text-center">
            {t("payment_info")}
          </p>
        </>
      )}
    </div>
  );
}