/**
 * CreateJobModal Component
 * Full bilingual form for creating new job postings
 */

"use client";

import { useState } from "react";
import { X, Save, FileText } from "lucide-react";
import { fetchWithCSRF } from "@/lib/csrf-client";

interface CreateJobModalProps {
  isOpen: boolean;
  onClose: () => void;
  onJobCreated: () => void;
}

export default function CreateJobModal({
  isOpen,
  onClose,
  onJobCreated,
}: CreateJobModalProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [activeSection, setActiveSection] = useState<
    "basic" | "details" | "content"
  >("basic");

  const [formData, setFormData] = useState({
    // Basic Info
    slug: "",
    titleEn: "",
    titleAr: "",
    department: "engineering",
    departmentLabelEn: "Engineering",
    departmentLabelAr: "الهندسة",
    locationEn: "",
    locationAr: "",
    contractType: "full-time",
    contractTypeLabelEn: "Full-time",
    contractTypeLabelAr: "دوام كامل",
    level: "mid",
    levelLabelEn: "Mid-level",
    levelLabelAr: "مستوى متوسط",
    salaryEn: "",
    salaryAr: "",
    status: "draft",
    openingAt: new Date().toISOString().split("T")[0],
    closingAt: "",

    // Content (arrays - comma-separated input, will split)
    responsibilitiesEn: "",
    responsibilitiesAr: "",
    requirementsEn: "",
    requirementsAr: "",
    skillsEn: "",
    skillsAr: "",
    benefitsEn: "",
    benefitsAr: "",
    niceToHaveEn: "",
    niceToHaveAr: "",
    workdayEn: "",
    workdayAr: "",
    applicationInstructionsEn: "",
    applicationInstructionsAr: "",
  });

  if (!isOpen) return null;

  const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const splitByNewline = (text: string): string[] => {
    return text
      .split("\n")
      .map((line) => line.trim())
      .filter((line) => line.length > 0);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      // Validate required fields
      if (!formData.titleEn || !formData.titleAr) {
        alert("Job title is required in both languages");
        setIsSubmitting(false);
        return;
      }

      if (!formData.slug) {
        alert("Job slug is required");
        setIsSubmitting(false);
        return;
      }

      if (!formData.responsibilitiesEn || !formData.responsibilitiesAr) {
        alert("Responsibilities are required in both languages");
        setIsSubmitting(false);
        return;
      }

      // Build job object
      const jobData = {
        slug: formData.slug,
        title_translations: {
          en: formData.titleEn,
          ar: formData.titleAr,
        },
        department: formData.department,
        department_label: {
          en: formData.departmentLabelEn,
          ar: formData.departmentLabelAr,
        },
        location_translations: {
          en: formData.locationEn || "Remote",
          ar: formData.locationAr || "عن بُعد",
        },
        contract_type: formData.contractType,
        contract_type_label: {
          en: formData.contractTypeLabelEn,
          ar: formData.contractTypeLabelAr,
        },
        level: formData.level,
        level_label: {
          en: formData.levelLabelEn,
          ar: formData.levelLabelAr,
        },
        compensation_translations: {
          en: formData.salaryEn || "Competitive",
          ar: formData.salaryAr || "تنافسي",
        },
        responsibilities: {
          en: splitByNewline(formData.responsibilitiesEn),
          ar: splitByNewline(formData.responsibilitiesAr),
        },
        requirements: {
          en: splitByNewline(formData.requirementsEn),
          ar: splitByNewline(formData.requirementsAr),
        },
        skills: {
          en: splitByNewline(formData.skillsEn),
          ar: splitByNewline(formData.skillsAr),
        },
        benefits: {
          en: splitByNewline(formData.benefitsEn),
          ar: splitByNewline(formData.benefitsAr),
        },
        nice_to_have: {
          en: splitByNewline(formData.niceToHaveEn),
          ar: splitByNewline(formData.niceToHaveAr),
        },
        workday_expectations: {
          en: splitByNewline(formData.workdayEn),
          ar: splitByNewline(formData.workdayAr),
        },
        application_instructions: {
          en:
            formData.applicationInstructionsEn ||
            "Submit your application through our website",
          ar: formData.applicationInstructionsAr || "قدم طلبك من خلال موقعنا",
        },
        status: formData.status,
        opening_at: formData.openingAt
          ? new Date(formData.openingAt).toISOString()
          : new Date().toISOString(),
        closing_at: formData.closingAt
          ? new Date(formData.closingAt).toISOString()
          : null,
      };

      const response = await fetchWithCSRF("/api/staff/jobs", {
        method: "POST",
        body: JSON.stringify(jobData),
      });

      const result = await response.json();

      if (!response.ok) {
        throw new Error(result.error || "Failed to create job");
      }

      alert("Job created successfully!");
      onJobCreated();
    } catch (error: any) {
      console.error("Error creating job:", error);
      alert(error.message || "Failed to create job");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
      <div className="bg-white rounded-2xl shadow-2xl max-w-6xl w-full max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between z-10">
          <h2 className="text-2xl font-bold text-brand-ink flex items-center gap-2">
            <FileText className="w-6 h-6 text-brand-green" />
            Create New Job Posting
          </h2>
          <button
            type="button"
            aria-label="Close"
            onClick={onClose}
            className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-all"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Section Tabs */}
        <div className="flex border-b border-gray-200 px-6">
          <button
            onClick={() => setActiveSection("basic")}
            className={`px-4 py-3 font-medium text-sm transition-all ${
              activeSection === "basic"
                ? "text-brand-green border-b-2 border-brand-green"
                : "text-gray-600 hover:text-gray-900"
            }`}
          >
            Basic Info
          </button>
          <button
            onClick={() => setActiveSection("details")}
            className={`px-4 py-3 font-medium text-sm transition-all ${
              activeSection === "details"
                ? "text-brand-green border-b-2 border-brand-green"
                : "text-gray-600 hover:text-gray-900"
            }`}
          >
            Job Details
          </button>
          <button
            onClick={() => setActiveSection("content")}
            className={`px-4 py-3 font-medium text-sm transition-all ${
              activeSection === "content"
                ? "text-brand-green border-b-2 border-brand-green"
                : "text-gray-600 hover:text-gray-900"
            }`}
          >
            Content & Benefits
          </button>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          {/* Basic Info Section */}
          {activeSection === "basic" && (
            <div className="space-y-6">
              {/* Slug */}
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">
                  Job Slug (URL) <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  value={formData.slug}
                  onChange={(e) => handleInputChange("slug", e.target.value)}
                  placeholder="senior-backend-engineer"
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  required
                />
                <p className="mt-1 text-xs text-gray-500">
                  URL-friendly identifier (lowercase, hyphens only)
                </p>
              </div>

              {/* Title (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Job Title (English) <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={formData.titleEn}
                    onChange={(e) =>
                      handleInputChange("titleEn", e.target.value)
                    }
                    placeholder="Senior Backend Engineer"
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    العنوان الوظيفي (عربي){" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={formData.titleAr}
                    onChange={(e) =>
                      handleInputChange("titleAr", e.target.value)
                    }
                    placeholder="مهندس باك-إند أول"
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                    dir="rtl"
                    required
                  />
                </div>
              </div>

              {/* Department */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Department
                  </label>
                  <select
                    value={formData.department}
                    onChange={(e) =>
                      handleInputChange("department", e.target.value)
                    }
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  >
                    <option value="engineering">Engineering</option>
                    <option value="product">Product</option>
                    <option value="design">Design</option>
                    <option value="sales">Sales</option>
                    <option value="marketing">Marketing</option>
                    <option value="customer_success">Customer Success</option>
                    <option value="operations">Operations</option>
                    <option value="finance">Finance</option>
                    <option value="hr">HR</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Department Label (EN)
                  </label>
                  <input
                    type="text"
                    value={formData.departmentLabelEn}
                    onChange={(e) =>
                      handleInputChange("departmentLabelEn", e.target.value)
                    }
                    placeholder="Engineering"
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  />
                </div>
              </div>

              {/* Location (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Location (English)
                  </label>
                  <input
                    type="text"
                    value={formData.locationEn}
                    onChange={(e) =>
                      handleInputChange("locationEn", e.target.value)
                    }
                    placeholder="Doha, Qatar / Remote"
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    الموقع (عربي)
                  </label>
                  <input
                    type="text"
                    value={formData.locationAr}
                    onChange={(e) =>
                      handleInputChange("locationAr", e.target.value)
                    }
                    placeholder="الدوحة، قطر / عن بُعد"
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                    dir="rtl"
                  />
                </div>
              </div>

              {/* Contract Type & Level */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Contract Type
                  </label>
                  <select
                    value={formData.contractType}
                    onChange={(e) =>
                      handleInputChange("contractType", e.target.value)
                    }
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  >
                    <option value="full-time">Full-time</option>
                    <option value="part-time">Part-time</option>
                    <option value="contract">Contract</option>
                    <option value="internship">Internship</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Experience Level
                  </label>
                  <select
                    value={formData.level}
                    onChange={(e) => handleInputChange("level", e.target.value)}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  >
                    <option value="entry">Entry Level</option>
                    <option value="mid">Mid-level</option>
                    <option value="senior">Senior</option>
                    <option value="lead">Lead</option>
                    <option value="principal">Principal</option>
                  </select>
                </div>
              </div>

              {/* Salary (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Salary Range (English)
                  </label>
                  <input
                    type="text"
                    value={formData.salaryEn}
                    onChange={(e) =>
                      handleInputChange("salaryEn", e.target.value)
                    }
                    placeholder="15,000 - 25,000 QAR/month"
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    نطاق الراتب (عربي)
                  </label>
                  <input
                    type="text"
                    value={formData.salaryAr}
                    onChange={(e) =>
                      handleInputChange("salaryAr", e.target.value)
                    }
                    placeholder="15,000 - 25,000 ريال/شهر"
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                    dir="rtl"
                  />
                </div>
              </div>

              {/* Status & Dates */}
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Status
                  </label>
                  <select
                    value={formData.status}
                    onChange={(e) =>
                      handleInputChange("status", e.target.value)
                    }
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  >
                    <option value="draft">Draft</option>
                    <option value="open">Open (Published)</option>
                    <option value="paused">Paused</option>
                    <option value="closed">Closed</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Opening Date
                  </label>
                  <input
                    type="date"
                    value={formData.openingAt}
                    onChange={(e) =>
                      handleInputChange("openingAt", e.target.value)
                    }
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Closing Date (Optional)
                  </label>
                  <input
                    type="date"
                    value={formData.closingAt}
                    onChange={(e) =>
                      handleInputChange("closingAt", e.target.value)
                    }
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  />
                </div>
              </div>
            </div>
          )}

          {/* Job Details Section */}
          {activeSection === "details" && (
            <div className="space-y-6">
              {/* Responsibilities (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Responsibilities (English){" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <textarea
                    value={formData.responsibilitiesEn}
                    onChange={(e) =>
                      handleInputChange("responsibilitiesEn", e.target.value)
                    }
                    placeholder="One responsibility per line:&#10;Lead backend architecture&#10;Mentor junior developers&#10;Code review and quality assurance"
                    rows={8}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    المسؤوليات (عربي) <span className="text-red-500">*</span>
                  </label>
                  <textarea
                    value={formData.responsibilitiesAr}
                    onChange={(e) =>
                      handleInputChange("responsibilitiesAr", e.target.value)
                    }
                    placeholder="مسؤولية واحدة في كل سطر:&#10;قيادة هندسة الباك-إند&#10;توجيه المطورين المبتدئين&#10;مراجعة الكود وضمان الجودة"
                    rows={8}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                    dir="rtl"
                    required
                  />
                </div>
              </div>

              {/* Requirements (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Requirements (English)
                  </label>
                  <textarea
                    value={formData.requirementsEn}
                    onChange={(e) =>
                      handleInputChange("requirementsEn", e.target.value)
                    }
                    placeholder="One requirement per line:&#10;5+ years backend development&#10;Strong TypeScript/Node.js&#10;PostgreSQL expertise"
                    rows={6}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    المتطلبات (عربي)
                  </label>
                  <textarea
                    value={formData.requirementsAr}
                    onChange={(e) =>
                      handleInputChange("requirementsAr", e.target.value)
                    }
                    placeholder="متطلب واحد في كل سطر:&#10;خبرة 5+ سنوات تطوير باك-إند&#10;إتقان TypeScript/Node.js&#10;خبرة PostgreSQL"
                    rows={6}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                    dir="rtl"
                  />
                </div>
              </div>

              {/* Skills (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Required Skills (English)
                  </label>
                  <textarea
                    value={formData.skillsEn}
                    onChange={(e) =>
                      handleInputChange("skillsEn", e.target.value)
                    }
                    placeholder="One skill per line:&#10;TypeScript&#10;Node.js&#10;PostgreSQL&#10;Docker"
                    rows={5}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    المهارات المطلوبة (عربي)
                  </label>
                  <textarea
                    value={formData.skillsAr}
                    onChange={(e) =>
                      handleInputChange("skillsAr", e.target.value)
                    }
                    placeholder="مهارة واحدة في كل سطر:&#10;TypeScript&#10;Node.js&#10;PostgreSQL&#10;Docker"
                    rows={5}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                    dir="rtl"
                  />
                </div>
              </div>
            </div>
          )}

          {/* Content & Benefits Section */}
          {activeSection === "content" && (
            <div className="space-y-6">
              {/* Benefits (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Benefits (English)
                  </label>
                  <textarea
                    value={formData.benefitsEn}
                    onChange={(e) =>
                      handleInputChange("benefitsEn", e.target.value)
                    }
                    placeholder="One benefit per line:&#10;Competitive salary&#10;Health insurance&#10;Flexible working hours&#10;Remote work options"
                    rows={6}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    المزايا (عربي)
                  </label>
                  <textarea
                    value={formData.benefitsAr}
                    onChange={(e) =>
                      handleInputChange("benefitsAr", e.target.value)
                    }
                    placeholder="ميزة واحدة في كل سطر:&#10;راتب تنافسي&#10;تأمين صحي&#10;ساعات عمل مرنة&#10;خيارات العمل عن بُعد"
                    rows={6}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                    dir="rtl"
                  />
                </div>
              </div>

              {/* Nice to Have (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Nice to Have (English)
                  </label>
                  <textarea
                    value={formData.niceToHaveEn}
                    onChange={(e) =>
                      handleInputChange("niceToHaveEn", e.target.value)
                    }
                    placeholder="One item per line:&#10;Experience with GraphQL&#10;Open source contributions&#10;Arabic language skills"
                    rows={4}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    من الجيد أن يكون لديك (عربي)
                  </label>
                  <textarea
                    value={formData.niceToHaveAr}
                    onChange={(e) =>
                      handleInputChange("niceToHaveAr", e.target.value)
                    }
                    placeholder="عنصر واحد في كل سطر:&#10;خبرة في GraphQL&#10;مساهمات في المصادر المفتوحة&#10;مهارات اللغة العربية"
                    rows={4}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                    dir="rtl"
                  />
                </div>
              </div>

              {/* Workday Expectations (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Workday Expectations (English)
                  </label>
                  <textarea
                    value={formData.workdayEn}
                    onChange={(e) =>
                      handleInputChange("workdayEn", e.target.value)
                    }
                    placeholder="One expectation per line:&#10;Daily standup meetings&#10;Code reviews&#10;Sprint planning sessions"
                    rows={4}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    توقعات يوم العمل (عربي)
                  </label>
                  <textarea
                    value={formData.workdayAr}
                    onChange={(e) =>
                      handleInputChange("workdayAr", e.target.value)
                    }
                    placeholder="توقع واحد في كل سطر:&#10;اجتماعات يومية قصيرة&#10;مراجعة الكود&#10;جلسات تخطيط السبرينت"
                    rows={4}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green font-mono text-sm"
                    dir="rtl"
                  />
                </div>
              </div>

              {/* Application Instructions (Bilingual) */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Application Instructions (English)
                  </label>
                  <textarea
                    value={formData.applicationInstructionsEn}
                    onChange={(e) =>
                      handleInputChange(
                        "applicationInstructionsEn",
                        e.target.value,
                      )
                    }
                    placeholder="Submit your CV and cover letter through our careers page"
                    rows={3}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    تعليمات التقديم (عربي)
                  </label>
                  <textarea
                    value={formData.applicationInstructionsAr}
                    onChange={(e) =>
                      handleInputChange(
                        "applicationInstructionsAr",
                        e.target.value,
                      )
                    }
                    placeholder="قدم سيرتك الذاتية ورسالة الغلاف من خلال صفحة الوظائف"
                    rows={3}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
                    dir="rtl"
                  />
                </div>
              </div>
            </div>
          )}

          {/* Form Actions */}
          <div className="flex justify-between items-center pt-6 border-t border-gray-200">
            <div className="flex gap-2">
              {activeSection !== "basic" && (
                <button
                  type="button"
                  onClick={() =>
                    setActiveSection(
                      activeSection === "content" ? "details" : "basic",
                    )
                  }
                  className="px-6 py-3 border-2 border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-all"
                >
                  ← Previous
                </button>
              )}
              {activeSection !== "content" && (
                <button
                  type="button"
                  onClick={() =>
                    setActiveSection(
                      activeSection === "basic" ? "details" : "content",
                    )
                  }
                  className="px-6 py-3 border-2 border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-all"
                >
                  Next →
                </button>
              )}
            </div>

            <div className="flex gap-3">
              <button
                type="button"
                onClick={onClose}
                className="px-6 py-3 border-2 border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-all"
                disabled={isSubmitting}
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={isSubmitting}
                className="px-6 py-3 bg-brand-green text-white font-semibold rounded-lg hover:bg-green-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
              >
                <Save className="w-5 h-5" />
                {isSubmitting ? "Creating..." : "Create Job"}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}