import { useNavigate } from 'react-router-dom';

import { useT } from '../../lib/i18n/I18nContext';
import type { RewardsAchievement, RewardsSnapshot } from '../../types/rewards';
import { DISCORD_INVITE_URL } from '../../utils/links';
import { openUrl } from '../../utils/openUrl';

// discordMembershipLabel is now inlined into JSX to access t()

function formatNumber(value: number): string {
  return new Intl.NumberFormat('en-US').format(Math.max(0, Math.trunc(value)));
}

function roleAccentTone(index: number) {
  const tones = [
    {
      iconBg: 'bg-amber-50 dark:bg-amber-500/10',
      iconText: 'text-amber-600 dark:text-amber-300',
      iconBorder: 'border-amber-100 dark:border-amber-500/20',
    },
    {
      iconBg: 'bg-blue-50 dark:bg-blue-500/10',
      iconText: 'text-primary-600 dark:text-primary-300',
      iconBorder: 'border-blue-100 dark:border-blue-500/20',
    },
    {
      iconBg: 'bg-slate-100 dark:bg-slate-500/10',
      iconText: 'text-slate-600 dark:text-slate-300',
      iconBorder: 'border-slate-200 dark:border-slate-500/20',
    },
    {
      iconBg: 'bg-emerald-50 dark:bg-emerald-500/10',
      iconText: 'text-emerald-600 dark:text-emerald-300',
      iconBorder: 'border-emerald-100 dark:border-emerald-500/20',
    },
  ] as const;

  return tones[index % tones.length];
}

function roleGlyph(index: number) {
  switch (index % 4) {
    case 0:
      return (
        <path
          d="M12 3l2.4 4.86 5.36.78-3.88 3.78.92 5.35L12 15.27 7.2 17.77l.92-5.35L4.24 8.64l5.36-.78L12 3Z"
          fill="currentColor"
        />
      );
    case 1:
      return (
        <path
          d="M12 2.5 14.78 8l5.97.87-4.32 4.2 1.02 5.93L12 16.2 6.55 19l1.04-5.93-4.33-4.2L9.22 8 12 2.5Z"
          fill="currentColor"
        />
      );
    case 2:
      return (
        <path
          d="M12 3 5 6v5c0 4.08 2.87 7.9 7 8.9 4.13-1 7-4.82 7-8.9V6l-7-3Z"
          fill="currentColor"
        />
      );
    default:
      return (
        <path
          d="M12 2a5 5 0 0 1 5 5v3h1a2 2 0 0 1 2 2v2c0 4.42-3.58 8-8 8s-8-3.58-8-8v-2a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5Zm-3 8h6V7a3 3 0 1 0-6 0v3Z"
          fill="currentColor"
        />
      );
  }
}

interface RewardsCommunityTabProps {
  error: string | null;
  isLoading: boolean;
  onRetry?: () => void;
  snapshot: RewardsSnapshot | null;
}

