import { Pill } from '@/components/ui/primitives/Pill';
import { Row } from '@/components/ui/layout/Row';
import { formatDate, formatInteger } from '@/lib/format';
import { formatAgorotLocale } from '@/lib/money';
import {
  AccountStateBadge,
  Card,
  InfoRow,
  SectionTitle,
  TierBadge,
  TierSelect,
} from './VendorDetail.shared';
import type { Locale } from '@/lib/i18n';
import type { VendorDetailData } from './VendorDetail.types';

interface VendorDetailBusinessInfoSectionProps {
  vendor: VendorDetailData;
  locale: Locale;
  loading: boolean;
  t: (key: string) => string;
  tAdmin: (key: string) => string;
  onTierChange: (tier: 'NEW' | 'VETERAN') => void;
}

export function VendorDetailBusinessInfoSection({
  vendor,
  locale,
  loading,
  t,
  tAdmin,
  onTierChange,
}: VendorDetailBusinessInfoSectionProps) {
  return (
    <div>
      <SectionTitle>{t('section_info')}</SectionTitle>
      <Card>
        <dl>
          <InfoRow
            label={t('field_business_name')}
            value={<span data-user-displayname>{vendor.businessName}</span>}
          />
          <InfoRow
            label={t('field_display_name')}
            value={<span data-user-displayname>{vendor.displayName}</span>}
          />
          <InfoRow
            label={t('field_business_types')}
            value={
              vendor.businessTypeNames && vendor.businessTypeNames.length > 0 ? (
                <Row gap="1" wrap>
                  {vendor.businessTypeNames.map((name) => (
                    <Pill key={name} tone="neutral" size="sm" data-user-displayname>
                      {name}
                    </Pill>
                  ))}
                </Row>
              ) : (
                '-'
              )
            }
          />
          <InfoRow
            label={t('field_tier')}
            value={
              vendor.accountState === 'ACTIVE' || vendor.accountState === 'VETERAN' ? (
                <TierSelect
                  currentTier={vendor.tier as 'NEW' | 'VETERAN'}
                  disabled={loading}
                  onTierChange={onTierChange}
                />
              ) : (
                <TierBadge tier={vendor.tier} />
              )
            }
          />
          <InfoRow
            label={t('field_state')}
            value={
              <Row gap="2" align="center">
                <AccountStateBadge state={vendor.accountState} />
                {vendor.llmDecision && (
                  <Pill
                    tone={
                      vendor.llmDecision === 'APPROVE'
                        ? 'success'
                        : vendor.llmDecision === 'FLAG'
                          ? 'warning'
                          : 'danger'
                    }
                    size="sm"
                  >
                    {t('field_llm_decision')}:{' '}
                    {vendor.llmDecision === 'APPROVE'
                      ? tAdmin('llm_decision_approve')
                      : vendor.llmDecision === 'FLAG'
                        ? tAdmin('llm_decision_flag')
                        : tAdmin('llm_decision_reject')}
                  </Pill>
                )}
              </Row>
            }
          />
          {vendor.flagReason && (
            <InfoRow
              label={t('field_flag_reason')}
              value={
                <span className="text-warning-700 text-sm" data-user-displayname>
                  {vendor.flagReason}
                </span>
              }
            />
          )}
          {vendor.rejectReason && (
            <InfoRow
              label={t('field_reject_reason')}
              value={
                <span className="text-danger-700 text-sm" data-user-displayname>
                  {vendor.rejectReason}
                </span>
              }
            />
          )}
          <InfoRow
            label={t('field_total_revenue')}
            labelTooltip={t('field_total_revenue_tooltip')}
            value={formatAgorotLocale(Math.round(parseFloat(vendor.totalRevenue) * 100), locale)}
          />
          <InfoRow
            label={t('field_total_sales')}
            value={formatInteger(vendor.totalSales, locale)}
          />
          <InfoRow
            label={t('field_reviews_score')}
            value={
              vendor.reviewsCount === 0 ? (
                <span className="text-text-secondary text-sm">{t('field_reviews_score_none')}</span>
              ) : (
                <span
                  aria-label={`${t('field_reviews_score')}: ${parseFloat(vendor.reviewsScore).toFixed(2)}`}
                >
                  <span aria-hidden="true">⭐</span> {parseFloat(vendor.reviewsScore).toFixed(2)}
                </span>
              )
            }
          />
          <InfoRow label={t('field_reviews_count')} value={vendor.reviewsCount} />
          <InfoRow label={t('field_removed_reviews')} value={vendor.removedReviewsCount} />
          <InfoRow
            label={t('field_voucher_complaints')}
            value={vendor.unresolvedVoucherComplaints}
          />
          <InfoRow label={t('field_created_at')} value={formatDate(vendor.createdAt, locale)} />
        </dl>
      </Card>
    </div>
  );
}