"use client";

import { Zap, FileBarChart, Ticket, type LucideIcon } from "lucide-react";
import { Container } from "@/components/common/Container";
import { SectionHeading } from "@/components/common/SectionHeading";
import { Card, CardContent } from "@/components/common/Card";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";
import { useCurrencyInfo } from "@/hooks/queries/useSettings";
import { formatNumber } from "@/lib/utils";

type Feature = { icon: LucideIcon; titleKey: string; descKey: string };

const FEATURES: Feature[] = [
  { icon: Zap, titleKey: "rates.feature1Title", descKey: "rates.feature1Desc" },
  { icon: FileBarChart, titleKey: "rates.feature2Title", descKey: "rates.feature2Desc" },
  { icon: Ticket, titleKey: "rates.feature3Title", descKey: "rates.feature3Desc" },
];

// Featured pair for the live-rate card — falls back to the first available
// sender/receiver currency if this exact pair isn't in the public API response.
const RATE_SENDER_CODE = "USD";
const RATE_RECEIVER_CODE = "BDT";
const RATE_TX_SLUG = "bank-transfer";

export function RatesAndFees() {
  const { t } = useTranslation();
  const { data: apiData } = useCurrencyInfo();

  const senderCur =
    apiData?.sender_currency.find((c) => c.code === RATE_SENDER_CODE) ?? apiData?.sender_currency[0];
  const receiverCur =
    apiData?.receiver_currency.find((c) => c.code === RATE_RECEIVER_CODE) ?? apiData?.receiver_currency[0];
  const txType =
    apiData?.transaction_type.find((tx) => tx.slug === RATE_TX_SLUG) ?? apiData?.transaction_type[0];

  const rate =
    senderCur && receiverCur ? parseFloat(receiverCur.rate) / parseFloat(senderCur.rate) : null;

  return (
    <section className="section">
      <Container>
        <div className="grid items-center gap-14 lg:grid-cols-2 lg:gap-20">
          {/* Left: copy + features */}
          <div>
            <SectionHeading
              eyebrow={t("rates.eyebrow")}
              title={t("rates.title")}
              subtitle={t("rates.subtitle")}
              align="left"
            />
            <ul className="mt-10 space-y-5">
              {FEATURES.map((f) => {
                const Icon = f.icon;
                return (
                  <li key={f.titleKey} className="group flex items-start gap-4">
                    <span 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">
                      <Icon className="h-5 w-5" />
                    </span>
                    <div>
                      <h3 className="text-base font-semibold tracking-tight text-slate-900 dark:text-white sm:text-lg">
                        {t(f.titleKey)}
                      </h3>
                      <p className="mt-1.5 text-base leading-[1.7] text-slate-600 dark:text-slate-300">
                        {t(f.descKey)}
                      </p>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>

          {/* Right: live rate visual — real values from the public currency-info API */}
          <Reveal delay={0.1} className="relative">
            <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"
            />
            <Card className="overflow-hidden shadow-elevated">
              <CardContent className="space-y-5 p-7">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                    {t("rates.liveRateLabel")}
                  </span>
                  <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300">
                    <span className="relative flex h-1.5 w-1.5">
                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
                      <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
                    </span>
                    {t("rates.live")}
                  </span>
                </div>

                {/* Rate display */}
                <div className="rounded-2xl border border-slate-200/70 bg-gradient-to-br from-brand-50/60 to-accent-50/30 p-5 dark:border-slate-800 dark:from-brand-500/10 dark:to-accent-500/5">
                  <p className="text-xs text-slate-500 dark:text-slate-400">
                    {senderCur ? `1 ${senderCur.code}` : " "}
                  </p>
                  <p className="mt-1 text-3xl font-bold tabular-nums text-slate-900 dark:text-white">
                    {rate != null ? formatNumber(rate, undefined, 2) : "—"}
                  </p>
                  <p className="text-xs text-slate-500 dark:text-slate-400">
                    {receiverCur?.code ?? " "}
                  </p>
                </div>

                {/* Fee breakdown — only real, API-backed fields */}
                {txType && (
                  <div className="space-y-2.5 text-sm">
                    <div className="flex items-center justify-between">
                      <span className="text-slate-700 dark:text-slate-300">
                        {t("calculator.transferFee")}
                      </span>
                      <span className="font-semibold tabular-nums text-slate-900 dark:text-white">
                        {formatNumber(parseFloat(txType.fixed_charge), undefined, 2)} +{" "}
                        {formatNumber(parseFloat(txType.percent_charge), undefined, 2)}%
                      </span>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}