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/cash-out")({
  component: CashOutPage,
});

function CashOutPage() {
  const [agent, setAgent] = useState("");
  const [amount, setAmount] = useState("");
  const [pin, setPin] = useState("");
  const fn = useServerFn(makePayment);
  const { loading, run } = useActionRunner();

  const amt = parseFloat(amount);
  const valid = /^01\d{9}$/.test(agent) && amt > 0 && /^\d{5}$/.test(pin);
  const fee = amt > 0 ? Math.max(5, Math.round(amt * 0.0185 * 100) / 100) : 0;
  const total = amt > 0 ? amt + fee : 0;

  return (
    <ActionScreen title="ক্যাশ আউট" subtitle="এজেন্টের কাছে গিয়ে টাকা তুলুন" color="destructive">
      <FormCard>
        <TextField label="এজেন্ট নম্বর" value={agent}
          onChange={(v) => setAgent(v.replace(/\D/g, "").slice(0, 11))}
          placeholder="01XXXXXXXXX" inputMode="numeric" maxLength={11} />
        <TextField label="পরিমাণ" prefix="৳" value={amount}
          onChange={(v) => setAmount(v.replace(/[^\d.]/g, ""))} placeholder="0.00" inputMode="decimal" />

        {amt > 0 && (
          <div className="rounded-xl bg-muted p-3 text-sm space-y-1">
            <Row label="পরিমাণ" value={`৳${amt.toLocaleString()}`} />
            <Row label="ক্যাশ আউট ফি (১.৮৫%)" value={`৳${fee.toLocaleString()}`} />
            <div className="border-t border-border my-1" />
            <Row label="মোট" value={`৳${total.toLocaleString()}`} bold />
          </div>
        )}

        <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}
          color="destructive"
          label="ক্যাশ আউট"
          onClick={() => run(() => fn({ data: { type: "cash_out", amount: amt, reference: agent, counterpartyName: "Agent " + agent.slice(-4), pin } }), "ক্যাশ আউট সফল")}
        />
      </FormCard>
    </ActionScreen>
  );
}

function Row({ label, value, bold }: { label: string; value: string; bold?: boolean }) {
  return (
    <div className={`flex justify-between ${bold ? "font-bold text-foreground" : "text-muted-foreground"}`}>
      <span>{label}</span><span className="tabular-nums">{value}</span>
    </div>
  );
}