'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Header } from '@/app/components/Header';
import { Footer } from '@/app/components/Footer';
import api from '@/lib/api';

export default function JobDetailPage() {
  const params = useParams();
  const slug = params?.slug as string;
  
  const [job, setJob] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (slug) {
      fetchJob();
    }
  }, [slug]);

  const fetchJob = async () => {
    try {
      setLoading(true);
      const data: any = await api.getJob(slug);
      setJob(data);
    } catch (err: any) {
      setError(err?.message || 'Failed to load job details');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="flex items-center justify-center min-h-[60vh]">
          <div className="text-center">
            <div className="inline-block w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin mb-4"></div>
            <p className="text-neutral-600">Loading job details...</p>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  if (error || !job) {
    return (
      <div className="min-h-screen bg-white">
        <Header />
        <div className="flex items-center justify-center min-h-[60vh]">
          <div className="text-center">
            <p className="text-red-600 mb-4">{error || 'Job not found'}</p>
            <Link href="/careers" className="text-primary-600 hover:text-primary-700 font-medium">
              ← Back to Careers
            </Link>
          </div>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-white">
      <Header />
      
      <section className="relative overflow-hidden border-b border-secondary-200 bg-white pt-28 pb-12 sm:pt-32">
        <div className="pointer-events-none absolute -left-24 top-10 h-64 w-64 rounded-full bg-primary-500/10 blur-3xl" />
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <Link
            href="/careers"
            className="inline-flex cursor-pointer items-center gap-2 text-sm font-bold text-navy-800 hover:text-primary-600"
          >
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Back to Work with Us
          </Link>

          <div className="mt-6 flex flex-wrap items-center gap-2">
            <span className="rounded-full bg-primary-500 px-3 py-1 text-xs font-bold uppercase tracking-wide text-neutral-900">
              {job.employment_type_label}
            </span>
            {job.is_expired ? (
              <span className="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-800">Expired</span>
            ) : (
              <span className="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">Open</span>
            )}
            {job.vacancy_reference_number && (
              <span className="text-xs font-medium text-neutral-400">{job.vacancy_reference_number}</span>
            )}
          </div>

          <h1 className="mt-4 text-3xl font-black leading-tight text-neutral-900 sm:text-4xl md:text-5xl">
            {job.title}
          </h1>

          <div className="mt-6 flex flex-wrap gap-x-6 gap-y-2 text-sm text-neutral-600">
            <span>{job.location}</span>
            <span>{job.gender_label}</span>
            <span>
              Deadline <strong className="text-neutral-900">{job.deadline_formatted}</strong>
            </span>
          </div>
        </div>
      </section>

      {/* Job Details Section */}
      <section className="py-16 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-12">
            {/* Description */}
            {job.description && (
              <div>
                <h2 className="text-2xl font-bold text-neutral-900 mb-4 flex items-center gap-3">
                  <div className="w-1.5 h-8 bg-primary-600 rounded-full"></div>
                  Job Description
                </h2>
                <div 
                  className="prose prose-lg max-w-none text-neutral-700 leading-relaxed [&_p]:mb-4 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:mb-2"
                  dangerouslySetInnerHTML={{ __html: job.description }}
                />
              </div>
            )}

            {/* Responsibilities */}
            {job.responsibilities && (
              <div>
                <h2 className="text-2xl font-bold text-neutral-900 mb-4 flex items-center gap-3">
                  <div className="w-1.5 h-8 bg-primary-600 rounded-full"></div>
                  Key Responsibilities
                </h2>
                <div 
                  className="prose prose-lg max-w-none text-neutral-700 leading-relaxed [&_p]:mb-4 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:mb-2"
                  dangerouslySetInnerHTML={{ __html: job.responsibilities }}
                />
              </div>
            )}

            {/* Requirements */}
            {job.requirements && (
              <div>
                <h2 className="text-2xl font-bold text-neutral-900 mb-4 flex items-center gap-3">
                  <div className="w-1.5 h-8 bg-primary-600 rounded-full"></div>
                  Requirements
                </h2>
                <div 
                  className="prose prose-lg max-w-none text-neutral-700 leading-relaxed [&_p]:mb-4 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:mb-2"
                  dangerouslySetInnerHTML={{ __html: job.requirements }}
                />
              </div>
            )}

            {/* Submission Guidelines */}
            {job.submission_guidelines && (
              <div className="bg-primary-50 border-2 border-primary-200 rounded-xl p-8">
                <h2 className="text-2xl font-bold text-primary-900 mb-4 flex items-center gap-3">
                  <svg className="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  How to Apply
                </h2>
                <div 
                  className="prose prose-lg max-w-none text-neutral-800 leading-relaxed [&_p]:mb-4 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:mb-2 [&_strong]:text-primary-900"
                  dangerouslySetInnerHTML={{ __html: job.submission_guidelines }}
                />
              </div>
            )}
          </div>

          {/* Back Button */}
          <div className="mt-12 border-t border-secondary-200 pt-8">
            <Link
              href="/careers"
              className="inline-flex cursor-pointer items-center rounded-lg bg-navy-800 px-6 py-3 text-sm font-bold text-white hover:bg-navy-700"
            >
              View all opportunities
            </Link>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}