import { createFileRoute } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { listMyTransactions } from "@/lib/bkash.functions";
import { ActionScreen } from "@/components/bkash/ActionScreen";
import { Inbox as InboxIcon, ArrowDownLeft, ArrowUpRight } from "lucide-react";

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

function InboxPage() {
  const listTx = useServerFn(listMyTransactions);
  const q = useQuery({ queryKey: ["transactions"], queryFn: () => listTx() });
  const items = q.data ?? [];

  return (
    <ActionScreen title="ইনবক্স" subtitle="লেনদেনের নোটিফিকেশন">
      {items.length === 0 && (
        <div className="bg-card rounded-2xl p-10 text-center shadow-[var(--shadow-card)]">
          <InboxIcon className="h-10 w-10 mx-auto text-muted-foreground/50" />
          <p className="mt-3 text-sm text-muted-foreground">কোনো নোটিফিকেশন নেই</p>
        </div>
      )}
      <div className="bg-card rounded-2xl shadow-[var(--shadow-card)] divide-y divide-border">
        {items.slice(0, 30).map((t: any) => {
          const isIn = t.type === "received" || t.type === "add_money";
          const Icon = isIn ? ArrowDownLeft : ArrowUpRight;
          return (
            <div key={t.id} className="flex items-start gap-3 p-4">
              <div className={`h-10 w-10 rounded-full flex items-center justify-center shrink-0 ${isIn ? "bg-success/10" : "bg-accent"}`}>
                <Icon className={`h-4 w-4 ${isIn ? "text-success" : "text-primary"}`} />
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-semibold">
                  {isIn ? "টাকা গ্রহণ" : "টাকা পাঠানো হয়েছে"} • ৳{Number(t.amount).toLocaleString()}
                </p>
                <p className="text-xs text-muted-foreground truncate">
                  {t.counterparty_name ?? t.reference ?? "—"} • {new Date(t.created_at).toLocaleString("en-GB", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })}
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </ActionScreen>
  );
}