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

import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { useSession } from 'next-auth/react'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Select } from '@/components/ui/Select'
import { Badge, statusBadgeVariant } from '@/components/ui/Badge'
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
  provider?: { name: string; surname: string }
}

const CATEGORY_OPTIONS = [
  { value: '', label: 'All categories' },
  { value: 'Web Development', label: 'Web Development' },
  { value: 'Mobile Development', label: 'Mobile Development' },
  { value: 'Graphic Design', label: 'Graphic Design' },
  { value: 'Digital Marketing', label: 'Digital Marketing' },
  { value: 'Photography', label: 'Photography & Video' },
  { value: 'Writing & Editing', label: 'Writing & Editing' },
  { value: 'Career Services', label: 'Career Services' },
  { value: 'Business Consulting', label: 'Business Consulting' },
  { value: 'Accounting', label: 'Accounting & Finance' },
  { value: 'Tutoring', label: 'Tutoring & Training' },
]

export default function ServicesPage() {
  const { data: session } = useSession()
  const [services, setServices] = useState<Service[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [category, setCategory] = useState('')
  const [location, setLocation] = useState('')
  const [page, setPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)

  const fetchServices = useCallback(async () => {
    setLoading(true)
    const params = new URLSearchParams()
    if (search) params.set('search', search)
    if (category) params.set('category', category)
    if (location) params.set('location', location)
    params.set('page', String(page))

    const res = await fetch(`/api/services?${params}`)
    const data = await res.json()
    setServices(data.services ?? [])
    setTotalPages(data.pages ?? 1)
    setLoading(false)
  }, [search, category, location, page])

  useEffect(() => { fetchServices() }, [fetchServices])

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-8">
        <div>
          <h1 className="page-title">Service Marketplace</h1>
          <p className="page-subtitle">Find skilled freelancers and local service providers</p>
        </div>
        {session && ['SERVICE_PROVIDER', 'ADMIN'].includes(session.user.role) && (
          <Link href="/services/create">
            <Button>List a Service</Button>
          </Link>
        )}
      </div>

      {/* Filters */}
      <form
        onSubmit={(e) => { e.preventDefault(); setPage(1); fetchServices() }}
        className="card p-4 mb-6"
      >
        <div className="grid sm:grid-cols-3 gap-3">
          <Input id="services-search" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search services..." />
          <Input id="services-location" value={location} onChange={(e) => setLocation(e.target.value)} placeholder="Location" />
          <Select id="services-category" value={category} onChange={(e) => setCategory(e.target.value)} options={CATEGORY_OPTIONS} />
        </div>
        <div className="mt-3 flex gap-2">
          <Button type="submit" size="sm">Search</Button>
          <Button type="button" variant="ghost" size="sm" onClick={() => { setSearch(''); setCategory(''); setLocation(''); setPage(1) }}>Clear</Button>
        </div>
      </form>

      {/* Results */}
      {loading ? (
        <div className="flex justify-center py-16"><Spinner size="lg" /></div>
      ) : services.length === 0 ? (
        <div className="card p-12 text-center">
          <p className="text-neutral-500 text-lg">No services found.</p>
          <p className="text-neutral-400 text-sm mt-2">Try a different search or category.</p>
        </div>
      ) : (
        <>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {services.map((svc) => (
              <Link key={svc.id} href={`/services/${svc.id}`}>
                <div className="card p-5 hover:shadow-card-hover transition-shadow cursor-pointer group flex flex-col h-full">
                  <div className="flex items-start justify-between gap-2 mb-3">
                    <Badge variant="blue">{svc.category}</Badge>
                    {session?.user?.role === 'ADMIN' && (
                      <Badge variant={statusBadgeVariant(svc.status)}>{svc.status}</Badge>
                    )}
                  </div>
                  <h2 className="text-base font-bold text-neutral-900 group-hover:text-brand-600 transition-colors mb-1 leading-snug">
                    {svc.title}
                  </h2>
                  <p className="text-sm text-neutral-500 line-clamp-2 flex-1 leading-relaxed">
                    {svc.description}
                  </p>
                  <div className="mt-4 flex items-center justify-between">
                    <div>
                      {svc.priceFrom != null && (
                        <p className="text-emerald-600 font-bold text-sm">from R{svc.priceFrom.toLocaleString()}</p>
                      )}
                      {svc.location && (
                        <p className="text-xs text-neutral-400 mt-0.5">{svc.location}</p>
                      )}
                    </div>
                    <p className="text-xs text-neutral-400">
                      {svc.provider?.name} {svc.provider?.surname}
                    </p>
                  </div>
                </div>
              </Link>
            ))}
          </div>

          {totalPages > 1 && (
            <div className="flex items-center justify-center gap-2 mt-8">
              <Button variant="secondary" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>← Prev</Button>
              <span className="text-sm text-neutral-500">Page {page} of {totalPages}</span>
              <Button variant="secondary" size="sm" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>Next →</Button>
            </div>
          )}
        </>
      )}
    </div>
  )
}