"use client";

import { Check, X, RefreshCcw } from "lucide-react";
import type { Lang } from "@/lib/config";
import type { WaitlistFormData, WaitlistTranslations } from "./types";
import { CATEGORIES } from "./types";

interface WaitlistFormModalProps {
  lang: Lang;
  t: WaitlistTranslations;
  mode: "create" | "edit";
  formData: WaitlistFormData;
  onFormChange: (data: WaitlistFormData) => void;
  onSubmit: (e: React.FormEvent) => void;
  onClose: () => void;
  submitting: boolean;
  error: string | null;
  success: string | null;
}

export function WaitlistFormModal({
  lang,
  t,
  mode,
  formData,
  onFormChange,
  onSubmit,
  onClose,
  submitting,
  error,
  success,
}: WaitlistFormModalProps) {
  const isAr = lang === "ar";
  const title = mode === "create" ? t.createWaitlist : t.edit;
  const submitLabel = mode === "create" ? t.createWaitlist : t.save;

  return (
    <div className="fixed inset-0 bg-slate-900/20 backdrop-blur-sm flex items-center justify-center z-[100] p-4">
      <div
        className="bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden max-h-[90vh] overflow-y-auto border border-slate-200"
        dir={isAr ? "rtl" : "ltr"}
      >
        <div className="flex items-center justify-between p-4 border-b border-slate-200 sticky top-0 bg-white">
          <h2 className="text-lg font-bold text-slate-900">{title}</h2>
          <button
            type="button"
            aria-label="Close"
            onClick={onClose}
            className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <form onSubmit={onSubmit} className="p-4 space-y-4">
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
              {error}
            </div>
          )}
          {success && (
            <div className="bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-lg text-sm flex items-center gap-2">
              <Check className="w-5 h-5" />
              {success}
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              {t.titleLabel} *
            </label>
            <input
              type="text"
              required
              value={formData.title}
              onChange={(e) =>
                onFormChange({ ...formData, title: e.target.value })
              }
              className="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-brand-green focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              {t.titleArLabel}
            </label>
            <input
              type="text"
              value={formData.titleAr}
              onChange={(e) =>
                onFormChange({ ...formData, titleAr: e.target.value })
              }
              className="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-brand-green focus:border-transparent"
              dir="rtl"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              {t.descriptionLabel}
            </label>
            <textarea
              value={formData.description}
              onChange={(e) =>
                onFormChange({ ...formData, description: e.target.value })
              }
              className="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-brand-green focus:border-transparent"
              rows={2}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              {t.descriptionArLabel}
            </label>
            <textarea
              value={formData.descriptionAr}
              onChange={(e) =>
                onFormChange({ ...formData, descriptionAr: e.target.value })
              }
              className="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-brand-green focus:border-transparent"
              rows={2}
              dir="rtl"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              {t.categoryLabel}
            </label>
            <select
              value={formData.category}
              onChange={(e) =>
                onFormChange({ ...formData, category: e.target.value })
              }
              className="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-brand-green focus:border-transparent"
            >
              {CATEGORIES.map((cat) => (
                <option key={cat.value} value={cat.value}>
                  {isAr ? cat.labelAr : cat.label}
                </option>
              ))}
            </select>
          </div>

          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id={`isPublic-${mode}`}
              checked={formData.isPublic}
              onChange={(e) =>
                onFormChange({ ...formData, isPublic: e.target.checked })
              }
              className="w-4 h-4 text-brand-green border-slate-300 rounded focus:ring-brand-green"
            />
            <label
              htmlFor={`isPublic-${mode}`}
              className="text-sm text-slate-700"
            >
              {t.isPublicLabel}
            </label>
          </div>

          <div className="flex gap-3 pt-4">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 px-4 py-2.5 border border-slate-200 text-slate-700 rounded-xl hover:bg-slate-50 transition-colors font-medium"
            >
              {t.cancel}
            </button>
            <button
              type="submit"
              disabled={submitting || !!success}
              className="flex-1 px-4 py-2.5 bg-brand-green text-white rounded-xl hover:bg-brand-greenHover disabled:opacity-50 transition-colors font-semibold"
            >
              {submitting ? (
                <RefreshCcw className="w-5 h-5 animate-spin mx-auto" />
              ) : (
                submitLabel
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}