import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { ActionScreen, FormCard, TextField, SubmitButton } from "@/components/bkash/ActionScreen";
import { toast } from "sonner";
import { useAppSettings } from "@/hooks/useAppSettings";

export const Route = createFileRoute("/_authenticated/request-money")({
  component: RequestMoneyPage,
});

function RequestMoneyPage() {
  const [phone, setPhone] = useState("");
  const [amount, setAmount] = useState("");
  const [note, setNote] = useState("");
  const { settings } = useAppSettings();

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

  function send() {
    const msg = `${settings.app_name} রিকোয়েস্ট: ৳${amt} ${note ? "— " + note : ""}\nপাঠাতে ক্লিক করুন: ${phone} — ৳${amt}`;
    if (navigator.share) {
      navigator.share({ title: "Money Request", text: msg }).catch(() => {});
    } else {
      navigator.clipboard.writeText(msg);
      toast.success("রিকোয়েস্ট কপি হয়েছে");
    }
  }

  return (
    <ActionScreen title="রিকোয়েস্ট মানি" subtitle="অন্য ইউজারের কাছে টাকা চাইতে অনুরোধ পাঠান">
      <FormCard>
        <TextField label="যার কাছে চাইছেন (ফোন)" value={phone}
          onChange={(v) => setPhone(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" />
        <TextField label="কারণ (ঐচ্ছিক)" value={note} onChange={setNote} placeholder="যেমন: বইয়ের দাম" maxLength={120} />
        <SubmitButton disabled={!valid} label="রিকোয়েস্ট শেয়ার করুন" onClick={send} />
      </FormCard>
      <p className="text-center text-xs text-muted-foreground mt-4">
        রিকোয়েস্ট এসএমএস/মেসেঞ্জারে শেয়ার হবে। প্রাপক বিকাশ অ্যাপে এসে সেন্ড মানি করবেন।
      </p>
    </ActionScreen>
  );
}