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

import { useState } from 'react'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Textarea } from '@/components/ui/Textarea'
import { Select } from '@/components/ui/Select'

const 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' },
  { value: 'Other', label: 'Other' },
]

export default function CreateServicePage() {
  const { data: session } = useSession()
  const router = useRouter()
  const [form, setForm] = useState({
    title: '', category: 'Web Development', priceFrom: '',
    location: '', description: '', tags: '', status: 'pending',
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [loading, setLoading] = useState(false)
  const [globalError, setGlobalError] = useState('')

  function update(field: string, value: string) {
    setForm((f) => ({ ...f, [field]: value }))
    setErrors((e) => ({ ...e, [field]: '' }))
  }

  if (!session || !['SERVICE_PROVIDER', 'ADMIN'].includes(session.user.role)) {
    return (
      <div className="page-header">
        <h1 className="page-title">Access Denied</h1>
        <p className="page-subtitle">Only service providers can list services.</p>
      </div>
    )
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setGlobalError('')
    setLoading(true)

    const payload = {
      ...form,
      priceFrom: form.priceFrom ? parseFloat(form.priceFrom) : undefined,
    }

    try {
      const res = await fetch('/api/services', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })
      const data = await res.json()

      if (!res.ok) {
        if (data.issues) {
          const fieldErrors: Record<string, string> = {}
          for (const [field, msgs] of Object.entries(data.issues as Record<string, string[]>)) {
            fieldErrors[field] = msgs[0] ?? 'Invalid'
          }
          setErrors(fieldErrors)
        } else {
          setGlobalError(data.error ?? 'Failed to create listing')
        }
        return
      }

      router.push('/services/' + data.service.id)
    } catch {
      setGlobalError('Something went wrong.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="max-w-2xl">
      <div className="page-header">
        <h1 className="page-title">List a Service</h1>
        <p className="page-subtitle">Describe what you offer. Your listing will be reviewed before going live.</p>
      </div>

      <form onSubmit={handleSubmit} className="card p-6 space-y-5">
        {globalError && <div className="p-3 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{globalError}</div>}
        <Input label="Service title" id="service-title" value={form.title} onChange={(e) => update('title', e.target.value)} placeholder="e.g. Custom Business Website" error={errors.title} required />
        <div className="grid sm:grid-cols-2 gap-4">
          <Select label="Category" id="service-category" value={form.category} onChange={(e) => update('category', e.target.value)} options={CATEGORIES} />
          <Input label="Starting price (R)" id="service-price" type="number" min="0" value={form.priceFrom} onChange={(e) => update('priceFrom', e.target.value)} placeholder="e.g. 1200" />
        </div>
        <Input label="Location (or Remote)" id="service-location" value={form.location} onChange={(e) => update('location', e.target.value)} placeholder="e.g. Cape Town or Remote" />
        <Textarea label="Description" id="service-description" value={form.description} onChange={(e) => update('description', e.target.value)} placeholder="Describe exactly what you offer, what's included, and your process..." className="min-h-[160px]" error={errors.description} required />
        <Input label="Tags (comma-separated)" id="service-tags" value={form.tags} onChange={(e) => update('tags', e.target.value)} placeholder="e.g. react, nextjs, tailwind" />
        <Select label="Save as" id="service-status" value={form.status} onChange={(e) => update('status', e.target.value)}
          options={[
            { value: 'draft', label: 'Draft (not visible)' },
            { value: 'pending', label: 'Submit for review' },
          ]}
        />
        <div className="flex gap-3 pt-2">
          <Button type="submit" loading={loading} size="lg">List Service</Button>
          <Button type="button" variant="secondary" size="lg" onClick={() => router.back()}>Cancel</Button>
        </div>
      </form>
    </div>
  )
}