"use client";

import { Banknote, ShieldCheck, Zap } from "lucide-react";
import { useRouter } from "next/navigation";
import { Container } from "@/components/common/Container";
import { CalculatorWidget } from "@/components/calculator/CalculatorWidget";
import type { CalculatorContinueParams } from "@/components/calculator/CalculatorWidget";
import { Card, CardContent } from "@/components/common/Card";
import { PageHero } from "@/components/common/PageHero";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";
import { useCurrencyInfo } from "@/hooks/queries/useSettings";
import { sendRemittanceApi } from "@/api/sendRemittance.api";
import type { TransferMethod } from "@/types";

const TX_TYPE_SLUG: Record<TransferMethod, string> = {
  bank: "bank-transfer",
  cash: "cash-pickup",
  mobile: "mobile_money",
};

export default function CalculatorPage() {
  const { t } = useTranslation();
  const router = useRouter();
  const { data: apiData } = useCurrencyInfo();

  async function handleContinue({ sendAmount, from, to, method, coupon }: CalculatorContinueParams) {
    if (!apiData) {
      router.push("/send");
      return;
    }
    const senderCur = apiData.sender_currency.find((c) => c.code === from);
    const receiverCur = apiData.receiver_currency.find((c) => c.code === to);
    const slug = TX_TYPE_SLUG[method];
    const txType = apiData.transaction_type.find((tx) => tx.slug === slug) ?? apiData.transaction_type[0];
    if (!senderCur || !receiverCur || !txType) { router.push("/send"); return; }
    try {
      const data = (await sendRemittanceApi.store({
        type: txType.title,
        send_money: sendAmount,
        sender_currency: senderCur.id,
        receiver_currency: receiverCur.id,
        ...(coupon ? { coupon } : {}),
      })) as { temporary_data?: { identifier?: string } };
      const identifier: string = data?.temporary_data?.identifier ?? "";
      if (identifier) localStorage.setItem("send_identifier", identifier);
      router.push("/send?step=2");
    } catch {
      router.push("/send");
    }
  }

  const perks = [
    { icon: Zap, title: t("rates.feature1Title"), desc: t("rates.feature1Desc") },
    { icon: Banknote, title: t("rates.feature2Title"), desc: t("rates.feature2Desc") },
    { icon: ShieldCheck, title: t("rates.feature3Title"), desc: t("rates.feature3Desc") },
  ];

  return (
    <>
      <PageHero
        eyebrow={t("nav.calculator")}
        title={t("calculator.pageTitle")}
        subtitle={t("calculator.pageSubtitle")}
      />

      <section className="section-tight">
        <Container>
          <Reveal className="relative mx-auto max-w-2xl">
            <div
              aria-hidden
              className="absolute -inset-6 -z-10 rounded-[2.5rem] bg-gradient-to-br from-brand-500/15 via-accent-500/8 to-transparent blur-2xl"
            />
            <CalculatorWidget variant="full" apiData={apiData} onContinue={apiData ? handleContinue : undefined} />
          </Reveal>

          <div className="mx-auto mt-20 grid max-w-5xl gap-5 sm:gap-6 md:grid-cols-3">
            {perks.map((perk, idx) => (
              <Reveal key={perk.title} delay={idx * 0.05}>
                <Card interactive className="group relative overflow-hidden">
                  <div
                    aria-hidden
                    className="pointer-events-none absolute -top-10 -right-10 h-44 w-44 rounded-full bg-gradient-to-br from-brand-500/5 to-accent-500/0 blur-xl transition-all duration-500 group-hover:from-brand-500/40 group-hover:to-accent-500/25 group-hover:scale-110"
                  />
                  <CardContent>
                    <div className="grid h-11 w-11 place-items-center rounded-xl bg-gradient-to-br from-brand-50 to-brand-100 text-brand-600 transition-transform duration-300 group-hover:scale-105 dark:from-brand-500/15 dark:to-brand-500/5 dark:text-brand-300">
                      <perk.icon className="h-5 w-5" />
                    </div>
                    <h3 className="mt-5 text-base font-bold text-slate-900 dark:text-white">
                      {perk.title}
                    </h3>
                    <p className="mt-2 text-base leading-[1.7] text-slate-600 dark:text-slate-300">
                      {perk.desc}
                    </p>
                  </CardContent>
                </Card>
              </Reveal>
            ))}
          </div>
        </Container>
      </section>
    </>
  );
}