"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Smartphone } from "lucide-react";
import { TopBar } from "@/components/ui/TopBar";
import { Button } from "@/components/ui/Button";
import { GlassCard } from "@/components/ui/GlassCard";
import { NetworkBadge } from "@/components/NetworkBadge";
import { Skeleton } from "@/components/ui/Skeleton";
import { fetchPackageBySlug } from "@/lib/data/packages";
import { useOrderStore } from "@/lib/order-store";
import { Package } from "@/lib/types";
import { cn } from "@/lib/cn";
import { formatPakPhone, isValidPakPhone } from "@/lib/phone";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

export default function BuyPackagePage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const { t } = useTranslation();
  const { setDraft } = useOrderStore();
  const [pkg, setPkg] = useState<Package | null>(null);
  const [loading, setLoading] = useState(true);
  const [phone, setPhone] = useState("");
  const [touched, setTouched] = useState(false);

  useEffect(() => {
    let active = true;
    fetchPackageBySlug(params.id)
      .then((result) => active && setPkg(result))
      .finally(() => active && setLoading(false));
    return () => {
      active = false;
    };
  }, [params.id]);

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

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

  const isValid = isValidPakPhone(phone);

  function handleContinue() {
    setTouched(true);
    if (!isValid || !pkg) return;
    setDraft({ pkg, phone });
    router.push("/payment-methods");
  }

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

      <div className="flex flex-1 flex-col gap-6 px-4 pb-6 pt-2">
        <GlassCard className="flex items-center gap-3">
          <NetworkBadge network={pkg.network} size="md" />
          <div className="min-w-0 flex-1">
            <h3 className="truncate text-[14px] font-semibold">{pkg.name}</h3>
            <p className="text-xs text-muted">{pkg.validity}</p>
          </div>
          <div className="text-right">
            <p className={cn("tnum font-mono text-base font-semibold", pkg.originalPrice != null && "text-danger")}>
              Rs {pkg.price.toLocaleString()}
            </p>
            {pkg.originalPrice != null && (
              <p className="tnum font-mono text-[11px] text-muted line-through">
                Rs {pkg.originalPrice.toLocaleString()}
              </p>
            )}
          </div>
        </GlassCard>

        <div>
          <label className="mb-2 block text-sm font-medium text-muted">
            {t("buy.mobileNumberLabel")}
          </label>
          <div className="flex items-center gap-3 rounded-2xl glass px-4 py-3.5">
            <Smartphone size={18} className="text-muted" strokeWidth={2} />
            <input
              value={phone}
              onChange={(e) => setPhone(formatPakPhone(e.target.value))}
              onBlur={() => setTouched(true)}
              inputMode="numeric"
              maxLength={11}
              placeholder="03XX XXXXXXX"
              className="w-full bg-transparent font-mono text-[15px] outline-none placeholder:font-body placeholder:text-muted"
            />
          </div>
          {touched && !isValid && (
            <p className="mt-2 text-xs text-danger">
              {t("buy.invalidNumber")}
            </p>
          )}
          <p className="mt-2 text-xs text-muted">
            {t("buy.activationHint")}
          </p>
        </div>

        <div className="mt-auto">
          <Button size="lg" fullWidth onClick={handleContinue}>
            {t("buy.continueToPayment")}
          </Button>
        </div>
      </div>
    </div>
  );
}