'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { api } from '@/lib/api';

interface MyApp {
  application_id: number;
  job_id: number;
  job_public_id?: string;
  job_title: string | null;
  location: string | null;
  stage: string | null;
  round1_outcome: string;
  applied_at: string;
}

const STAGE_COLOR: Record<string, string> = {
  Contacted: 'bg-blue-100 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300',
  Shortlisted: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300',
  Interview: 'bg-purple-100 text-purple-700 dark:bg-purple-950/40 dark:text-purple-300',
  Selected: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
  Offer: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
  Rejected: 'bg-rose-100 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300',
};

/** The candidate's applied / assigned JDs (from /public/my-applications/). */
export default function CandidateMyApplications({
  apps,
  loading,
}: {
  apps: MyApp[];
  loading: boolean;
}) {


  return (
    <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-5 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-sm font-bold text-slate-800 dark:text-white">
          <i className="fa-solid fa-paper-plane text-[#405189] mr-2" />My Applications
          {!loading && <span className="text-slate-400 font-normal"> ({apps.length})</span>}
        </h3>
        <Link href="/careers/jobs" className="text-xs font-bold text-[#405189] hover:underline">Find more jobs →</Link>
      </div>

      {loading ? (
        <p className="text-slate-400 text-sm py-6 text-center">Loading…</p>
      ) : apps.length === 0 ? (
        <div className="py-8 text-center">
          <p className="text-slate-500 dark:text-slate-400 text-sm">You haven&apos;t applied to any jobs yet.</p>
          <Link href="/careers/jobs" className="inline-block mt-3 px-5 py-2 bg-[#405189] text-white font-bold text-sm hover:bg-[#334267] transition">Browse jobs</Link>
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-xs min-w-[560px]">
            <thead>
              <tr className="border-b border-slate-100 dark:border-slate-800">
                {['Job', 'Location', 'Applied On', 'Stage'].map((h) => (
                  <th key={h} className="text-left py-2 px-2 text-[10px] font-extrabold uppercase tracking-wider text-slate-400">{h}</th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50 dark:divide-slate-800">
              {apps.map((a) => (
                <tr key={a.application_id} className="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition">
                  <td className="py-2.5 px-2 font-semibold text-slate-800 dark:text-slate-200">
                    <Link href={`/careers/jobs/${a.job_public_id || a.job_id}`} className="hover:text-[#405189]">{a.job_title || `Job #${a.job_id}`}</Link>
                  </td>
                  <td className="py-2.5 px-2 text-slate-500 dark:text-slate-400">{a.location || '—'}</td>
                  <td className="py-2.5 px-2 text-slate-500 dark:text-slate-400 whitespace-nowrap">{new Date(a.applied_at).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })}</td>
                  <td className="py-2.5 px-2">
                    <span className={`px-2 py-0.5 rounded-none text-[10px] font-bold ${STAGE_COLOR[a.stage || ''] || 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300'}`}>
                      {a.stage || 'Applied'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}