playzer/apps/frontend/src/features/onboard/components/steps/review-step.tsx

import type { PlanWithFeatures } from '@repo/api-contract';
import { Check, X } from 'lucide-react';

type ReviewStepProps = {
  data: {
    complexName: string;
    physicalAddress: string;
    city?: string;
    state?: string;
    country?: string;
    planCode: string;
    setupCourts: boolean;
    courtSportName?: string;
    courtStartTime?: string;
    courtEndTime?: string;
    courtDaysOfWeek?: string[];
  };
  selectedPlan: PlanWithFeatures | undefined;
};

const DAY_LABELS: Record<string, string> = {
  MONDAY: 'Lunes',
  TUESDAY: 'Martes',
  WEDNESDAY: 'Miércoles',
  THURSDAY: 'Jueves',
  FRIDAY: 'Viernes',
  SATURDAY: 'Sábado',
  SUNDAY: 'Domingo',
};

export function ReviewStep({ data, selectedPlan }: ReviewStepProps) {
  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-lg font-semibold">Revisá tus datos</h2>
        <p className="text-sm text-muted-foreground">
          Antes de confirmar, revisá que todos los datos sean correctos.
        </p>
      </div>

      <div className="space-y-3 rounded-lg border p-4">
        <Section title="Complejo">
          <Row label="Nombre" value={data.complexName} />
          <Row label="Dirección" value={data.physicalAddress} />
          {data.city && <Row label="Ciudad" value={data.city} />}
          {data.state && <Row label="Provincia" value={data.state} />}
          {data.country && <Row label="País" value={data.country} />}
        </Section>

        <Section title="Plan seleccionado">
          {selectedPlan ? (
            <>
              <Row label="Plan" value={`${selectedPlan.name} - $${selectedPlan.price}/mes`} />
              <div className="mt-2 space-y-1">
                {[
                  ['publicBookingPage', 'Página de booking pública'],
                  ['onlinePayments', 'Pagos online'],
                  ['advancedReports', 'Reportes avanzados'],
                  ['whatsappReminders', 'Recordatorios WhatsApp'],
                ].map(([feature, label]) => {
                  const enabled =
                    selectedPlan.features[feature as keyof typeof selectedPlan.features];
                  return (
                    <div key={feature} className="flex items-center gap-2 text-xs">
                      {enabled ? (
                        <Check className="size-3.5 shrink-0 text-green-600" />
                      ) : (
                        <X className="size-3.5 shrink-0 text-muted-foreground" />
                      )}
                      <span className={enabled ? '' : 'text-muted-foreground'}>{label}</span>
                    </div>
                  );
                })}
              </div>
            </>
          ) : (
            <p className="text-sm text-muted-foreground">No se seleccionó un plan.</p>
          )}
        </Section>

        <Section title="Cancha">
          {data.setupCourts ? (
            <>
              <Row label="Deporte" value={data.courtSportName ?? '-'} />
              <Row
                label="Horario"
                value={`${data.courtStartTime ?? '08:00'} - ${data.courtEndTime ?? '22:00'}`}
              />
              <Row
                label="Días"
                value={(data.courtDaysOfWeek ?? []).map((d) => DAY_LABELS[d] ?? d).join(', ')}
              />
            </>
          ) : (
            <p className="text-sm text-muted-foreground">
              No se crearán canchas automáticamente. Podés agregarlas después.
            </p>
          )}
        </Section>
      </div>
    </div>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <h3 className="mb-2 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
        {title}
      </h3>
      <div className="space-y-1.5">{children}</div>
    </div>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between gap-4 text-sm">
      <span className="shrink-0 text-muted-foreground">{label}</span>
      <span className="flex-1 text-end font-medium">{value}</span>
    </div>
  );
}