// Copyright: (c) 2026 TWWIM UG. All rights reserved.
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Tag, CheckCircle2, AlertCircle, Users, Percent } from 'lucide-react';
import { PageLayout } from '@/components/shared';
import { useTranslation } from '@/i18n/TranslationProvider';
import { useRedeemCode } from './hooks/useRedeemCode';
import { useSubscription } from '@/features/subscription/hooks/useSubscription';
import { ActiveCampaignList } from '@/features/subscription/components/ActiveCampaignList';
import type { RedeemCodeResponse } from '@archer/api-interface/schemas/customer-api/response';

const codeSchema = z.object({
  code: z.string().min(3).max(30).regex(/^[A-Z0-9_-]+$/i, 'Code must be alphanumeric (A-Z, 0-9, _, -)'),
});
type CodeForm = z.infer<typeof codeSchema>;

export function PromotionsPage() {
  const { t, locale } = useTranslation();
  const redeemCode = useRedeemCode();
  const { data: subscription } = useSubscription();
  const [result, setResult] = useState<RedeemCodeResponse | null>(null);
  const activeCampaigns = subscription?.activeCampaigns ?? [];

  const { register, handleSubmit, formState: { errors }, reset } = useForm<CodeForm>({
    resolver: zodResolver(codeSchema),
  });

  const onSubmit = (data: CodeForm) => {
    setResult(null);
    redeemCode.mutate(data.code, {
      onSuccess: (res) => {
        setResult(res);
        reset();
      },
    });
  };

  const errorMessage = redeemCode.error
    ? extractErrorMessage(redeemCode.error, t)
    : null;

  return (
    <PageLayout
      title={t('promotions.title')}
      subtitle={t('promotions.subtitle')}
    >
      {/* Code Input */}
      <div className="max-w-2xl" data-testid="promotions-page">
        <div className="bg-card border border-border rounded-xl p-6">
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" data-testid="promotions-form">
            <div>
              <label htmlFor="code" className="block text-sm font-medium text-foreground mb-1.5">
                {t('promotions.inputLabel')}
              </label>
              <div className="flex gap-3">
                <input
                  id="code"
                  data-testid="promotions-code-input"
                  {...register('code')}
                  placeholder={t('promotions.inputPlaceholder')}
                  className="flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent uppercase"
                  disabled={redeemCode.isPending}
                />
                <button
                  type="submit"
                  data-testid="promotions-submit"
                  disabled={redeemCode.isPending}
                  className="px-5 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {redeemCode.isPending ? t('common.loading') : t('promotions.submit')}
                </button>
              </div>
              {errors.code && (
                <p className="mt-1.5 text-sm text-destructive" data-testid="promotions-validation-error">{errors.code.message}</p>
              )}
            </div>
          </form>

          {/* Error */}
          {errorMessage && (
            <div
              className="mt-4 flex items-start gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg"
              data-testid="redeem-result-error"
            >
              <AlertCircle className="h-4 w-4 text-destructive mt-0.5 shrink-0" />
              <p className="text-sm text-destructive">{errorMessage}</p>
            </div>
          )}

          {/* Success Result */}
          {result && <RedeemResult result={result} locale={locale} t={t} />}
        </div>

        {/* Active Campaigns */}
        <div className="mt-6 bg-card border border-border rounded-xl p-6">
          <ActiveCampaignList campaigns={activeCampaigns} />
          {activeCampaigns.length === 0 && (
            <p className="text-sm text-muted-foreground">{t('subscription.noCampaigns')}</p>
          )}
        </div>
      </div>
    </PageLayout>
  );
}

function RedeemResult({ result, locale, t }: { result: RedeemCodeResponse; locale: string; t: (key: string, params?: Record<string, string | number>) => string }) {
  const isReferral = result.type === 'referral';
  const Icon = isReferral ? Users : Percent;
  const campaignName = result.campaignName?.[locale] ?? result.campaignName?.['en'] ?? '';

  return (
    <div className="mt-4 p-4 bg-primary/5 border border-primary/20 rounded-lg" data-testid="redeem-result-success">
      <div className="flex items-center gap-2 mb-2">
        <CheckCircle2 className="h-5 w-5 text-primary" />
        <span className="font-medium text-foreground" data-testid="redeem-result-headline">
          {isReferral ? t('promotions.success.referral') : t('promotions.success.promo')}
        </span>
      </div>

      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Icon className="h-4 w-4" />
        {isReferral && result.partnerName && (
          <span data-testid="redeem-result-partner">{t('promotions.linkedToPartner', { name: result.partnerName })}</span>
        )}
        {campaignName && (
          <span className="flex items-center gap-1.5">
            <Tag className="h-3.5 w-3.5" />
            {campaignName}
            {result.value !== undefined && result.valueUnit && (
              <span className="text-primary font-medium">
                ({formatValue(result.value, result.valueUnit, t)})
              </span>
            )}
          </span>
        )}
      </div>

      {result.appliedEffect.kind !== 'none' && (
        <p className="mt-2 text-xs text-muted-foreground">
          {t(`promotions.effect.${result.appliedEffect.kind}`)}
        </p>
      )}
    </div>
  );
}

function formatValue(value: number, unit: string, t: (key: string, params?: Record<string, string | number>) => string): string {
  switch (unit) {
    case 'percentage': return t('subscription.campaignDiscount', { value });
    case 'fixed_amount': return `${value} EUR`;
    case 'count': return t('subscription.campaignCapBoost', { value });
    default: return `${value}`;
  }
}

function extractErrorMessage(error: unknown, t: (key: string) => string): string {
  const msg = error instanceof Error ? error.message : '';
  if (msg.includes('already linked')) return t('promotions.error.alreadyReferred');
  if (msg.includes('not found') || msg.includes('Invalid code')) return t('promotions.error.invalidCode');
  if (msg.includes('not active')) return t('promotions.error.inactive');
  if (msg.includes('expired')) return t('promotions.error.expired');
  return t('promotions.error.generic');
}