import { SUBSCRIPTION } from "@/config/subscription";
import type { SubscriptionPlan, SubscriptionStatus, SubscriptionSettings } from "@/types";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { Moon, Check, Crown } from "lucide-react";

export function SubscriptionBadge({ className, style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <span
      className={cn("inline-flex items-center gap-1 rounded-md border border-secondary/40 bg-secondary/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-secondary", className)}
      style={style}
      title={SUBSCRIPTION.badge.label}
    >
      <Moon className="h-3 w-3" /> {SUBSCRIPTION.badge.label}
    </span>
  );
}

export function SubscriptionMedal() {
  return (
    <span className="inline-flex items-center gap-1 rounded-full border border-primary/40 bg-primary/10 px-2 py-0.5 text-xs text-primary">
      <span>{SUBSCRIPTION.medal.icon}</span> {SUBSCRIPTION.medal.label}
    </span>
  );
}

const STATUS_LABELS: Record<SubscriptionStatus, string> = {
  active: "Active", expiring_soon: "Expiring soon", expired: "Expired",
  cancelled: "Cancelled", payment_failed: "Payment failed", gifted: "Gifted", paused: "Paused",
};
const STATUS_TONE: Record<SubscriptionStatus, string> = {
  active: "border-success/40 text-success",
  expiring_soon: "border-warning/40 text-warning",
  expired: "border-muted-foreground/40 text-muted-foreground",
  cancelled: "border-muted-foreground/40 text-muted-foreground",
  payment_failed: "border-destructive/40 text-destructive",
  gifted: "border-secondary/40 text-secondary",
  paused: "border-warning/40 text-warning",
};

export function SubscriptionStatusPill({ status }: { status: SubscriptionStatus }) {
  return <Badge variant="outline" className={cn("capitalize", STATUS_TONE[status])}>{STATUS_LABELS[status]}</Badge>;
}

export function SubscriptionTag({ color, children }: { color?: string; children: React.ReactNode }) {
  return <span className="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-primary-foreground" style={{ background: color ?? SUBSCRIPTION.badge.color }}>{children}</span>;
}

export function SubscriptionExpirationNotice({ expiresAt, remainingDays }: { expiresAt: string; remainingDays: number }) {
  const tone = remainingDays <= 7 ? "border-warning/40 bg-warning/10 text-warning" : "border-border bg-surface/60 text-muted-foreground";
  return <div className={cn("rounded-md border px-3 py-2 text-sm", tone)}>Expires {expiresAt} · {remainingDays} day{remainingDays === 1 ? "" : "s"} remaining</div>;
}

export function SubscriptionPlanCard({ plan, active, onSelect }: { plan: SubscriptionPlan; active?: boolean; onSelect?: () => void }) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className={cn(
        "relative flex flex-col items-start gap-2 rounded-xl border p-4 text-left transition-all",
        active ? "border-primary bg-primary/10 shadow-glow" : "border-border bg-card hover:border-primary/40",
      )}
    >
      {plan.lifetime && <Badge className="absolute right-3 top-3 gap-1 gradient-primary text-primary-foreground"><Crown className="h-3 w-3" /> Lifetime</Badge>}
      <div className="font-display text-base font-semibold">{plan.label}</div>
      <div className="flex items-end gap-2">
        <span className="font-display text-2xl font-bold text-secondary">${plan.price.toFixed(2)}</span>
        {plan.originalPrice && <span className="text-xs text-muted-foreground line-through">${plan.originalPrice.toFixed(2)}</span>}
      </div>
      {plan.savingsPct && <span className="text-xs text-success">Save {plan.savingsPct}%</span>}
    </button>
  );
}

export function SubscriptionDurationSelector({ plans, selectedId, onSelect }: { plans: SubscriptionPlan[]; selectedId: string; onSelect: (id: string) => void }) {
  return (
    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
      {plans.filter((p) => p.visible).map((p) => (
        <SubscriptionPlanCard key={p.id} plan={p} active={p.id === selectedId} onSelect={() => onSelect(p.id)} />
      ))}
    </div>
  );
}

export function SubscriptionBenefitCard({ title, items }: { title: string; items: string[] }) {
  return (
    <div className="rounded-xl border border-border bg-card p-4">
      <h3 className="font-display text-sm font-semibold uppercase tracking-wider text-secondary">{title}</h3>
      <ul className="mt-3 space-y-1.5 text-sm">
        {items.map((it) => <li key={it} className="flex gap-2"><Check className="h-4 w-4 shrink-0 text-success" /> {it}</li>)}
      </ul>
    </div>
  );
}

export function SubscriptionSettingsPreview({ settings, name }: { settings: SubscriptionSettings; name: string }) {
  return (
    <div className="space-y-3">
      <div className="rounded-xl border border-border bg-card p-4">
        <div className="text-xs uppercase text-muted-foreground">Profile preview</div>
        <div className="mt-2 flex items-center gap-2">
          <span className="font-semibold" style={{ color: settings.nicknameColor }}>{name}</span>
          {settings.badgeVisibleProfile && <SubscriptionBadge />}
          {settings.showMedal && <SubscriptionMedal />}
        </div>
      </div>
      <div className="rounded-xl border border-border bg-card p-4">
        <div className="text-xs uppercase text-muted-foreground">Chat message preview</div>
        <div className="mt-2 flex items-start gap-2">
          {settings.badgeVisibleChat && <SubscriptionTag color={settings.tagColor}>SUB</SubscriptionTag>}
          <span className="font-semibold" style={{ color: settings.nicknameColor }}>{name}:</span>
          <span style={{ color: settings.chatAccent }}>Hey team, ready to queue?</span>
        </div>
      </div>
      <div className="rounded-xl border border-border bg-card p-4">
        <div className="text-xs uppercase text-muted-foreground">Ranking row preview</div>
        <div className="mt-2 flex items-center gap-3 text-sm">
          <span className="font-mono text-muted-foreground">#12</span>
          <span className="font-semibold" style={{ color: settings.nicknameColor }}>{name}</span>
          {settings.badgeVisibleRankings && <SubscriptionBadge />}
          <span className="ml-auto font-mono">1.42</span>
        </div>
      </div>
      <div className="rounded-xl border border-border bg-card p-4">
        <div className="text-xs uppercase text-muted-foreground">Scoreboard preview</div>
        <div className="mt-2 flex items-center gap-3 text-sm">
          <span className="font-semibold" style={{ color: settings.nicknameColor }}>{name}</span>
          {settings.badgeVisibleScoreboard && <SubscriptionBadge />}
          <span className="ml-auto font-mono">24 · 12</span>
        </div>
      </div>
    </div>
  );
}