"use client";

import { useState, useEffect } from "react";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { fetchPositions } from "@/lib/supabase/recruitment-actions";
import type { PositionWithRelations, PositionStatus } from "@/lib/supabase/recruitment-types";
import { POSITION_STATUS_LABELS } from "@/lib/supabase/recruitment-types";
import PageSkeleton from "./PageSkeleton";

const STATUS_BADGE_COLORS: Record<PositionStatus, string> = {
  draft: "bg-gray-100 text-gray-600 border-gray-200",
  open: "bg-teal-50 text-teal-700 border-teal-200",
  closed: "bg-red-50 text-red-700 border-red-200",
};

export default function RecruitmentPage({ onNavigate }: { onNavigate?: (view: "list" | "new" | "detail", id?: string) => void }) {
  const [positions, setPositions] = useState<PositionWithRelations[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetchPositions()
      .then((data) => { if (!cancelled) setPositions(data); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  if (loading) return <PageSkeleton />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Open Positions</h1>
          <p className="text-gray-500 mt-1">
            Track internal hiring requisitions and applicant pipelines
          </p>
        </div>
        <Button
          onClick={() => onNavigate?.("new")}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
        >
          <Plus className="w-4 h-4" />
          Add Position
        </Button>
      </div>

      {/* Table */}
      <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        {positions.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4">
              <Plus className="w-8 h-8 text-gray-300" />
            </div>
            <p className="text-gray-500 text-sm">No open positions yet</p>
            <p className="text-gray-400 text-xs mt-1">Add a position to start tracking applicants</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-100">
                  <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4">Title</th>
                  <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4 hidden md:table-cell">Department</th>
                  <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4 hidden sm:table-cell">Type</th>
                  <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4">Applicants</th>
                  <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider pb-3 px-4">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {positions.map((pos) => (
                  <tr
                    key={pos.id}
                    onClick={() => onNavigate?.("detail", pos.id)}
                    className="hover:bg-gray-50/50 transition-colors duration-150 cursor-pointer"
                  >
                    <td className="py-3 px-4">
                      <p className="text-sm font-medium text-gray-900">{pos.title}</p>
                      <p className="text-xs text-gray-500 mt-0.5">
                        {new Date(pos.created_at).toLocaleDateString()}
                      </p>
                    </td>
                    <td className="py-3 px-4 text-sm text-gray-600 hidden md:table-cell">
                      {pos.department?.name || "—"}
                    </td>
                    <td className="py-3 px-4 text-sm text-gray-600 hidden sm:table-cell">
                      {pos.employment_type.replace("_", " ")}
                    </td>
                    <td className="py-3 px-4 text-center text-sm text-gray-600">
                      {pos.applicant_count}
                    </td>
                    <td className="py-3 px-4 text-center">
                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${STATUS_BADGE_COLORS[pos.status]}`}>
                        {POSITION_STATUS_LABELS[pos.status]}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}