"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { TopBar } from "@/components/ui/TopBar";
import { GlassCard } from "@/components/ui/GlassCard";
import { NetworkBadge } from "@/components/NetworkBadge";
import { StatusPill } from "@/components/ui/StatusPill";
import { Skeleton } from "@/components/ui/Skeleton";
import { OrderStepper } from "@/components/OrderStepper";
import { fetchOrderByNumber } from "@/lib/data/orders";
import { Order } from "@/lib/types";
import { useTranslation } from "@/lib/i18n/LanguageProvider";
import { formatDateTime } from "@/lib/i18n/format-date";

export default function OrderDetailsPage() {
  const params = useParams<{ id: string }>();
  const { t, language } = useTranslation();
  const [order, setOrder] = useState<Order | null>(null);
  const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let active = true;

    fetchOrderByNumber(params.id)
      .then((result) => {
        if (!active) return;
        setOrder(result);
        if (result?.transaction?.screenshotUrl) {
          setScreenshotUrl(result.transaction.screenshotUrl);
        }
      })
      .finally(() => active && setLoading(false));

    return () => {
      active = false;
    };
  }, [params.id]);

  if (loading) {
    return (
      <div className="flex flex-1 flex-col">
        <TopBar title={t("orderDetail.title")} />
        <div className="flex flex-col gap-6 px-4 pb-8 pt-2">
          <Skeleton className="h-10 w-full" />
          <Skeleton className="h-20 w-full !rounded-4xl" />
          <Skeleton className="h-40 w-full !rounded-4xl" />
          <Skeleton className="h-32 w-full !rounded-4xl" />
        </div>
      </div>
    );
  }

  if (!order) {
    return (
      <div className="flex flex-1 flex-col">
        <TopBar title={t("orderDetail.title")} />
        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-muted">
          {t("orderDetail.notFound")}
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-1 flex-col">
      <TopBar title={t("orderDetail.title")} />

      <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-4 pb-8 pt-2">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted">{t("orderDetail.orderReference")}</p>
            <p className="tnum font-mono text-base font-semibold">{order.id}</p>
          </div>
          <StatusPill status={order.status} />
        </div>

        <GlassCard className="flex items-center gap-3">
          <NetworkBadge network={order.network} size="md" />
          <div className="min-w-0 flex-1">
            <h3 className="truncate text-[14px] font-semibold">{order.packageName}</h3>
          </div>
          <p className="tnum font-mono text-base font-semibold">
            Rs {order.amount.toLocaleString()}
          </p>
        </GlassCard>

        <div>
          <p className="mb-3 text-sm font-medium text-muted">{t("orderDetail.status")}</p>
          <GlassCard>
            <OrderStepper status={order.status} />
          </GlassCard>
        </div>

        <div>
          <p className="mb-3 text-sm font-medium text-muted">{t("orderDetail.paymentDetails")}</p>
          <GlassCard className="flex flex-col gap-3 !p-4">
            <Row label={t("orderDetail.activationPhone")} value={order.activationPhone} mono />
            <Row label={t("orderDetail.paymentMethod")} value={order.transaction?.paymentMethodLabel ?? "—"} />
            <Row label={t("orderDetail.transactionId")} value={order.transaction?.referenceNumber ?? "—"} mono />
            <Row label={t("orderDetail.dateTime")} value={formatDateTime(order.createdAt, language)} />
          </GlassCard>
        </div>

        {screenshotUrl && (
          <div>
            <p className="mb-3 text-sm font-medium text-muted">
              {t("orderDetail.paymentScreenshot")}
            </p>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={screenshotUrl}
              alt="Payment screenshot"
              className="w-full rounded-3xl glass p-2 object-cover"
            />
          </div>
        )}
      </div>
    </div>
  );
}

function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div className="flex items-center justify-between border-b border-black/5 pb-3 last:border-0 last:pb-0 dark:border-white/5">
      <span className="text-xs text-muted">{label}</span>
      <span className={mono ? "tnum font-mono text-sm font-semibold" : "text-sm font-semibold"}>
        {value}
      </span>
    </div>
  );
}