'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import { createClient } from '@/lib/supabase/client';

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

  useEffect(() => {
    if (!id) return;
    const fetchJob = async () => {
      const { data } = await supabase
        .from('marketplace_jobs')
        .select('*')
        .eq('id', id)
        .eq('status', 'active')
        .maybeSingle();
      setJob(data);
      setLoading(false);
    };
    fetchJob();
  }, [id]);

  if (loading) {
    return (
      <div className="min-h-screen bg-[#F8FAFC] flex items-center justify-center">
        <div className="w-8 h-8 border-4 border-[#CC0000] border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  if (!job) {
    return (
      <div className="min-h-screen bg-[#F8FAFC] text-white flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-2">Job Not Found</h1>
          <Link href="/marketplace/jobs" className="text-[#CC0000] hover:underline">Back to Jobs</Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#F8FAFC] text-white">
      <Header />
      <div className="max-w-3xl mx-auto px-4 py-24">
        <div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
          <Link href="/marketplace" className="hover:text-[#CC0000]">Marketplace</Link>
          <span>/</span>
          <Link href="/marketplace/jobs" className="hover:text-[#CC0000]">Jobs</Link>
          <span>/</span>
          <span className="text-white truncate">{job.title}</span>
        </div>

        <div className="bg-[#FFFFFF] rounded-2xl border border-white/10 overflow-hidden">
          <div className="bg-gradient-to-r from-[#CC0000]/20 to-transparent p-8">
            <h1 className="text-2xl font-black mb-2">{job.title}</h1>
            <div className="text-[#CC0000] font-bold text-lg mb-4">{job.company}</div>
            <div className="flex flex-wrap gap-4 text-sm text-gray-300">
              <span>📍 {job.location}</span>
              <span className="capitalize">🕐 {job.job_type?.replace('_', ' ')}</span>
              {(job.salary_min || job.salary_max) && (
                <span>💵 {job.salary_min && job.salary_max
                  ? `$${job.salary_min.toLocaleString()} – $${job.salary_max.toLocaleString()}`
                  : job.salary_min ? `From $${job.salary_min.toLocaleString()}` : `Up to $${job.salary_max?.toLocaleString()}`}
                </span>
              )}
              {job.expires_at && (
                <span>📅 Closes {new Date(job.expires_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</span>
              )}
            </div>
          </div>

          <div className="p-8 space-y-6">
            <section>
              <h2 className="text-sm font-bold uppercase tracking-wide text-gray-400 mb-3">Job Description</h2>
              <div className="text-gray-300 leading-relaxed whitespace-pre-wrap">{job.description}</div>
            </section>

            <div className="border-t border-white/10 pt-6">
              <h2 className="text-sm font-bold uppercase tracking-wide text-gray-400 mb-4">How to Apply</h2>
              <div className="flex flex-wrap gap-3">
                {job.apply_url && (
                  <a href={job.apply_url} target="_blank" rel="noopener noreferrer"
                    className="bg-[#CC0000] hover:bg-red-700 text-white font-bold px-6 py-3 rounded-lg transition-colors">
                    Apply Now →
                  </a>
                )}
                {job.apply_email && (
                  <a href={`mailto:${job.apply_email}?subject=Application: ${job.title}`}
                    className="bg-white/10 hover:bg-white/20 border border-white/20 text-white font-bold px-6 py-3 rounded-lg transition-colors">
                    ✉ Email Application
                  </a>
                )}
                {!job.apply_url && !job.apply_email && (
                  <p className="text-gray-400 text-sm">Contact the employer directly for application instructions.</p>
                )}
              </div>
            </div>

            <div className="text-xs text-gray-500 border-t border-white/10 pt-4">
              Posted {new Date(job.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
            </div>
          </div>
        </div>

        <div className="mt-6 text-center">
          <Link href="/marketplace/jobs" className="text-[#CC0000] hover:underline text-sm">← Back to Job Board</Link>
        </div>
      </div>
      <Footer />
    </div>
  );
}
