/**
 * Broker Profile Modal Component
 * Create/edit broker profile with bilingual name, contact info, languages,
 * specializations, working schedule, and license details
 */

"use client";

import { useState, useEffect } from "react";
import type { Lang } from "@/lib/config";
import { fetchWithCSRF } from "@/lib/csrf-client";
import {
  X,
  User,
  Phone,
  Mail,
  Globe,
  MapPin,
  Clock,
  Calendar,
  Camera,
  FileText,
  Loader2,
  Building2,
} from "lucide-react";

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface BrokerProfileModalProps {
  lang: Lang;
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  broker?: {
    id: string;
    nameEn: string;
    nameAr: string;
    phone: string;
    email?: string;
    whatsapp?: string;
    whatsappNumber?: string;
    photo?: string;
    photoUrl?: string;
    languages: string[];
    areaSpecializations: string[];
    typeSpecializations: string[];
    isActive?: boolean;
    active?: boolean;
    workingDays?: number[];
    workingHoursStart?: string;
    workingHoursEnd?: string;
    workStartTime?: string;
    workEndTime?: string;
    maxViewingsPerDay?: number;
    licenseNumber?: string;
    bioEn?: string;
    bioAr?: string;
    schedule?: {
      workingDays: string[];
      startTime: string;
      endTime: string;
      maxViewingsPerDay: number;
    };
  } | null;
}

const LANGUAGE_OPTIONS = [
  { value: "en", labelEn: "English", labelAr: "إنجليزي" },
  { value: "ar", labelEn: "Arabic", labelAr: "عربي" },
  { value: "fr", labelEn: "French", labelAr: "فرنسي" },
  { value: "hi", labelEn: "Hindi", labelAr: "هندي" },
  { value: "ur", labelEn: "Urdu", labelAr: "أردو" },
  { value: "tl", labelEn: "Tagalog", labelAr: "تاغالوغ" },
  { value: "ml", labelEn: "Malayalam", labelAr: "ملايالام" },
  { value: "bn", labelEn: "Bengali", labelAr: "بنغالي" },
  { value: "es", labelEn: "Spanish", labelAr: "إسباني" },
  { value: "fa", labelEn: "Farsi", labelAr: "فارسي" },
];

const AREA_OPTIONS = [
  { value: "the_pearl", labelEn: "The Pearl", labelAr: "اللؤلؤة" },
  { value: "lusail", labelEn: "Lusail", labelAr: "لوسيل" },
  { value: "west_bay", labelEn: "West Bay", labelAr: "الخليج الغربي" },
  { value: "al_wakrah", labelEn: "Al Wakrah", labelAr: "الوكرة" },
  { value: "al_khor", labelEn: "Al Khor", labelAr: "الخور" },
  { value: "al_rayyan", labelEn: "Al Rayyan", labelAr: "الريان" },
  { value: "al_sadd", labelEn: "Al Sadd", labelAr: "السد" },
  { value: "dafna", labelEn: "Dafna", labelAr: "دافنا" },
  { value: "msheireb", labelEn: "Msheireb", labelAr: "مشيرب" },
  { value: "al_duhail", labelEn: "Al Duhail", labelAr: "الدحيل" },
  { value: "fox_hills", labelEn: "Fox Hills", labelAr: "فوكس هيلز" },
  { value: "katara", labelEn: "Katara", labelAr: "كتارا" },
];

const TYPE_OPTIONS = [
  { value: "apartment", labelEn: "Apartments", labelAr: "شقق" },
  { value: "villa", labelEn: "Villas", labelAr: "فلل" },
  { value: "townhouse", labelEn: "Townhouses", labelAr: "تاون هاوس" },
  { value: "penthouse", labelEn: "Penthouses", labelAr: "بنتهاوس" },
  { value: "office", labelEn: "Offices", labelAr: "مكاتب" },
  { value: "retail", labelEn: "Retail", labelAr: "تجاري" },
  { value: "land", labelEn: "Land", labelAr: "أراضي" },
  { value: "warehouse", labelEn: "Warehouses", labelAr: "مستودعات" },
];

const WORKING_DAYS = [
  { value: 0, labelEn: "Sun", labelAr: "أحد" },
  { value: 1, labelEn: "Mon", labelAr: "اثنين" },
  { value: 2, labelEn: "Tue", labelAr: "ثلاثاء" },
  { value: 3, labelEn: "Wed", labelAr: "أربعاء" },
  { value: 4, labelEn: "Thu", labelAr: "خميس" },
  { value: 5, labelEn: "Fri", labelAr: "جمعة" },
  { value: 6, labelEn: "Sat", labelAr: "سبت" },
];

