"use client";

import { useMemo, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import {
  ArrowLeft,
  Banknote,
  Landmark,
  Pencil,
  Send,
  Smartphone,
  Trash2,
} from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { Button, ButtonLink } from "@/components/common/Button";
import { Modal } from "@/components/app/Modal";
import { StatusBadge } from "@/components/app/StatusBadge";
import { recipientEditHref } from "@/constants/routes";
import { useRecipients } from "@/hooks/useRecipients";
import { useTransactions } from "@/hooks/useTransactions";
import { useTranslation } from "@/hooks/useTranslation";
import { COUNTRIES } from "@/data/countries";

export function RecipientDetailView() {
  const id = useSearchParams().get("id");
  const router = useRouter();
  const { t } = useTranslation();
  const { recipients, remove } = useRecipients();
  const { transactions } = useTransactions();
  const recipient = recipients.find((r) => r.id === id);

  const history = useMemo(
    () => transactions.filter((tx) => tx.recipientId === id),
    [transactions, id],
  );

  const [confirming, setConfirming] = useState(false);
  const [deleting, setDeleting] = useState(false);

  if (!recipient) {
    return (
      <Container>
        <Card>
          <CardContent>
            <p className="text-sm text-slate-600 dark:text-slate-300">
              {t("app.recipients.empty")}
            </p>
            <Button type="button" variant="outline" className="mt-4" onClick={() => router.push("/recipients")}>
              <ArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
              {t("app.recipients.title")}
            </Button>
          </CardContent>
        </Card>
      </Container>
    );
  }

  const country = COUNTRIES.find((c) => c.code === recipient.countryCode);
  const MethodIcon =
    recipient.method === "bank"
      ? Landmark
      : recipient.method === "cash"
        ? Banknote
        : Smartphone;

  async function onDelete() {
    setDeleting(true);
    await remove(recipient!.id);
    setDeleting(false);
    setConfirming(false);
    router.replace("/recipients");
  }

  return (
    <Container className="max-w-full space-y-6">
      <button
        type="button"
        onClick={() => router.back()}
        className="inline-flex items-center gap-1.5 text-sm font-semibold text-slate-600 transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-300"
      >
        <ArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
        {t("app.recipients.title")}
      </button>

      <Card>
        <CardContent>
          <div className="flex flex-wrap items-start justify-between gap-6">
            <div className="flex items-center gap-4">
              <span className="grid h-14 w-14 place-items-center rounded-full bg-gradient-to-br from-brand-500 to-accent-500 text-base font-bold text-white">
                {recipient.name
                  .split(" ")
                  .map((p) => p.charAt(0))
                  .slice(0, 2)
                  .join("")}
              </span>
              <div>
                <h1 className="text-xl font-bold text-slate-900 dark:text-white sm:text-2xl">
                  {recipient.name}
                </h1>
                <div className="mt-1 flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400">
                  {country && (
                    <img
                      src={`https://flagcdn.com/w40/${country.code.toLowerCase()}.png`}
                      alt={country.name}
                      className="h-3.5 w-5 shrink-0 rounded-xs object-cover shadow-sm border border-slate-100 dark:border-slate-800"
                      aria-hidden
                    />
                  )}
                  <span>
                    {country?.name} · <span className="capitalize">{recipient.method}</span>
                  </span>
                </div>
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <ButtonLink href="/send" size="sm">
                <Send className="h-3.5 w-3.5 rtl:-scale-x-100" />
                {t("app.recipients.actionSend")}
              </ButtonLink>
              <ButtonLink href={recipientEditHref(recipient.id)} prefetch={false} size="sm" variant="outline">
                <Pencil className="h-3.5 w-3.5" />
                {t("app.recipients.actionEdit")}
              </ButtonLink>
              <Button
                size="sm"
                variant="ghost"
                onClick={() => setConfirming(true)}
                className="text-rose-600 hover:bg-rose-50 dark:text-rose-300 dark:hover:bg-rose-500/10"
              >
                <Trash2 className="h-3.5 w-3.5" />
                {t("app.recipients.actionDelete")}
              </Button>
            </div>
          </div>

          <div className="mt-6 grid gap-4 sm:grid-cols-2">
            <Detail label={t("app.recipients.new.method")}>
              <span className="inline-flex items-center gap-2">
                <MethodIcon className="h-4 w-4 text-slate-400" />
                {recipient.method}
              </span>
            </Detail>
            <Detail label={t("app.recipients.new.relationship")}>
              {recipient.relationship}
            </Detail>
            {recipient.bank && (
              <>
                <Detail label={t("app.recipients.new.bankName")}>
                  {recipient.bank.bankName}
                </Detail>
                <Detail label={t("app.recipients.new.accountNumber")}>
                  <span className="tabular-nums">{recipient.bank.accountNumber}</span>
                </Detail>
                {recipient.bank.iban && (
                  <Detail label={t("app.recipients.new.iban")}>
                    <span className="tabular-nums">{recipient.bank.iban}</span>
                  </Detail>
                )}
              </>
            )}
            {recipient.cash && (
              <Detail label={t("app.recipients.new.pickupLocation")}>
                {recipient.cash.pickupLocation}
              </Detail>
            )}
            {recipient.mobile && (
              <Detail label={t("app.recipients.new.mobilePhone")}>
                {recipient.mobile.phone}
              </Detail>
            )}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent>
          <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
            {t("app.recipients.detailHistory")}
          </h2>
          {history.length === 0 ? (
            <p className="mt-3 text-sm text-slate-500 dark:text-slate-400">
              {t("app.recipients.detailNoHistory")}
            </p>
          ) : (
            <div className="mt-3 -mx-2 space-y-0.5">
              {history.map((tx) => (
                <div key={tx.id} className="flex items-center gap-3 rounded-xl px-2 py-2.5 hover:bg-slate-50 dark:hover:bg-white/[0.04]">
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-medium text-slate-900 dark:text-white">{tx.reference}</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">{new Date(tx.createdAt).toLocaleDateString()}</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-semibold text-slate-900 dark:text-white">
                      {tx.sendCurrency} {tx.sendAmount.toFixed(2)}
                    </span>
                    <StatusBadge status={tx.status} />
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      <Modal
        open={confirming}
        onClose={() => !deleting && setConfirming(false)}
        title={t("app.recipients.confirmDeleteTitle")}
        footer={
          <>
            <Button
              type="button"
              variant="outline"
              onClick={() => setConfirming(false)}
              disabled={deleting}
            >
              {t("app.recipients.cancel")}
            </Button>
            <Button
              type="button"
              onClick={onDelete}
              loading={deleting}
              className="bg-rose-600 hover:bg-rose-700"
            >
              {t("app.recipients.confirmDelete")}
            </Button>
          </>
        }
      >
        <p>
          {t("app.recipients.confirmDeleteBody").replace("{name}", recipient.name)}
        </p>
      </Modal>
    </Container>
  );
}

function Detail({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="rounded-2xl border border-slate-200/70 p-4 dark:border-slate-800">
      <p className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
        {label}
      </p>
      <p className="mt-1 text-sm font-medium text-slate-900 dark:text-white">
        {children}
      </p>
    </div>
  );
}