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

import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { useSession } from 'next-auth/react'
import { Badge, statusBadgeVariant, jobTypeBadgeVariant } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Select } from '@/components/ui/Select'
import { Spinner } from '@/components/ui/Spinner'

interface Job {
  id: string; title: string; companyName: string; location: string
  jobType: string; salaryRange?: string; status: string; createdAt: string
  employer?: { name: string; surname: string }
  isExternal?: boolean
  applyUrl?: string
  source?: string
  category?: string
  description?: string
}

const JOB_TYPE_OPTIONS = [
  { value: '', label: 'All types' },
  { value: 'FULL_TIME', label: 'Full-time' },
  { value: 'PART_TIME', label: 'Part-time' },
  { value: 'CONTRACT', label: 'Contract' },
  { value: 'FREELANCE', label: 'Freelance' },
  { value: 'INTERNSHIP', label: 'Internship' },
]

function formatJobType(t: string) {
  return t.replace('_', '-').toLowerCase().replace(/^\w/, (c) => c.toUpperCase())
}

export default function JobBoardPage() {
  const { data: session } = useSession()
  const [jobs, setJobs] = useState<Job[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [jobType, setJobType] = useState('')
  const [location, setLocation] = useState('')
  const [page, setPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)

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

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

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

  function handleSearch(e: React.FormEvent) {
    e.preventDefault()
    setPage(1)
    fetchJobs()
  }

  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">Job Board</h1>
          <p className="page-subtitle">Browse local job opportunities</p>
        </div>
        {session && ['EMPLOYER', 'ADMIN'].includes(session.user.role) && (
          <Link href="/jobs/create">
            <Button>Post a Job</Button>
          </Link>
        )}
      </div>

      {/* Filters */}
      <form onSubmit={handleSearch} className="card p-4 mb-6">
        <div className="grid sm:grid-cols-3 gap-3">
          <Input
            id="jobs-search"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search title, company, keyword..."
          />
          <Input
            id="jobs-location"
            value={location}
            onChange={(e) => setLocation(e.target.value)}
            placeholder="Location"
          />
          <Select
            id="jobs-type"
            value={jobType}
            onChange={(e) => setJobType(e.target.value)}
            options={JOB_TYPE_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(''); setJobType(''); setLocation(''); setPage(1) }}>
            Clear
          </Button>
        </div>
      </form>

      {/* Results */}
      {loading ? (
        <div className="flex justify-center py-16"><Spinner size="lg" /></div>
      ) : jobs.length === 0 ? (
        <div className="card p-12 text-center">
          <p className="text-neutral-500 text-lg">No jobs found.</p>
          <p className="text-neutral-400 text-sm mt-2">Try adjusting your search filters.</p>
        </div>
      ) : (
        <>
            {jobs.map((job) => {
              const cardContent = (
                <div className="flex flex-col gap-4">
                  <div className="flex flex-col sm:flex-row sm:items-center gap-4">
                    <div className="flex-1 min-w-0">
                      <div className="flex flex-wrap items-center gap-2 mb-1.5">
                        <h2 className="text-base font-bold text-white group-hover:text-[#FF7628] transition-colors truncate">
                          {job.title}
                        </h2>
                        <Badge variant={jobTypeBadgeVariant(job.jobType)}>
                          {formatJobType(job.jobType)}
                        </Badge>
                        {job.isExternal && (
                          <Badge variant="yellow">External Listing</Badge>
                        )}
                        {job.category && (
                          <Badge variant="gray">{job.category}</Badge>
                        )}
                      </div>
                      <p className="text-sm font-semibold text-[#D7E3DC]">{job.companyName}</p>
                      {job.description && (
                        <p className="text-xs text-[#8EA398] mt-2 line-clamp-2 leading-relaxed bg-[#032A1A]/40 p-2 rounded-lg border border-[rgba(215,227,220,0.05)]">
                          {job.description}
                        </p>
                      )}
                      <div className="flex flex-wrap items-center gap-3 mt-3 text-xs text-[#8EA398]">
                        <span className="flex items-center gap-1">
                          <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                          </svg>
                          {job.location}
                        </span>
                        {job.salaryRange && <span>{job.salaryRange}</span>}
                        {job.source && (
                          <span className="bg-[#063B25] text-white px-2 py-0.5 rounded text-[10px]">
                            Source: {job.source}
                          </span>
                        )}
                        <span>{new Date(job.createdAt).toLocaleDateString()}</span>
                      </div>
                    </div>
                    
                    <div className="shrink-0 flex items-center gap-2">
                      {session?.user?.role === 'ADMIN' && (
                        <Badge variant={statusBadgeVariant(job.status)}>{job.status}</Badge>
                      )}
                      
                      {job.isExternal ? (
                        <a 
                          href={job.applyUrl} 
                          target="_blank" 
                          rel="noopener noreferrer"
                          onClick={(e) => e.stopPropagation()}
                          className="no-underline inline-block"
                        >
                          <Button size="sm" className="bg-[#FF7628] hover:bg-[#e55a13] text-white font-bold text-xs">
                            Apply on original site
                          </Button>
                        </a>
                      ) : (
                        <svg className="h-4 w-4 text-neutral-300 group-hover:text-[#FF7628] transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                      )}
                    </div>
                  </div>
                </div>
              )

              if (job.isExternal && job.applyUrl) {
                return (
                  <div 
                    key={job.id}
                    onClick={() => window.open(job.applyUrl, '_blank', 'noopener,noreferrer')}
                    className="card p-5 hover:shadow-card-hover transition-all cursor-pointer group bg-[#164B35] border border-[rgba(215,227,220,0.12)]"
                  >
                    {cardContent}
                  </div>
                )
              }

              return (
                <Link key={job.id} href={`/jobs/${job.id}`}>
                  <div className="card p-5 hover:shadow-card-hover transition-all cursor-pointer group bg-[#164B35] border border-[rgba(215,227,220,0.12)]">
                    {cardContent}
                  </div>
                </Link>
              )
            })}

          {/* Pagination */}
          {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>
  )
}