import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { type Court, type CreateCourtInput } from '@repo/api-contract'
import { MapPin } from 'lucide-react'
import { apiClient } from '@/lib/api-client'
import { CourtFormSection } from './court-form-section'
import { CourtListSection } from './court-list-section'
import { Separator } from '@/components/ui/separator'

type ComplexCourtsSectionProps = {
  complexId: string | null
}

export function ComplexCourtsSection({
  complexId,
}: ComplexCourtsSectionProps) {
  const [editingCourt, setEditingCourt] = useState<Court | null>(null)
  const [initialDraft, setInitialDraft] = useState<CreateCourtInput | null>(null)

  const courtsQuery = useQuery({
    queryKey: ['courts', complexId],
    enabled: Boolean(complexId),
    queryFn: () => apiClient.courts.listByComplex(complexId as string),
  })

  return (
    <section className="mt-6 rounded-xl border bg-card p-5">
      <div className="flex items-center gap-2">
        <MapPin className="size-5 text-muted-foreground" />
        <h3 className="text-lg font-medium">Canchas</h3>
      </div>
      <Separator className="my-4" />
      <p className="mb-4 text-sm text-muted-foreground">
        Alta y edición de canchas del complejo.
      </p>

      <CourtFormSection
        complexId={complexId}
        editingCourt={editingCourt}
        initialDraft={initialDraft}
        onCancelEdit={() => {
          setEditingCourt(null)
        }}
      />

      <CourtListSection
        courts={courtsQuery.data ?? []}
        isLoading={courtsQuery.isLoading}
        isError={courtsQuery.isError}
        onDuplicateCourt={(court) => {
          setEditingCourt(null)
          setInitialDraft({
            name: `${court.name} - Copy`,
            sportId: court.sportId,
            slotDurationMinutes: court.slotDurationMinutes,
            basePrice: court.basePrice,
            availability: court.availability.map((slot) => ({
              dayOfWeek: slot.dayOfWeek,
              startTime: slot.startTime,
              endTime: slot.endTime,
            })),
          })
          window.scrollTo({ top: 0, behavior: 'smooth' })
        }}
        onEditCourt={(court) => {
          setInitialDraft(null)
          setEditingCourt(court)
          window.scrollTo({ top: 0, behavior: 'smooth' })
        }}
      />
    </section>
  )
}