frontend/src/components/admin/MembershipInviteForm.jsx

// frontend/src/components/admin/MembershipInviteForm.jsx
import React, { useState } from "react";
import { Send, X } from "lucide-react";

export default function MembershipInviteForm({
  plans,
  onSend,
  onCancel,
  isLoading,
}) {
  const [email, setEmail] = useState("parent@email.com");
  const [selectedPlanId, setSelectedPlanId] = useState("");
  const [classDetails, setClassDetails] = useState("");

  const selectedPlan = plans.find((p) => p.id === parseInt(selectedPlanId));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.trim() || !selectedPlanId) {
      return;
    }

    onSend({
      email: email.trim(),
      plan_id: parseInt(selectedPlanId),
      class_details: classDetails.trim(),
      invited_by: "admin",
    });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-stone-700 mb-1.5">
          Email Address
        </label>
        <input
          type="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
          placeholder="parent@email.com"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-stone-700 mb-1.5">
          Membership Plan
        </label>
        <select
          required
          value={selectedPlanId}
          onChange={(e) => setSelectedPlanId(e.target.value)}
          className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
        >
          <option value="">Select a plan...</option>
          {plans
            .filter((p) => p.is_active)
            .map((plan) => (
              <option key={plan.id} value={plan.id}>
                {plan.name} - ${plan.price}/{plan.billing_period} (Up to{" "}
                {plan.max_students || 1} student{plan.max_students !== 1 ? "s" : ""})
              </option>
            ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-stone-700 mb-1.5">
          Class Information (shown to member)
        </label>
        <textarea
          value={classDetails}
          onChange={(e) => setClassDetails(e.target.value)}
          rows={4}
          className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
          placeholder="e.g., Beginner Karate - Mon & Wed 4:00 PM, Advanced Karate - Fri 5:00 PM"
        />
        <p className="text-xs text-stone-500 mt-1">
          Describe the classes included so the member knows what they're signing
          up for
        </p>
      </div>

      <div className="flex items-center justify-end gap-2 pt-2">
        <button
          type="button"
          onClick={onCancel}
          disabled={isLoading}
          className="inline-flex items-center gap-2 rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-50 disabled:opacity-50"
        >
          <X className="w-4 h-4" />
          Cancel
        </button>
        <button
          type="submit"
          disabled={isLoading || !email.trim() || !selectedPlanId}
          className="inline-flex items-center gap-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <Send className="w-4 h-4" />
          {isLoading ? "Sending..." : "Send Invite"}
        </button>
      </div>
    </form>
  );
}