import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { useQueryClient } from "@tanstack/react-query";
import { fetchOffers, executeRecharge } from "@/lib/recharge.functions";
import { ActionScreen, FormCard, TextField, SubmitButton } from "@/components/bkash/ActionScreen";
import { Sparkles, Loader2, X, Check, Clock, History } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/_authenticated/recharge")({
  component: RechargePage,
});

const OPERATORS = ["Grameenphone", "Robi", "Banglalink", "Airtel", "Teletalk"] as const;
type Operator = typeof OPERATORS[number];

const NUMBER_TYPES = [
  { value: "1", label: "প্রিপেইড" },
  { value: "2", label: "পোস্টপেইড" },
  { value: "3", label: "স্কিটো" },
];

const OPERATOR_COLORS: Record<Operator, string> = {
  Grameenphone: "bg-blue-500",
  Robi: "bg-red-500",
  Banglalink: "bg-orange-500",
  Airtel: "bg-rose-600",
  Teletalk: "bg-emerald-600",
};

type Offer = {
  id: string;
  operator: string;
  title: string;
  amount: number;
  validity: string;
  description: string;
};

function RechargePage() {
  const [phone, setPhone] = useState("");
  const [amount, setAmount] = useState("");
  const [op, setOp] = useState<Operator>(OPERATORS[0]);
  const [numberType, setNumberType] = useState<"1" | "2" | "3">("1");
  const [pin, setPin] = useState("");
  const [pickedOffer, setPickedOffer] = useState<Offer | null>(null);

  const [offersOpen, setOffersOpen] = useState(false);
  const [offers, setOffers] = useState<Offer[]>([]);
  const [offersLoading, setOffersLoading] = useState(false);

  const [submitting, setSubmitting] = useState(false);

  const offersFn = useServerFn(fetchOffers);
  const rechargeFn = useServerFn(executeRecharge);
  const qc = useQueryClient();
  const navigate = useNavigate();

  const phoneValid = /^01\d{9}$/.test(phone);
  const amt = parseFloat(amount);
  const canSubmit = phoneValid && amt > 0 && /^\d{5}$/.test(pin);

  const openOffers = async () => {
    if (!phoneValid) {
      toast.error("সঠিক ১১ ডিজিটের নম্বর দিন");
      return;
    }
    setOffersOpen(true);
    setOffersLoading(true);
    setOffers([]);
    try {
      const res = await offersFn({ data: { operator: op, numberType } });
      setOffers(res.offers);
      if (!res.offers.length) toast("এই অপারেটরের জন্য কোনো অফার পাওয়া যায়নি");
    } catch (e: any) {
      toast.error(e?.message ?? "অফার লোড ব্যর্থ");
    } finally {
      setOffersLoading(false);
    }
  };

  const pickOffer = (o: Offer) => {
    setPickedOffer(o);
    setAmount(String(o.amount));
    setOffersOpen(false);
  };

  const doRecharge = async () => {
    setSubmitting(true);
    try {
      const res = await rechargeFn({
        data: {
          operator: op,
          numberType,
          number: phone,
          amount: amt,
          pin,
          offerTitle: pickedOffer?.title,
        },
      });
      qc.invalidateQueries({ queryKey: ["profile"] });
      qc.invalidateQueries({ queryKey: ["transactions"] });
      toast.success(`রিচার্জ সফল • নতুন ব্যালেন্স ৳${Number(res.new_balance ?? 0).toLocaleString()}`);
      navigate({ to: "/" });
    } catch (e: any) {
      toast.error(e?.message ?? "রিচার্জ ব্যর্থ");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <ActionScreen title="মোবাইল রিচার্জ" subtitle="যেকোনো অপারেটরে রিচার্জ করুন">
      <FormCard>
        <TextField
          label="মোবাইল নম্বর"
          value={phone}
          onChange={(v) => {
            setPhone(v.replace(/\D/g, "").slice(0, 11));
            setPickedOffer(null);
          }}
          placeholder="01XXXXXXXXX"
          inputMode="numeric"
          maxLength={11}
        />

        <label className="block">
          <span className="text-xs font-semibold text-muted-foreground">অপারেটর</span>
          <div className="mt-1 grid grid-cols-3 gap-2">
            {OPERATORS.map((o) => (
              <button
                type="button"
                key={o}
                onClick={() => { setOp(o); setPickedOffer(null); }}
                className={`h-11 rounded-xl border text-xs font-semibold transition flex items-center justify-center gap-1.5 ${
                  op === o ? "border-primary bg-primary/10 text-primary" : "border-input bg-background text-foreground/70"
                }`}
              >
                <span className={`h-2 w-2 rounded-full ${OPERATOR_COLORS[o]}`} />
                {o}
              </button>
            ))}
          </div>
        </label>

        <label className="block">
          <span className="text-xs font-semibold text-muted-foreground">কানেকশন টাইপ</span>
          <div className="mt-1 grid grid-cols-3 gap-2">
            {NUMBER_TYPES.map((n) => (
              <button
                type="button"
                key={n.value}
                onClick={() => setNumberType(n.value as any)}
                className={`h-10 rounded-xl border text-xs font-semibold transition ${
                  numberType === n.value ? "border-primary bg-primary/10 text-primary" : "border-input bg-background text-foreground/70"
                }`}
              >
                {n.label}
              </button>
            ))}
          </div>
        </label>

        {/* Offers button above amount */}
        <button
          type="button"
          onClick={openOffers}
          className="w-full h-11 rounded-xl border-2 border-dashed border-primary/40 bg-primary/5 text-primary text-sm font-bold flex items-center justify-center gap-2 hover:bg-primary/10 transition"
        >
          <Sparkles className="h-4 w-4" />
          অফার দেখুন
        </button>

        {pickedOffer && (
          <div className="rounded-xl bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-800 p-3 flex items-start gap-3">
            <div className="h-8 w-8 rounded-lg bg-emerald-500 text-white grid place-items-center shrink-0">
              <Check className="h-4 w-4" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-bold truncate">{pickedOffer.title}</p>
              <p className="text-[11px] text-muted-foreground line-clamp-2">{pickedOffer.description}</p>
            </div>
            <button
              onClick={() => { setPickedOffer(null); setAmount(""); }}
              className="h-7 w-7 rounded-lg grid place-items-center hover:bg-black/5"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        )}

        <TextField
          label="পরিমাণ"
          prefix="৳"
          value={amount}
          onChange={(v) => { setAmount(v.replace(/[^\d.]/g, "")); setPickedOffer(null); }}
          placeholder="0.00"
          inputMode="decimal"
        />

        <div className="flex gap-2 flex-wrap">
          {[20, 50, 100, 200, 500, 1000].map((p) => (
            <button
              key={p}
              type="button"
              onClick={() => { setAmount(String(p)); setPickedOffer(null); }}
              className="px-3 h-8 rounded-full bg-muted text-xs font-semibold text-foreground/70 hover:bg-primary/10 hover:text-primary"
            >
              ৳{p}
            </button>
          ))}
        </div>

        <TextField
          label="৫ ডিজিটের পিন"
          value={pin}
          onChange={(v) => setPin(v.replace(/\D/g, "").slice(0, 5))}
          placeholder="• • • • •"
          inputMode="numeric"
          maxLength={5}
          type="password"
        />

        <SubmitButton
          disabled={!canSubmit}
          loading={submitting}
          label={pickedOffer ? `অফার কিনুন • ৳${amt}` : "রিচার্জ করুন"}
          onClick={doRecharge}
        />

        <Link
          to="/recharge-history"
          className="w-full h-11 rounded-xl border border-input text-sm font-semibold flex items-center justify-center gap-2 hover:bg-muted"
        >
          <History className="h-4 w-4" />
          রিচার্জ হিস্ট্রি
        </Link>
      </FormCard>

      {/* Offers sheet */}
      {offersOpen && (
        <div
          className="fixed inset-0 z-50 bg-black/50 flex items-end justify-center"
          onClick={() => setOffersOpen(false)}
        >
          <div
            className="bg-background w-full max-w-[480px] rounded-t-3xl max-h-[85vh] flex flex-col"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="px-4 pt-3 pb-2 border-b flex items-center justify-between">
              <div>
                <p className="text-sm font-bold">{op} অফার</p>
                <p className="text-[11px] text-muted-foreground">{phone}</p>
              </div>
              <button
                onClick={() => setOffersOpen(false)}
                className="h-8 w-8 rounded-full grid place-items-center hover:bg-muted"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            <div className="flex-1 overflow-auto p-3 space-y-2">
              {offersLoading ? (
                <div className="py-16 grid place-items-center">
                  <Loader2 className="h-6 w-6 animate-spin text-primary" />
                  <p className="text-xs text-muted-foreground mt-2">অফার লোড হচ্ছে…</p>
                </div>
              ) : offers.length === 0 ? (
                <div className="py-16 text-center text-sm text-muted-foreground">
                  কোনো অফার পাওয়া যায়নি
                </div>
              ) : (
                offers.map((o) => (
                  <button
                    key={o.id}
                    onClick={() => pickOffer(o)}
                    className="w-full text-left rounded-2xl border p-3 hover:border-primary hover:bg-primary/5 transition flex gap-3 items-center"
                  >
                    <div className={`h-12 w-12 rounded-xl grid place-items-center text-white font-bold text-sm shrink-0 ${OPERATOR_COLORS[op]}`}>
                      ৳{o.amount}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-bold truncate">{o.title}</p>
                      {o.description && (
                        <p className="text-[11px] text-muted-foreground line-clamp-2">{o.description}</p>
                      )}
                      {o.validity && (
                        <p className="text-[10px] text-muted-foreground mt-0.5 flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {o.validity}
                        </p>
                      )}
                    </div>
                    <div className="text-primary text-xs font-bold shrink-0">কিনুন →</div>
                  </button>
                ))
              )}
            </div>
            <div className="p-3 border-t text-[11px] text-muted-foreground text-center">
              অফারে ক্লিক করলে পরিমাণ বসবে, পিন দিয়ে কিনুন
            </div>
          </div>
        </div>
      )}
    </ActionScreen>
  );
}