stack/apps/web/src/components/workspace/InviteMember.tsx

"use client";

import { useState } from "react";
import { WorkspaceMemberRole } from "@mosaic/shared";
import { isValidEmail, toWorkspaceMemberRole } from "./validation";

interface InviteMemberProps {
  onInvite: (email: string, role: WorkspaceMemberRole) => Promise<void>;
}

export function InviteMember({ onInvite }: InviteMemberProps): React.JSX.Element {
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<WorkspaceMemberRole>(WorkspaceMemberRole.MEMBER);
  const [isInviting, setIsInviting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>): Promise<void> => {
    e.preventDefault();
    setError(null);

    if (!email.trim()) {
      setError("Email is required");
      return;
    }

    if (!isValidEmail(email.trim())) {
      setError("Please enter a valid email address");
      return;
    }

    setIsInviting(true);
    try {
      await onInvite(email.trim(), role);
      setEmail("");
      setRole(WorkspaceMemberRole.MEMBER);
      alert("Invitation sent successfully!");
    } catch (error) {
      console.error("Failed to invite member:", error);
      setError(
        error instanceof Error ? error.message : "Failed to send invitation. Please try again."
      );
    } finally {
      setIsInviting(false);
    }
  };

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 className="text-lg font-semibold text-gray-900 mb-4">Invite Member</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
            Email Address
          </label>
          <input
            id="email"
            type="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
            }}
            maxLength={254}
            placeholder="colleague@example.com"
            disabled={isInviting}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
          />
        </div>

        <div>
          <label htmlFor="role" className="block text-sm font-medium text-gray-700 mb-2">
            Role
          </label>
          <select
            id="role"
            value={role}
            onChange={(e) => {
              setRole(toWorkspaceMemberRole(e.target.value));
            }}
            disabled={isInviting}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
          >
            <option value={WorkspaceMemberRole.ADMIN}>
              Admin - Can manage workspace and members
            </option>
            <option value={WorkspaceMemberRole.MEMBER}>Member - Can create and edit content</option>
            <option value={WorkspaceMemberRole.GUEST}>Guest - View-only access</option>
          </select>
        </div>

        {error && (
          <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
            <p className="text-sm text-red-700">{error}</p>
          </div>
        )}

        <button
          type="submit"
          disabled={isInviting}
          className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isInviting ? "Sending Invitation..." : "Send Invitation"}
        </button>
      </form>

      <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
        <p className="text-sm text-blue-800">
          💡 The invited user will receive an email with instructions to join this workspace.
        </p>
      </div>
    </div>
  );
}