'use client'

import { trpc } from '@/lib/trpc/client'
import { Card, CardContent } from '@/components/ui/card'
import { Calendar, MapPin, Salad, Clock } from 'lucide-react'

export function LunchBanner({ programId }: { programId: string }) {
  const { data: event } = trpc.lunch.getEventForMember.useQuery({ programId })
  if (!event) return null
  const fmt = new Intl.DateTimeFormat(undefined, {
    timeZone: 'Europe/Monaco',
    dateStyle: 'long',
    timeStyle: 'short',
  })
  const eventAt = event.eventAt ? new Date(event.eventAt) : null
  const deadline = event.changeDeadline ? new Date(event.changeDeadline) : null
  const deadlinePassed = deadline ? new Date() > deadline : false

  return (
    <Card>
      <CardContent className="flex flex-wrap items-center gap-4 py-3 text-sm">
        <Salad className="h-4 w-4 text-emerald-500" />
        <span className="font-medium">Lunch event</span>
        {eventAt && (
          <span className="flex items-center gap-1.5">
            <Calendar className="h-4 w-4" /> {fmt.format(eventAt)}{' '}
            <span className="text-muted-foreground text-xs">(Monaco time)</span>
          </span>
        )}
        {event.venue && (
          <span className="flex items-center gap-1.5">
            <MapPin className="h-4 w-4" /> {event.venue}
          </span>
        )}
        {deadline && (
          <span
            className={`text-muted-foreground ml-auto flex items-center gap-1.5 ${deadlinePassed ? 'text-destructive' : ''}`}
          >
            <Clock className="h-4 w-4" />
            {deadlinePassed ? 'Picks closed' : 'Picks close'}: {fmt.format(deadline)}
          </span>
        )}
        {event.notes && (
          <details className="basis-full">
            <summary className="text-muted-foreground cursor-pointer text-xs">
              Notes from organizers
            </summary>
            <p className="mt-1 text-sm whitespace-pre-wrap">{event.notes}</p>
          </details>
        )}
      </CardContent>
    </Card>
  )
}
