import React from 'react'
import { notFound, redirect } from 'next/navigation'
import { getServerSession } from 'next-auth'
import { authOptions } from '@/lib/auth'
import { prisma } from '@/lib/prisma'
import { SpotEditForm } from '@/components/spots/SpotEditForm'

interface Props { params: { id: string } }

function parseJsonField(val: unknown): string[] {
  if (Array.isArray(val)) return val as string[]
  if (typeof val === 'string') { try { const p = JSON.parse(val); return Array.isArray(p) ? p : [] } catch { return [] } }
  return []
}

export default async function EditarSpotPage({ params }: Props) {
  const session = await getServerSession(authOptions)
  if (!session?.user?.id) redirect('/auth/signin')

  const spot = await prisma.spot.findUnique({
    where: { id: params.id },
    select: { id: true, authorId: true, name: true, description: true, lat: true, lng: true, altitude: true, difficulty: true, tags: true, images: true },
  })
  if (!spot) notFound()

  const isOwner = spot.authorId === session.user.id
  const isMod = ['MODERATOR', 'ADMIN'].includes((session.user as any).role ?? '')
  if (!isOwner && !isMod) notFound()

  const tags = parseJsonField(spot.tags)
  const images = parseJsonField(spot.images).map(p => p.startsWith('/uploads/') ? `/api${p}` : p)

  return (
    <div style={{ maxWidth: 720, margin: '0 auto', padding: 'var(--ov-space-8) var(--ov-space-4)' }}>
      <h1 style={{ fontFamily: 'var(--ov-font-display)', fontSize: 'var(--ov-text-2xl)', marginBottom: 'var(--ov-space-6)' }}>
        Editar Spot
      </h1>
      <SpotEditForm
        spotId={spot.id}
        initialName={spot.name}
        initialDescription={spot.description}
        initialLat={spot.lat}
        initialLng={spot.lng}
        initialAltitude={spot.altitude}
        initialDifficulty={spot.difficulty as 'BEGINNER' | 'INTERMEDIATE' | 'ADVANCED'}
        initialTags={tags}
        initialImages={images}
      />
    </div>
  )
}