export default function BrokerProfileModal({
  lang,
  isOpen,
  onClose,
  onSuccess,
  broker,
}: BrokerProfileModalProps) {
  const isAr = lang === "ar";
  const isEditing = !!broker;

  const [formData, setFormData] = useState({
    nameEn: "",
    nameAr: "",
    phone: "",
    email: "",
    whatsappNumber: "",
    photo: "",
    languages: [] as string[],
    areaSpecializations: [] as string[],
    typeSpecializations: [] as string[],
    workingDays: [0, 1, 2, 3, 4] as number[],
    workingHoursStart: "09:00",
    workingHoursEnd: "18:00",
    maxViewingsPerDay: 6,
    licenseNumber: "",
    bioEn: "",
    bioAr: "",
  });

  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
  const [isSaving, setIsSaving] = useState(false);
  const [apiError, setApiError] = useState<string | null>(null);

  // Populate form when editing
  useEffect(() => {
    if (isOpen && broker) {
      const workingDays = broker.workingDays
        ? broker.workingDays.map((d) =>
            typeof d === "string" ? parseInt(d as unknown as string, 10) : d,
          )
        : broker.schedule?.workingDays
          ? broker.schedule.workingDays.map((d) => parseInt(d, 10))
          : [0, 1, 2, 3, 4];

      setFormData({
        nameEn: broker.nameEn || "",
        nameAr: broker.nameAr || "",
        phone: broker.phone || "",
        email: broker.email || "",
        whatsappNumber: broker.whatsappNumber || broker.whatsapp || "",
        photo: broker.photo || broker.photoUrl || "",
        languages: broker.languages || [],
        areaSpecializations: broker.areaSpecializations || [],
        typeSpecializations: broker.typeSpecializations || [],
        workingDays,
        workingHoursStart:
          broker.workingHoursStart ||
          broker.workStartTime ||
          broker.schedule?.startTime ||
          "09:00",
        workingHoursEnd:
          broker.workingHoursEnd ||
          broker.workEndTime ||
          broker.schedule?.endTime ||
          "18:00",
        maxViewingsPerDay:
          broker.maxViewingsPerDay ?? broker.schedule?.maxViewingsPerDay ?? 6,
        licenseNumber: broker.licenseNumber || "",
        bioEn: broker.bioEn || "",
        bioAr: broker.bioAr || "",
      });
    } else if (isOpen && !broker) {
      resetForm();
    }
  }, [isOpen, broker]);

  const updateField = (
    field: string,
    value: string | number | string[] | number[],
  ) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    if (formErrors[field]) {
      setFormErrors((prev) => {
        const next = { ...prev };
        delete next[field];
        return next;
      });
    }
  };

  const toggleArrayItem = (
    field: "languages" | "areaSpecializations" | "typeSpecializations",
    value: string,
  ) => {
    setFormData((prev) => ({
      ...prev,
      [field]: prev[field].includes(value)
        ? prev[field].filter((v) => v !== value)
        : [...prev[field], value],
    }));
  };

  const toggleWorkingDay = (day: number) => {
    setFormData((prev) => ({
      ...prev,
      workingDays: prev.workingDays.includes(day)
        ? prev.workingDays.filter((d) => d !== day)
        : [...prev.workingDays, day].sort(),
    }));
  };

  const validateForm = () => {
    const errors: Record<string, string> = {};
    const required = isAr ? "حقل مطلوب" : "Required";

    if (!formData.nameEn.trim()) errors.nameEn = required;
    if (!formData.nameAr.trim()) errors.nameAr = required;
    if (!formData.phone.trim()) errors.phone = required;
    if (!formData.email.trim()) errors.email = required;
    if (formData.workingDays.length === 0)
      errors.workingDays = isAr
        ? "اختر يوم واحد على الأقل"
        : "Select at least one day";

    setFormErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleSave = async () => {
    if (!validateForm()) return;

    setIsSaving(true);
    setApiError(null);

    try {
      const body = {
        ...formData,
        maxViewingsPerDay: Number(formData.maxViewingsPerDay),
      };

      const url = isEditing
        ? `/api/real-estate/brokers/${broker!.id}`
        : "/api/real-estate/brokers";

      const response = await fetchWithCSRF(url, {
        method: isEditing ? "PUT" : "POST",
        body: JSON.stringify(body),
      });

      const data = await response.json();
      if (!data.success && !response.ok) {
        setApiError(
          data.error ||
            (isAr
              ? "فشل في حفظ بيانات الوسيط"
              : "Failed to save broker profile"),
        );
        return;
      }

      resetForm();
      onSuccess();
    } catch (error) {
      console.error("Failed to save broker:", error);
      setApiError(
        isAr
          ? "حدث خطأ أثناء حفظ بيانات الوسيط"
          : "An error occurred while saving the broker profile",
      );
    } finally {
      setIsSaving(false);
    }
  };

  const resetForm = () => {
    setFormData({
      nameEn: "",
      nameAr: "",
      phone: "",
      email: "",
      whatsappNumber: "",
      photo: "",
      languages: [],
      areaSpecializations: [],
      typeSpecializations: [],
      workingDays: [0, 1, 2, 3, 4],
      workingHoursStart: "09:00",
      workingHoursEnd: "18:00",
      maxViewingsPerDay: 6,
      licenseNumber: "",
      bioEn: "",
      bioAr: "",
    });
    setFormErrors({});
    setApiError(null);
  };

  const handleClose = () => {
    resetForm();
    onClose();
  };

  if (!isOpen) return null;

  const inputClass = (field: string) =>
    `w-full h-12 px-4 rounded-xl border-2 ${
      formErrors[field]
        ? "border-red-300 bg-red-50/50"
        : "border-slate-200 bg-slate-50/50 focus:border-brand-green"
    } text-base placeholder-slate-400 transition-all duration-200 focus:ring-4 focus:ring-brand-green/20 focus:outline-none`;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      onClick={handleClose}
    >
      <div className="absolute inset-0 bg-slate-900/95 backdrop-blur-sm" />

      <div
        className="relative w-full max-w-3xl transform transition-all duration-300 ease-out animate-fadeIn max-h-[90vh] overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="absolute -inset-1 bg-gradient-to-r from-brand-green via-emerald-400 to-teal-500 rounded-3xl opacity-20 blur-lg" />

        <div className="relative bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
          {/* Header */}
          <div className="relative px-8 pt-8 pb-6 shrink-0">
            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-brand-green via-emerald-400 to-teal-500" />
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-4">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-green to-emerald-600 shadow-lg shadow-brand-green/30">
                  <User className="w-7 h-7 text-white" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-slate-900">
                    {isEditing
                      ? isAr
                        ? "تعديل بيانات الوسيط"
                        : "Edit Broker Profile"
                      : isAr
                        ? "إضافة وسيط جديد"
                        : "Add New Broker"}
                  </h3>
                  <p className="text-sm text-slate-500 mt-1">
                    {isAr
                      ? "أدخل بيانات الوسيط أدناه"
                      : "Enter broker details below"}
                  </p>
                </div>
              </div>
              <button
                onClick={handleClose}
                className="flex h-10 w-10 items-center justify-center rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-all duration-200"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* Form Body */}
          <div className="px-8 pb-6 overflow-y-auto flex-1 space-y-6">
            {apiError && (
              <div className="rounded-xl bg-red-50 border border-red-200 p-4">
                <p className="text-sm text-red-700">{apiError}</p>
              </div>
            )}

            {/* Basic Info */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-emerald-100">
                  <User className="w-3.5 h-3.5 text-emerald-600" />
                </span>
                {isAr ? "المعلومات الأساسية" : "Basic Information"}
              </h4>

              <div className="grid gap-4 sm:grid-cols-2">
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الاسم (إنجليزي)" : "Name (English)"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={formData.nameEn}
                    onChange={(e) => updateField("nameEn", e.target.value)}
                    placeholder="e.g. Ahmed Al-Mansouri"
                    className={inputClass("nameEn")}
                    dir="ltr"
                  />
                  {formErrors.nameEn && (
                    <p className="mt-1 text-sm text-red-500">
                      {formErrors.nameEn}
                    </p>
                  )}
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الاسم (عربي)" : "Name (Arabic)"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={formData.nameAr}
                    onChange={(e) => updateField("nameAr", e.target.value)}
                    placeholder="مثال: أحمد المنصوري"
                    className={inputClass("nameAr")}
                    dir="rtl"
                  />
                  {formErrors.nameAr && (
                    <p className="mt-1 text-sm text-red-500">
                      {formErrors.nameAr}
                    </p>
                  )}
                </div>
              </div>

              {/* Photo URL */}
              <div>
                <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                  <Camera className="w-3.5 h-3.5 text-slate-500" />
                  {isAr ? "رابط الصورة" : "Photo URL"}
                </label>
                <input
                  type="url"
                  value={formData.photo}
                  onChange={(e) => updateField("photo", e.target.value)}
                  placeholder="https://example.com/photo.jpg"
                  className={inputClass("photo")}
                  dir="ltr"
                />
              </div>
            </div>

            {/* Contact Info */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-blue-100">
                  <Phone className="w-3.5 h-3.5 text-blue-600" />
                </span>
                {isAr ? "معلومات الاتصال" : "Contact Information"}
              </h4>

              <div className="grid gap-4 sm:grid-cols-3">
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <Phone className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "الهاتف" : "Phone"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="tel"
                    value={formData.phone}
                    onChange={(e) => updateField("phone", e.target.value)}
                    placeholder="+974 XXXX XXXX"
                    className={inputClass("phone")}
                    dir="ltr"
                  />
                  {formErrors.phone && (
                    <p className="mt-1 text-sm text-red-500">
                      {formErrors.phone}
                    </p>
                  )}
                </div>
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <Mail className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "البريد الإلكتروني" : "Email"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="email"
                    value={formData.email}
                    onChange={(e) => updateField("email", e.target.value)}
                    placeholder="broker@company.com"
                    className={inputClass("email")}
                    dir="ltr"
                  />
                  {formErrors.email && (
                    <p className="mt-1 text-sm text-red-500">
                      {formErrors.email}
                    </p>
                  )}
                </div>
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <Phone className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "واتساب" : "WhatsApp"}
                  </label>
                  <input
                    type="tel"
                    value={formData.whatsappNumber}
                    onChange={(e) =>
                      updateField("whatsappNumber", e.target.value)
                    }
                    placeholder="+974 XXXX XXXX"
                    className={inputClass("whatsappNumber")}
                    dir="ltr"
                  />
                </div>
              </div>
            </div>

            {/* Languages */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-violet-100">
                  <Globe className="w-3.5 h-3.5 text-violet-600" />
                </span>
                {isAr ? "اللغات" : "Languages"}
              </h4>

              <div className="flex flex-wrap gap-2">
                {LANGUAGE_OPTIONS.map((l) => (
                  <button
                    key={l.value}
                    type="button"
                    onClick={() => toggleArrayItem("languages", l.value)}
                    className={`rounded-lg px-3 py-2 text-xs font-medium transition-all ${
                      formData.languages.includes(l.value)
                        ? "bg-brand-green text-white shadow-sm"
                        : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                    }`}
                  >
                    {isAr ? l.labelAr : l.labelEn}
                  </button>
                ))}
              </div>
            </div>

            {/* Area Specializations */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-orange-100">
                  <MapPin className="w-3.5 h-3.5 text-orange-600" />
                </span>
                {isAr ? "تخصص المناطق" : "Area Specializations"}
              </h4>

              <div className="flex flex-wrap gap-2">
                {AREA_OPTIONS.map((a) => (
                  <button
                    key={a.value}
                    type="button"
                    onClick={() =>
                      toggleArrayItem("areaSpecializations", a.value)
                    }
                    className={`rounded-lg px-3 py-2 text-xs font-medium transition-all ${
                      formData.areaSpecializations.includes(a.value)
                        ? "bg-brand-green text-white shadow-sm"
                        : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                    }`}
                  >
                    {isAr ? a.labelAr : a.labelEn}
                  </button>
                ))}
              </div>
            </div>

            {/* Type Specializations */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-teal-100">
                  <Building2 className="w-3.5 h-3.5 text-teal-600" />
                </span>
                {isAr ? "تخصص أنواع العقارات" : "Property Type Specializations"}
              </h4>

              <div className="flex flex-wrap gap-2">
                {TYPE_OPTIONS.map((t) => (
                  <button
                    key={t.value}
                    type="button"
                    onClick={() =>
                      toggleArrayItem("typeSpecializations", t.value)
                    }
                    className={`rounded-lg px-3 py-2 text-xs font-medium transition-all ${
                      formData.typeSpecializations.includes(t.value)
                        ? "bg-brand-green text-white shadow-sm"
                        : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                    }`}
                  >
                    {isAr ? t.labelAr : t.labelEn}
                  </button>
                ))}
              </div>
            </div>

            {/* Working Schedule */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-amber-100">
                  <Calendar className="w-3.5 h-3.5 text-amber-600" />
                </span>
                {isAr ? "جدول العمل" : "Working Schedule"}
              </h4>

              {/* Working Days */}
              <div>
                <label className="text-sm font-semibold text-slate-700 mb-3 block">
                  {isAr ? "أيام العمل" : "Working Days"}
                </label>
                <div className="flex flex-wrap gap-2">
                  {WORKING_DAYS.map((day) => (
                    <button
                      key={day.value}
                      type="button"
                      onClick={() => toggleWorkingDay(day.value)}
                      className={`w-14 h-10 rounded-lg text-xs font-semibold transition-all ${
                        formData.workingDays.includes(day.value)
                          ? "bg-brand-green text-white shadow-sm"
                          : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                      }`}
                    >
                      {isAr ? day.labelAr : day.labelEn}
                    </button>
                  ))}
                </div>
                {formErrors.workingDays && (
                  <p className="mt-1 text-sm text-red-500">
                    {formErrors.workingDays}
                  </p>
                )}
              </div>

              {/* Working Hours */}
              <div className="grid gap-4 sm:grid-cols-3">
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <Clock className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "بداية الدوام" : "Start Time"}
                  </label>
                  <input
                    type="time"
                    value={formData.workingHoursStart}
                    onChange={(e) =>
                      updateField("workingHoursStart", e.target.value)
                    }
                    className={inputClass("workingHoursStart")}
                    dir="ltr"
                  />
                </div>
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <Clock className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "نهاية الدوام" : "End Time"}
                  </label>
                  <input
                    type="time"
                    value={formData.workingHoursEnd}
                    onChange={(e) =>
                      updateField("workingHoursEnd", e.target.value)
                    }
                    className={inputClass("workingHoursEnd")}
                    dir="ltr"
                  />
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الحد الأقصى للمعاينات/يوم" : "Max Viewings/Day"}
                  </label>
                  <input
                    type="number"
                    value={formData.maxViewingsPerDay}
                    onChange={(e) =>
                      updateField(
                        "maxViewingsPerDay",
                        parseInt(e.target.value) || 0,
                      )
                    }
                    min="1"
                    max="20"
                    className={inputClass("maxViewingsPerDay")}
                    dir="ltr"
                  />
                </div>
              </div>
            </div>

            {/* License & Bio */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-rose-100">
                  <FileText className="w-3.5 h-3.5 text-rose-600" />
                </span>
                {isAr ? "الترخيص والنبذة" : "License & Bio"}
              </h4>

              <div>
                <label className="text-sm font-semibold text-slate-700 mb-2 block">
                  {isAr ? "رقم الترخيص" : "License Number"}
                </label>
                <input
                  type="text"
                  value={formData.licenseNumber}
                  onChange={(e) => updateField("licenseNumber", e.target.value)}
                  placeholder={
                    isAr ? "رقم ترخيص الوسيط" : "Broker license number"
                  }
                  className={inputClass("licenseNumber")}
                  dir="ltr"
                />
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "النبذة (إنجليزي)" : "Bio (English)"}
                  </label>
                  <textarea
                    value={formData.bioEn}
                    onChange={(e) => updateField("bioEn", e.target.value)}
                    rows={3}
                    placeholder="Brief bio about the broker..."
                    className="w-full px-4 py-3 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-base placeholder-slate-400 transition-all duration-200 focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none resize-none"
                    dir="ltr"
                  />
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "النبذة (عربي)" : "Bio (Arabic)"}
                  </label>
                  <textarea
                    value={formData.bioAr}
                    onChange={(e) => updateField("bioAr", e.target.value)}
                    rows={3}
                    placeholder="نبذة مختصرة عن الوسيط..."
                    className="w-full px-4 py-3 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-base placeholder-slate-400 transition-all duration-200 focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none resize-none"
                    dir="rtl"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Footer */}
          <div className="px-8 py-6 bg-gradient-to-r from-slate-50 via-slate-100/50 to-slate-50 border-t border-slate-200 shrink-0">
            <div className="flex items-center justify-end gap-4">
              <button
                onClick={handleClose}
                className="px-6 py-3 rounded-xl border-2 border-slate-200 bg-white text-sm font-bold text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-all duration-200"
              >
                {isAr ? "إلغاء" : "Cancel"}
              </button>
              <button
                onClick={handleSave}
                disabled={isSaving}
                className="px-8 py-3 rounded-xl bg-gradient-to-r from-brand-green to-emerald-600 text-sm font-bold text-white shadow-lg shadow-brand-green/30 hover:shadow-brand-green/50 hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 inline-flex items-center gap-2"
              >
                {isSaving && <Loader2 className="w-4 h-4 animate-spin" />}
                {isEditing
                  ? isAr
                    ? "حفظ التعديلات"
                    : "Save Changes"
                  : isAr
                    ? "إضافة الوسيط"
                    : "Add Broker"}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}