/**
 * Staff Careers Management Dashboard
 *
 * Features:
 * - Jobs Management (create/edit/delete job postings)
 * - Applications Management (view/update status/download CVs)
 * - Permissions: STAFF (view), ADMIN (edit), SUPER_ADMIN (delete)
 */

"use client";

import { useState, useEffect } from "react";
import { Plus, Briefcase, Users, FileText } from "lucide-react";
import JobsList from "./components/JobsList";
import ApplicationsList from "./components/ApplicationsList";
import CreateJobModal from "./components/CreateJobModal";

type TabType = "jobs" | "applications";

export default function CareersManagementPage() {
  const [activeTab, setActiveTab] = useState<TabType>("jobs");
  const [showCreateJobModal, setShowCreateJobModal] = useState(false);
  const [user, setUser] = useState<any>(null);
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  useEffect(() => {
    // Get current user session
    fetch("/api/staff/auth/session")
      .then((res) => res.json())
      .then((data) => {
        if (data.user) {
          setUser(data.user);
        }
      })
      .catch((err) => console.error("Failed to get session:", err));
  }, []);

  const canCreateJobs = user && ["ADMIN", "SUPER_ADMIN"].includes(user.role);

  const handleJobCreated = () => {
    setShowCreateJobModal(false);
    setRefreshTrigger((prev) => prev + 1);
  };

  const handleApplicationUpdated = () => {
    setRefreshTrigger((prev) => prev + 1);
  };

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-brand-ink flex items-center gap-3">
            <Briefcase className="w-8 h-8 text-brand-green" />
            Careers Management
          </h1>
          <p className="mt-1 text-sm text-gray-600">
            Manage job postings and track applications
          </p>
        </div>

        {canCreateJobs && activeTab === "jobs" && (
          <button
            onClick={() => setShowCreateJobModal(true)}
            className="inline-flex items-center gap-2 px-6 py-3 bg-brand-green text-white font-semibold rounded-lg hover:bg-green-600 transition-all shadow-md hover:shadow-lg"
          >
            <Plus className="w-5 h-5" />
            Create Job
          </button>
        )}
      </div>

      {/* Tabs */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200">
        <div className="flex border-b border-gray-200">
          <button
            onClick={() => setActiveTab("jobs")}
            className={`flex-1 flex items-center justify-center gap-2 px-6 py-4 font-semibold transition-all ${
              activeTab === "jobs"
                ? "text-brand-green border-b-2 border-brand-green bg-green-50/50"
                : "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
            }`}
          >
            <FileText className="w-5 h-5" />
            Job Postings
          </button>
          <button
            onClick={() => setActiveTab("applications")}
            className={`flex-1 flex items-center justify-center gap-2 px-6 py-4 font-semibold transition-all ${
              activeTab === "applications"
                ? "text-brand-green border-b-2 border-brand-green bg-green-50/50"
                : "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
            }`}
          >
            <Users className="w-5 h-5" />
            Applications
          </button>
        </div>

        {/* Tab Content */}
        <div className="p-6">
          {activeTab === "jobs" && (
            <JobsList
              userRole={user?.role}
              refreshTrigger={refreshTrigger}
              onJobUpdated={() => setRefreshTrigger((prev) => prev + 1)}
            />
          )}
          {activeTab === "applications" && (
            <ApplicationsList
              userRole={user?.role}
              refreshTrigger={refreshTrigger}
              onApplicationUpdated={handleApplicationUpdated}
            />
          )}
        </div>
      </div>

      {/* Create Job Modal */}
      {showCreateJobModal && (
        <CreateJobModal
          isOpen={showCreateJobModal}
          onClose={() => setShowCreateJobModal(false)}
          onJobCreated={handleJobCreated}
        />
      )}
    </div>
  );
}