"use client";

import {
  Receipt,
  Banknote,
  TrendingUp,
  CreditCard,
  Building2,
  Wallet,
  type LucideIcon,
} from "lucide-react";
import { Container } from "@/components/common/Container";
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 { formatCurrency } from "@/lib/utils";

export default function PricingPage() {
  const { t } = useTranslation();

  const components: { icon: LucideIcon; title: string; desc: string }[] = [
    { icon: Receipt, title: t("pricing.component1Title"), desc: t("pricing.component1Desc") },
    { icon: Banknote, title: t("pricing.component2Title"), desc: t("pricing.component2Desc") },
    { icon: TrendingUp, title: t("pricing.component3Title"), desc: t("pricing.component3Desc") },
  ];

  const payments: { icon: LucideIcon; label: string; desc: string }[] = [
    { icon: Building2, label: "Bank account", desc: "0% — best rate" },
    { icon: CreditCard, label: "Debit card", desc: "+0.5% — instant" },
    { icon: Wallet, label: "Credit card", desc: "+1.5% — fastest" },
  ];

  // Sample transfer
  const send = 500;
  const fee = send * 0.008;
  const serviceCharge = 1.99;
  const total = send + fee + serviceCharge;
  const rate = 109.85;
  const recipientGets = (send - fee) * rate;

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

      {/* Fee components */}
      <section className="section">
        <Container>
          <Reveal className="mx-auto max-w-3xl text-center">
            <h2 className="text-display-md tracking-tight text-slate-900 dark:text-white sm:text-display-lg">
              {t("pricing.feeTitle")}
            </h2>
            <p className="mt-4 text-base leading-[1.7] text-slate-600 dark:text-slate-300 sm:text-lg">
              {t("pricing.feeIntro")}
            </p>
          </Reveal>

          <div className="mt-14 grid gap-6 lg:grid-cols-3">
            {components.map((c, idx) => (
              <Reveal key={c.title} delay={idx * 0.05}>
                <Card interactive className="group h-full">
                  <CardContent>
                    <div className="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-white shadow-soft transition-transform duration-300 group-hover:-rotate-3 group-hover:scale-105">
                      <c.icon className="h-5 w-5" />
                    </div>
                    <h3 className="mt-6 text-lg font-bold tracking-tight text-slate-900 dark:text-white">
                      {c.title}
                    </h3>
                    <p className="mt-2 text-base leading-[1.7] text-slate-600 dark:text-slate-300">
                      {c.desc}
                    </p>
                  </CardContent>
                </Card>
              </Reveal>
            ))}
          </div>
        </Container>
      </section>

      {/* Payment methods */}
      <section className="section-tight bg-slate-50/50 dark:bg-white/[0.02]">
        <Container>
          <Reveal className="mx-auto max-w-3xl text-center">
            <h2 className="text-display-md tracking-tight text-slate-900 dark:text-white sm:text-display-lg">
              {t("pricing.paymentTitle")}
            </h2>
            <p className="mt-4 text-base leading-[1.7] text-slate-600 dark:text-slate-300 sm:text-lg">
              {t("pricing.paymentDesc")}
            </p>
          </Reveal>

          <div className="mt-12 grid gap-4 sm:grid-cols-3">
            {payments.map((p, idx) => (
              <Reveal key={p.label} delay={idx * 0.05}>
                <Card interactive className="group h-full">
                  <CardContent className="flex items-center gap-4">
                    <div className="grid h-11 w-11 shrink-0 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">
                      <p.icon className="h-5 w-5" />
                    </div>
                    <div>
                      <p className="text-sm font-bold text-slate-900 dark:text-white">
                        {p.label}
                      </p>
                      <p className="text-xs text-slate-500 dark:text-slate-400">{p.desc}</p>
                    </div>
                  </CardContent>
                </Card>
              </Reveal>
            ))}
          </div>
        </Container>
      </section>

      {/* Sample */}
      <section className="section-tight">
        <Container>
          <div className="mx-auto max-w-2xl">
            <Reveal className="text-center">
              <h2 className="text-display-md tracking-tight text-slate-900 dark:text-white sm:text-display-lg">
                {t("pricing.sampleTitle")}
              </h2>
              <p className="mt-4 text-base leading-[1.7] text-slate-600 dark:text-slate-300 sm:text-lg">
                {t("pricing.sampleSubtitle")}
              </p>
            </Reveal>

            <Reveal delay={0.1} className="mt-10">
              <Card className="shadow-elevated">
                <CardContent className="space-y-4 p-7 sm:p-10">
                <Row label={t("calculator.youSend")} value={formatCurrency(send, "USD")} />
                <Row label={t("calculator.transferFee")} value={`+ ${formatCurrency(fee, "USD")}`} />
                <Row
                  label={t("calculator.serviceCharge")}
                  value={`+ ${formatCurrency(serviceCharge, "USD")}`}
                />
                <div className="border-t border-slate-200 pt-4 dark:border-slate-800">
                  <Row
                    label={t("calculator.totalToPay")}
                    value={formatCurrency(total, "USD")}
                    bold
                  />
                </div>
                <Row
                  label={t("calculator.exchangeRate")}
                  value={`1 USD = ${rate.toFixed(2)} BDT`}
                  muted
                />
                <div className="rounded-2xl bg-gradient-to-br from-brand-50 to-accent-50 p-4 dark:from-brand-500/10 dark:to-accent-500/10">
                  <Row
                    label={t("calculator.recipientGets")}
                    value={formatCurrency(recipientGets, "BDT")}
                    bold
                    highlight
                  />
                </div>
                </CardContent>
              </Card>
            </Reveal>
          </div>
        </Container>
      </section>
    </>
  );
}

function Row({
  label,
  value,
  bold,
  muted,
  highlight,
}: {
  label: string;
  value: string;
  bold?: boolean;
  muted?: boolean;
  highlight?: boolean;
}) {
  return (
    <div className="flex items-center justify-between">
      <span
        className={
          muted
            ? "text-sm text-slate-500 dark:text-slate-400"
            : "text-sm text-slate-700 dark:text-slate-300"
        }
      >
        {label}
      </span>
      <span
        className={
          bold
            ? `text-base font-bold tabular-nums ${highlight ? "text-brand-700 dark:text-brand-300" : "text-slate-900 dark:text-white"}`
            : "text-sm tabular-nums text-slate-900 dark:text-slate-100"
        }
      >
        {value}
      </span>
    </div>
  );
}