import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { makePayment } from "@/lib/bkash.functions";
import { ActionScreen, FormCard, TextField, SubmitButton, useActionRunner } from "@/components/bkash/ActionScreen";

export const Route = createFileRoute("/_authenticated/pay-bill")({
  component: PayBillPage,
});

const BILLERS = ["DESCO", "DPDC", "NESCO", "WASA", "Titas Gas", "Banglalink Postpaid"];

function PayBillPage() {
  const [biller, setBiller] = useState(BILLERS[0]);
  const [account, setAccount] = useState("");
  const [amount, setAmount] = useState("");
  const [pin, setPin] = useState("");
  const fn = useServerFn(makePayment);
  const { loading, run } = useActionRunner();

  const amt = parseFloat(amount);
  const valid = account.trim().length > 2 && amt > 0 && /^\d{5}$/.test(pin);

  return (
    <ActionScreen title="পে বিল" subtitle="বিদ্যুৎ, গ্যাস, পানি বিল পরিশোধ">
      <FormCard>
        <label className="block">
          <span className="text-xs font-semibold text-muted-foreground">বিলার নির্বাচন</span>
          <div className="mt-1 grid grid-cols-2 gap-2">
            {BILLERS.map((b) => (
              <button type="button" key={b} onClick={() => setBiller(b)}
                className={`h-10 rounded-xl border text-xs font-semibold transition ${
                  biller === b ? "border-primary bg-primary/10 text-primary" : "border-input bg-background text-foreground/70"
                }`}>{b}</button>
            ))}
          </div>
        </label>
        <TextField label="অ্যাকাউন্ট / মিটার নম্বর" value={account} onChange={setAccount} placeholder="যেমন: 4456789" maxLength={20} />
        <TextField label="পরিমাণ" prefix="৳" value={amount}
          onChange={(v) => setAmount(v.replace(/[^\d.]/g, ""))} placeholder="0.00" inputMode="decimal" />
        <TextField label="৫ ডিজিটের পিন" value={pin}
          onChange={(v) => setPin(v.replace(/\D/g, "").slice(0, 5))}
          placeholder="• • • • •" inputMode="numeric" maxLength={5} type="password" />
        <SubmitButton
          disabled={!valid} loading={loading} label="বিল পরিশোধ করুন"
          onClick={() => run(() => fn({ data: { type: "pay_bill", amount: amt, reference: account, counterpartyName: `${biller} • ${account}`, pin } }), "বিল পরিশোধ সফল")}
        />
      </FormCard>
    </ActionScreen>
  );
}