'use client';

/**
 * ReturnPolicyCard
 *
 * Displays the vendor's return policy, window, restocking fee, and
 * refund method in a Card layout. Reads policy data passed from the parent
 * (already fetched server-side).
 */

import { Card } from '@/components/ui/layout/Card';
import { useT } from '@/lib/i18n/react';

export interface ReturnPolicy {
  /** Max days after purchase to request a return */
  windowDays: number;
  /** Restocking fee as decimal 0–1 (e.g. 0.05 = 5%) */
  restockingFeePct: number;
  /** Whether cash refund is available or only store credit */
  refundMethod: 'cash' | 'credit';
  /** Accepted return reasons for this vendor/deal */
  acceptedReasons: string[];
}

interface ReturnPolicyCardProps {
  policy: ReturnPolicy;
  className?: string;
}

export function ReturnPolicyCard({ policy, className }: ReturnPolicyCardProps) {
  const t = useT('returns');
  const reasonLabels = t('reason') as unknown as Record<string, string>;

  const feePct = Math.round(policy.restockingFeePct * 100);
  const windowDaysLabel = (t('policyWindowDaysValue') as unknown as string).replace(
    '{{days}}',
    String(policy.windowDays),
  );

  return (
    <Card padding="md" className={className}>
      <h3 className="text-text-primary mb-3 text-sm font-semibold">{t('policyTitle')}</h3>
      <dl className="space-y-2 text-sm">
        <div className="flex justify-between gap-2">
          <dt className="text-text-secondary">{t('policyWindowLabel')}</dt>
          <dd className="text-text-primary font-medium">{windowDaysLabel}</dd>
        </div>

        <div className="flex justify-between gap-2">
          <dt className="text-text-secondary">{t('policyRefundMethodLabel')}</dt>
          <dd className="text-text-primary font-medium">
            {policy.refundMethod === 'cash' ? t('cashRefundLabel') : t('creditOverflowLabel')}
          </dd>
        </div>

        {feePct > 0 && (
          <div className="flex justify-between gap-2">
            <dt className="text-text-secondary">{t('restockingFeeLabel')}</dt>
            <dd className="text-text-primary font-medium">
              {(t('restockingFeeOfRefund') as unknown as string).replace('{{pct}}', String(feePct))}
            </dd>
          </div>
        )}

        {policy.acceptedReasons.length > 0 && (
          <div className="pt-1">
            <dt className="text-text-secondary mb-1">{t('policyTitle')}</dt>
            <dd>
              <ul className="flex flex-wrap gap-1" aria-label={t('policyTitle')}>
                {policy.acceptedReasons.map((reason) => (
                  <li
                    key={reason}
                    className="bg-surface-subtle text-text-secondary rounded-full px-2 py-0.5 text-xs"
                  >
                    {reasonLabels[reason] ?? reason}
                  </li>
                ))}
              </ul>
            </dd>
          </div>
        )}
      </dl>
    </Card>
  );
}