'use client';

import { useEffect, useState } from 'react';
import JobsFiltersDrawer from '@/components/ats/jobs-filters-drawer';
import { sort_jobs } from '@/lib/ats/jobs-sort';

export default function JobsPage() {
  const [jobs, set_jobs] = useState<any[]>([]);
  const [active_job, set_active_job] = useState<any | null>(null);
  const [filters_open, set_filters_open] = useState(false);
  const [filters, set_filters] = useState<any>({});

  useEffect(() => {
    fetch('/api/recruiter/pending')
      .then(r => r.json())
      .then(d => {
        const list = d.jobs || [];
        set_jobs(list);
        set_active_job(list[0] || null);
      });
  }, []);

  const is_mobile =
    typeof window !== 'undefined' && window.innerWidth < 768;

  const filtered_jobs = jobs.filter(job => {
    if (filters.q && !job.title.toLowerCase().includes(filters.q.toLowerCase())) {
      return false;
    }
    if (filters.status === 'urgent' && job.to_review <= 5) {
      return false;
    }
    return true;
  });

  const sorted_jobs = sort_jobs(filtered_jobs);

  return (
    <div className="jobs-page">
      {/* header mobile */}
      <div className="jobs-header mobile-only">
        <h1>offres d’emploi</h1>
        <button onClick={() => set_filters_open(true)}>
          filtres
        </button>
      </div>

      <div className="jobs-layout">
        {/* liste offres */}
        {(!is_mobile || !active_job) && (
          <div className="jobs-list">
            {sorted_jobs.map(job => {
              const is_urgent = job.to_review > 5;
              const is_new =
                Date.now() - new Date(job.created_at).getTime() < 172800000;

              return (
                <div
                  key={job.id}
                  className={`job-card ${
                    active_job?.id === job.id ? 'active' : ''
                  }`}
                  onClick={() => set_active_job(job)}
                >
                  <h3>{job.title}</h3>

                  <div className="job-meta">
                    {job.city} · {job.contract_type}
                  </div>

                  <div className="job-badges">
                    {is_urgent && (
                      <span className="badge badge-red">urgent</span>
                    )}
                    {is_new && (
                      <span className="badge badge-blue">nouveau</span>
                    )}
                  </div>

                  <div className="job-stats">
                    <span>{job.total_candidates} candidats</span>
                    <span className="highlight">
                      {job.to_review} à traiter
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* aperçu offre */}
        {active_job && (
          <div className="job-preview">
            {is_mobile && (
              <button
                className="back-button"
                onClick={() => set_active_job(null)}
              >
                ← retour aux offres
              </button>
            )}

            <h2>{active_job.title}</h2>
            <p>
              {active_job.city} · {active_job.contract_type}
            </p>

            <div className="kpis">
              <div>{active_job.total_candidates} candidats</div>
              <div>{active_job.to_review} à traiter</div>
              <div>{active_job.accepted} acceptés</div>
              <div>{active_job.rejected} refusés</div>
            </div>

            <div className="actions">
              <a href={`/recruiter/jobs/${active_job.id}/matches`}>
                voir les candidats
              </a>
              <button>exporter</button>
            </div>
          </div>
        )}
      </div>

      {/* drawer filtres mobile */}
      <JobsFiltersDrawer
        open={filters_open}
        values={filters}
        onChange={set_filters}
        onClose={() => set_filters_open(false)}
      />
    </div>
  );
}