// src/app/(public)/services/[id]/page.tsx
'use client'

import { useState, useEffect } from 'react'
import { useParams } from 'next/navigation'
import { useSession } from 'next-auth/react'
import Link from 'next/link'
import { Badge, statusBadgeVariant } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Spinner } from '@/components/ui/Spinner'

interface Service {
  id: string; title: string; category: string; priceFrom?: number; location?: string
  description: string; tags?: string; status: string; createdAt: string; providerId: string
  provider?: { name: string; surname: string }
}

export default function ServiceDetailPage() {
  const params = useParams<{ id: string }>()
  const { data: session } = useSession()
  const [service, setService] = useState<Service | null>(null)
  const [loading, setLoading] = useState(true)
  const [notFound, setNotFound] = useState(false)

  useEffect(() => {
    fetch(`/api/services/${params.id}`)
      .then((r) => { if (!r.ok) { setNotFound(true); return null } return r.json() })
      .then((d) => { if (d?.service) setService(d.service) })
      .finally(() => setLoading(false))
  }, [params.id])

  if (loading) return <div className="max-w-4xl mx-auto px-4 py-20 flex justify-center"><Spinner size="lg" /></div>
  if (notFound || !service) return (
    <div className="max-w-4xl mx-auto px-4 py-20 text-center">
      <h1 className="text-2xl font-bold text-neutral-800 mb-2">Service not found</h1>
      <Link href="/services"><Button variant="secondary">← Back to Services</Button></Link>
    </div>
  )

  const isOwner = session?.user?.id === service.providerId
  const isAdmin = session?.user?.role === 'ADMIN'
  const tags = service.tags?.split(',').map((t) => t.trim()).filter(Boolean) ?? []

  return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <Link href="/services" className="text-sm text-brand-600 hover:underline flex items-center gap-1 mb-6">
        ← Back to Services
      </Link>

      <div className="card p-8">
        <div className="flex flex-col sm:flex-row sm:items-start gap-4 mb-6">
          <div className="flex-1">
            <div className="flex flex-wrap items-center gap-2 mb-2">
              <Badge variant="blue">{service.category}</Badge>
              {isAdmin && <Badge variant={statusBadgeVariant(service.status)}>{service.status}</Badge>}
            </div>
            <h1 className="text-2xl font-bold text-neutral-900 mb-2" style={{ fontFamily: 'Space Grotesk, sans-serif' }}>
              {service.title}
            </h1>
            <p className="text-neutral-600">
              By {service.provider?.name} {service.provider?.surname}
            </p>
            <div className="flex flex-wrap gap-4 mt-3 text-sm text-neutral-500">
              {service.priceFrom != null && (
                <span className="text-emerald-600 font-bold text-lg">From R{service.priceFrom.toLocaleString()}</span>
              )}
              {service.location && <span>{service.location}</span>}
              <span>Listed {new Date(service.createdAt).toLocaleDateString()}</span>
            </div>
          </div>
          {(isOwner || isAdmin) && (
            <Link href={`/services/${service.id}/edit`}>
              <Button variant="secondary" size="sm">Edit</Button>
            </Link>
          )}
        </div>

        <hr className="border-neutral-200 my-6" />

        <div className="mb-6">
          <h2 className="text-lg font-bold text-neutral-900 mb-3" style={{ fontFamily: 'Space Grotesk, sans-serif' }}>
            About this service
          </h2>
          <p className="text-neutral-700 leading-relaxed whitespace-pre-line">{service.description}</p>
        </div>

        {tags.length > 0 && (
          <div className="mb-6">
            <h2 className="text-sm font-semibold text-neutral-600 mb-2">Tags</h2>
            <div className="flex flex-wrap gap-2">
              {tags.map((tag) => (
                <span key={tag} className="badge badge-gray">{tag}</span>
              ))}
            </div>
          </div>
        )}

        <hr className="border-neutral-200 my-6" />

        <div className="flex flex-wrap items-center gap-4">
          <a
            href={`mailto:?subject=Enquiry: ${encodeURIComponent(service.title)}&body=Hi, I found your service listing on Motif and would like to enquire about "${encodeURIComponent(service.title)}".`}
          >
            <Button size="lg">Contact Provider</Button>
          </a>
          <p className="text-sm text-neutral-500">Opens your email client</p>
        </div>
      </div>
    </div>
  )
}