import { Button } from '@/components/ui/button';
import type { PublicBookingConfirmation } from '@repo/api-contract';
import { siWhatsapp } from 'simple-icons';

type ShareWhatsappButtonProps = {
  confirmation: PublicBookingConfirmation;
};

function formatDateLabel(isoDate: string) {
  const [year, month, day] = isoDate.split('-').map(Number);
  const date = new Date(year, (month ?? 1) - 1, day ?? 1);

  return new Intl.DateTimeFormat('es-AR', {
    weekday: 'long',
    day: '2-digit',
    month: 'long',
    year: 'numeric',
  }).format(date);
}

function createWhatsappMessage(confirmation: PublicBookingConfirmation) {
  const dateLabel = formatDateLabel(confirmation.date);
  return [
    'Ya reservamos cancha para jugar.',
    `Complejo: ${confirmation.complexName}`,
    `Cancha: ${confirmation.courtName} (${confirmation.sport.name})`,
    `Fecha: ${dateLabel}`,
    `Horario: ${confirmation.startTime} - ${confirmation.endTime}`,
    `Codigo de reserva: ${confirmation.bookingCode}`,
  ].join('\n');
}

export function ShareWhatsappButton({ confirmation }: ShareWhatsappButtonProps) {
  const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(
    createWhatsappMessage(confirmation)
  )}`;

  return (
    <Button type="button" variant="outline" className="h-11 w-full text-sm sm:text-base" asChild>
      <a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
        <svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          className="size-4"
          style={{ color: `#${siWhatsapp.hex}` }}
        >
          <path d={siWhatsapp.path} fill="currentColor" />
        </svg>
        Compartir por WhatsApp
      </a>
    </Button>
  );
}
