'use client';

import { formatDate } from '@/lib/format';
import { useLocale, useT } from '@/lib/i18n/react';

export interface GroupData {
  currentParticipants: number;
  minGroupSize: number;
  maxGroupSize: number;
  deadline: string; // ISO 8601
  groupState: 'COLLECTING' | 'THRESHOLD_MET' | 'EXTENDED';
  perCustomerLimit: number;
}

export interface GroupDealStatusRowProps {
  group: GroupData;
}

export function GroupDealStatusRow({ group }: GroupDealStatusRowProps) {
  const t = useT('checkout_modal');
  const tGroupDeal = useT('group_deal');
  const { locale } = useLocale();

  const { currentParticipants, minGroupSize, maxGroupSize, deadline, groupState } = group;
  const pct = Math.min(100, Math.round((currentParticipants / minGroupSize) * 100));
  const deadlineDate = new Date(deadline);
  const isThresholdMet = groupState === 'THRESHOLD_MET' || groupState === 'EXTENDED';
  const remaining = Math.max(0, minGroupSize - currentParticipants);

  return (
    <div className="border-border bg-surface-secondary flex flex-col gap-2 rounded-lg border p-3">
      <p className="text-sm font-medium">{t('group_status_title')}</p>
      <div className="flex items-center justify-between text-sm">
        <span>
          {currentParticipants} / {minGroupSize}
        </span>
        <span className="text-text-secondary">
          {tGroupDeal('max_size').replace('{{count}}', String(maxGroupSize))}
        </span>
      </div>
      <div
        className="bg-surface-tertiary h-2 overflow-hidden rounded-full"
        role="progressbar"
        aria-valuenow={pct}
        aria-valuemin={0}
        aria-valuemax={100}
      >
        <div
          className="bg-primary h-full rounded-full transition-[width]"
          style={{ width: pct + '%' }}
        />
      </div>
      {isThresholdMet ? (
        <p className="text-success text-xs">{tGroupDeal('threshold_met')}</p>
      ) : (
        <p className="text-text-secondary text-xs">
          {tGroupDeal('threshold_not_met').replace('{{count}}', String(remaining))}
        </p>
      )}
      <p className="text-text-secondary text-xs">{formatDate(deadlineDate, locale)}</p>
    </div>
  );
}