"use client";

import Link from "next/link";
import { formatJalaliDisplay } from "@/components/jalali-date-picker/utils";
import { useProfile } from "@/features/profile/hooks/use-profile";
import { getSubscriptionVisual } from "@/features/profile/utils/subscription-theme";
import { panelDict } from "@/features/panel/dict";
import { formatTokenCount } from "@/features/subscription/utils/format";
import { toPersianDigits } from "@/lib/to-english-digits";

function ChevronEndIcon() {
  return (
    <svg
      aria-hidden="true"
      className="absolute end-4 size-6 shrink-0 text-primary/80"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path d="M15 6l-6 6 6 6" />
    </svg>
  );
}

function SubscriptionIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-4 text-primary"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3 10h18" />
      <path d="M7 15h4" />
    </svg>
  );
}

export function DashboardSubscriptionCard() {
  const { data: profile, isLoading } = useProfile();
  const subscription = profile?.subscription;
  const visual = subscription ? getSubscriptionVisual(subscription) : null;
  const expiryLabel = subscription?.expiresAt
    ? formatJalaliDisplay(subscription.expiresAt.slice(0, 10))
    : panelDict.subscriptionNoExpiry;

  return (
    <section className="rounded-3xl bg-card p-4 shadow-soft-sm sm:p-5">
      <div className="mb-4 flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <SubscriptionIcon />
            <h2 className="text-base font-bold text-card-foreground sm:text-lg">
              {panelDict.subscriptionSummary}
            </h2>
          </div>
        </div>

        {visual?.badge ? (
          <span
            className={`shrink-0 rounded-full px-2.5 py-1 text-[10px] font-semibold sm:text-[11px] ${visual.badgeClassName}`}
          >
            {visual.badge}
          </span>
        ) : null}
      </div>

      {isLoading ? (
        <p className="text-sm text-muted-foreground">{panelDict.loading}</p>
      ) : (
        <div className="grid grid-cols-2 gap-2.5">
          <div className="flex min-h-[7.5rem] flex-col items-center justify-center rounded-2xl bg-muted/50 px-3 py-3 text-center">
            <p className="text-sm font-bold text-card-foreground">
              {visual?.tooltip ?? panelDict.subscriptionFreePlan}
            </p>
            <p className="mt-2 text-[11px] text-muted-foreground sm:text-xs">
              {panelDict.subscriptionPlan}
            </p>
          </div>

          <div className="flex min-h-[7.5rem] flex-col items-center justify-center rounded-2xl bg-primary/10 px-3 py-3 text-center">
            <p className="text-sm font-bold text-primary">
              {subscription?.plan === "PRO_PLUS"
                ? toPersianDigits(formatTokenCount(subscription.aiTokenBalance))
                : "—"}
            </p>
            <p className="mt-2 text-[11px] text-muted-foreground sm:text-xs">
              {panelDict.subscriptionTokens}
            </p>
          </div>
        </div>
      )}

      {!isLoading ? (
        <p className="mt-3 text-center text-xs text-muted-foreground sm:text-sm">
          {panelDict.subscriptionExpiry.replace("{date}", expiryLabel)}
        </p>
      ) : null}

      <Link
        href="/panel/subscription"
        className="relative mt-4 flex h-11 w-full items-center justify-center rounded-2xl border border-border/60 bg-muted/40 px-4 text-sm font-semibold text-primary transition-colors hover:bg-muted/60"
      >
        <ChevronEndIcon />
        {panelDict.viewSubscription}
      </Link>
    </section>
  );
}