/**
 * Quick Action Bar Component
 * Primary action buttons: Create Appointment, Send Broadcast, Export Data, Get Help
 */

"use client";

import { useState } from "react";
import type { Lang } from "@/lib/config";
import { dashboardEn } from "@/lib/config/translations/modules/dashboard.en";
import { dashboardAr } from "@/lib/config/translations/modules/dashboard.ar";

interface QuickActionBarProps {
  lang: Lang;
}

export default function QuickActionBar({ lang }: QuickActionBarProps) {
  const isAr = lang === "ar";
  const dt = isAr ? dashboardAr : dashboardEn;
  const [showCreateBooking, setShowCreateBooking] = useState(false);

  const actions = [
    {
      id: "create-appointment",
      label: dt.createAppointment,
      icon: "➕",
      color: "bg-brand-green hover:bg-brand-greenHover",
      onClick: () => setShowCreateBooking(true),
    },
    {
      id: "get-help",
      label: isAr ? "احصل على مساعدة" : "Get Help",
      icon: "❓",
      color: "bg-slate-600 hover:bg-slate-700",
      onClick: () => window.open(`/${lang}/help`, "_blank"),
    },
  ];

  return (
    <div className="mb-6 flex flex-wrap gap-3">
      {actions.map((action) => (
        <button
          key={action.id}
          onClick={action.onClick}
          className={`flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:shadow-md ${action.color}`}
        >
          <span>{action.icon}</span>
          <span>{action.label}</span>
        </button>
      ))}

      {/* Modals (to be implemented) */}
      {showCreateBooking && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="w-full max-w-2xl rounded-xl bg-white p-6 shadow-2xl">
            <h3 className="text-lg font-semibold">{dt.createAppointment}</h3>
            <p className="text-sm text-slate-600">
              {isAr ? "إنشاء موعد يدوي" : "Create manual appointment"}
            </p>
            {/* Form to be added */}
            <button
              onClick={() => setShowCreateBooking(false)}
              className="mt-4 rounded-lg bg-slate-200 px-4 py-2 text-sm"
            >
              {dt.close}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}