export default function RewardsCommunityTab({
  error,
  isLoading,
  onRetry,
  snapshot,
}: RewardsCommunityTabProps) {
  const { t } = useT();
  const navigate = useNavigate();
  const rewardRoles: RewardsAchievement[] = snapshot?.achievements ?? [];
  const unlocked =
    snapshot?.summary.unlockedCount ?? rewardRoles.filter(role => role.unlocked).length;
  const total = snapshot?.summary.totalCount ?? rewardRoles.length;
  const inviteUrl = snapshot?.discord.inviteUrl ?? DISCORD_INVITE_URL;
  const progressPercent = total > 0 ? Math.round((unlocked / total) * 100) : 0;
  const achievementSlots =
    rewardRoles.length > 0 ? rewardRoles.slice(0, 8) : new Array(4).fill(null);
  const ringCircumference = 2 * Math.PI * 24;
  const ringOffset = ringCircumference - (progressPercent / 100) * ringCircumference;
  return (
    <>
      <section className="relative overflow-hidden rounded-[1.25rem] bg-gradient-to-br from-[#004ad0] to-[#2b64f1] p-6 text-white shadow-[0_20px_40px_rgba(25,28,30,0.08)]">
        <div className="relative z-10 space-y-4">
          <div className="space-y-2">
            <h1 className="text-2xl font-bold tracking-tight text-white">
              {t('rewards.community.heroTitle')}
            </h1>
            <p className="text-sm font-medium leading-relaxed text-white/90">
              {t('rewards.community.heroSubtitle')}
            </p>
          </div>
          <div className="flex flex-col gap-2 sm:flex-row">
            <button
              onClick={() => navigate('/settings/messaging')}
              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white dark:bg-neutral-900 px-4 py-3 text-sm font-semibold text-primary-700 dark:text-primary-300 shadow-lg transition-transform active:scale-[0.98]">
              <svg
                className="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                aria-hidden="true">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M13.828 10.172a4 4 0 0 0-5.656 0l-1 1a4 4 0 0 0 5.656 5.656l.586-.586m-3.242-2.828a4 4 0 0 0 5.656 0l1-1a4 4 0 1 0-5.656-5.656l-.586.586"
                />
              </svg>
              {t('rewards.community.connectDiscord')}
            </button>
            <button
              onClick={() => {
                void openUrl(inviteUrl);
              }}
              className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-colors hover:bg-white/15">
              <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M20.317 4.369A19.79 19.79 0 0 0 15.885 3c-.191.328-.403.775-.552 1.124a18.27 18.27 0 0 0-5.29 0A11.56 11.56 0 0 0 9.49 3a19.74 19.74 0 0 0-4.433 1.369C2.253 8.51 1.492 12.55 1.872 16.533a19.9 19.9 0 0 0 5.239 2.673c.423-.58.8-1.196 1.123-1.845a12.84 12.84 0 0 1-1.767-.85c.148-.106.292-.217.43-.332c3.408 1.6 7.104 1.6 10.472 0c.14.115.283.226.43.332c-.565.338-1.157.623-1.771.851c.322.648.698 1.264 1.123 1.844a19.84 19.84 0 0 0 5.241-2.673c.446-4.617-.761-8.621-3.787-12.164ZM9.46 14.088c-1.02 0-1.855-.936-1.855-2.084c0-1.148.82-2.084 1.855-2.084c1.044 0 1.87.944 1.855 2.084c0 1.148-.82 2.084-1.855 2.084Zm5.08 0c-1.02 0-1.855-.936-1.855-2.084c0-1.148.82-2.084 1.855-2.084c1.044 0 1.87.944 1.855 2.084c0 1.148-.812 2.084-1.855 2.084Z" />
              </svg>
              {t('rewards.community.joinDiscord')}
            </button>
          </div>
        </div>
        <div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-white/10 blur-2xl" />
        <div className="absolute -bottom-10 -left-8 h-24 w-24 rounded-full bg-white/15 blur-xl" />
      </section>

      {error ? (
        <div
          role="alert"
          data-testid="rewards-error"
          className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-amber-200 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 px-4 py-3 text-sm text-amber-800 dark:text-amber-200">
          <span>
            {t('rewards.community.syncUnavailable')} {error}
          </span>
          {onRetry ? (
            <button
              type="button"
              data-testid="rewards-retry"
              onClick={onRetry}
              disabled={isLoading}
              className="rounded-full border border-amber-300 dark:border-amber-500/40 bg-white dark:bg-neutral-900 px-3 py-1 text-xs font-semibold text-amber-800 dark:text-amber-200 shadow-sm transition-colors hover:bg-amber-100 dark:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-60">
              {isLoading ? t('rewards.community.retrying') : t('rewards.community.tryAgain')}
            </button>
          ) : null}
        </div>
      ) : null}

      <div className="space-y-4">
        <section className="rounded-[1.25rem] bg-white dark:bg-neutral-900 p-6 shadow-[0_4px_20px_rgba(25,28,30,0.04)]">
          <div className="mb-6 flex items-center justify-between gap-4">
            <div>
              <h2 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
                {t('rewards.community.yourProgress')}
              </h2>
              <p className="text-xs text-stone-500 dark:text-neutral-400">
                {isLoading
                  ? t('rewards.community.loadingRewards')
                  : t('rewards.community.achievementsUnlocked')
                      .replace('{unlocked}', String(unlocked))
                      .replace('{total}', String(total))}
              </p>
            </div>
            <div className="relative flex h-14 w-14 items-center justify-center">
              <svg className="h-full w-full -rotate-90" viewBox="0 0 56 56" aria-hidden="true">
                <circle
                  cx="28"
                  cy="28"
                  r="24"
                  fill="transparent"
                  stroke="currentColor"
                  strokeWidth="4"
                  className="text-stone-200"
                />
                <circle
                  cx="28"
                  cy="28"
                  r="24"
                  fill="transparent"
                  stroke="currentColor"
                  strokeWidth="4"
                  strokeDasharray={ringCircumference}
                  strokeDashoffset={ringOffset}
                  className="text-primary-600 dark:text-primary-300 transition-all duration-300"
                />
              </svg>
              <span className="absolute text-sm font-bold text-stone-900 dark:text-neutral-100">
                {progressPercent}%
              </span>
            </div>
          </div>

          <div className="flex gap-4 overflow-x-auto pb-1 scrollbar-hide">
            {achievementSlots.map((role, index) => (
              <div
                key={role?.id ?? `placeholder-${index}`}
                className={`flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full border-2 ${
                  role?.unlocked
                    ? 'border-primary-200 dark:border-primary-500/30 bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300'
                    : 'border-dashed border-stone-300 dark:border-neutral-700 bg-stone-100 dark:bg-neutral-800 text-stone-400 dark:text-neutral-500'
                }`}>
                <svg className="h-6 w-6" viewBox="0 0 24 24" aria-hidden="true">
                  {roleGlyph(index)}
                </svg>
              </div>
            ))}
          </div>
        </section>

        <section className="space-y-3">
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-bold text-stone-900 dark:text-neutral-100">
              {t('rewards.community.rolesAndRewards')}
            </h2>
          </div>
          {isLoading ? (
            <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-soft">
              <div className="text-sm text-stone-600 dark:text-neutral-300">
                {t('rewards.community.loadingRewards')}
              </div>
            </div>
          ) : rewardRoles.length > 0 ? (
            rewardRoles.map((role, index) => {
              const tone = roleAccentTone(index);

              return (
                <div
                  key={role.id}
                  className={`rounded-[1.25rem] bg-white dark:bg-neutral-900 p-5 shadow-sm transition-shadow hover:shadow-md ${
                    role.unlocked
                      ? 'ring-1 ring-primary-100 dark:ring-primary-500/20'
                      : 'ring-1 ring-black/[0.04] dark:ring-white/[0.06]'
                  }`}>
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex gap-4">
                      <div
                        className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl border ${tone.iconBg} ${tone.iconText} ${tone.iconBorder}`}>
                        <svg className="h-6 w-6" viewBox="0 0 24 24" aria-hidden="true">
                          {roleGlyph(index)}
                        </svg>
                      </div>
                      <div>
                        <h3 className="text-base font-bold text-stone-900 dark:text-neutral-100">
                          {role.title}
                        </h3>
                        <p className="mt-1 text-xs leading-relaxed text-stone-600 dark:text-neutral-300">
                          {role.description}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-1 text-primary-700 dark:text-primary-300">
                      <span className="text-[10px] font-bold uppercase tracking-[0.16em]">
                        {role.unlocked
                          ? t('rewards.community.unlocked')
                          : t('rewards.community.locked')}
                      </span>
                      <svg
                        className="h-4 w-4"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        aria-hidden="true">
                        {role.unlocked ? (
                          <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
                        ) : (
                          <path d="M12 2a5 5 0 0 1 5 5v3h1a2 2 0 0 1 2 2v2c0 4.42-3.58 8-8 8s-8-3.58-8-8v-2a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5Zm-3 8h6V7a3 3 0 1 0-6 0v3Z" />
                        )}
                      </svg>
                    </div>
                  </div>
                </div>
              );
            })
          ) : (
            <div className="rounded-2xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-5 shadow-soft">
              <h2 className="text-lg font-semibold text-stone-900 dark:text-neutral-100">
                {t('rewards.community.syncPending')}
              </h2>
              <p className="mt-2 text-sm text-stone-600 dark:text-neutral-300">
                {t('rewards.community.syncPendingDesc')}
              </p>
            </div>
          )}
        </section>

        <section className="rounded-[1.25rem] bg-[#f2f4f6] dark:bg-neutral-800/60 p-4 text-sm text-stone-600 dark:text-neutral-300">
          <div className="flex items-center justify-between gap-3">
            <span>{t('rewards.community.discordServer')}</span>
            <span className="font-semibold text-stone-900 dark:text-neutral-100">
              {!snapshot
                ? t('rewards.community.discordWaiting')
                : snapshot.discord.membershipStatus === 'member'
                  ? t('rewards.community.discordMember')
                  : snapshot.discord.membershipStatus === 'not_in_guild'
                    ? t('rewards.community.discordLinkedNotInGuild')
                    : snapshot.discord.membershipStatus === 'not_linked'
                      ? t('rewards.community.discordNotLinked')
                      : t('rewards.community.discordStatusUnavailable')}
            </span>
          </div>
          <div className="mt-3 flex items-center justify-between gap-3">
            <span>{t('rewards.community.currentStreak')}</span>
            <span className="font-semibold text-stone-900 dark:text-neutral-100">
              {snapshot
                ? t('rewards.community.streakDays').replace(
                    '{n}',
                    String(snapshot.metrics.currentStreakDays)
                  )
                : t('rewards.community.unknown')}
            </span>
          </div>
          <div className="mt-3 flex items-center justify-between gap-3">
            <span>{t('rewards.community.cumulativeTokens')}</span>
            <span className="font-semibold text-stone-900 dark:text-neutral-100">
              {snapshot
                ? formatNumber(snapshot.metrics.cumulativeTokens)
                : t('rewards.community.unknown')}
            </span>
          </div>
        </section>
      </div>
    </>
  );
}
