import React, { useState, useEffect, useMemo } from 'react';
import { X, Send, Mail, Building2, ChevronDown, ChevronUp, RefreshCw } from 'lucide-react';
import { useCreateTenantInvitation } from '../../../hooks/usePlatform';
import {
  useBillingPlans,
  getActivePlanVersion,
  getBooleanFeature,
  getIntegerFeature,
} from '../../../hooks/useBillingPlans';

interface TenantInviteModalProps {
  isOpen: boolean;
  onClose: () => void;
}

// Default tier settings - used when billing plans are not loaded
const TIER_DEFAULTS: Record<string, {
  max_users: number;
  max_resources: number;
  can_manage_oauth_credentials: boolean;
  can_accept_payments: boolean;
  can_use_custom_domain: boolean;
  can_white_label: boolean;
  can_api_access: boolean;
  can_add_video_conferencing: boolean;
  can_use_sms_reminders: boolean;
  can_use_masked_phone_numbers: boolean;
  can_use_plugins: boolean;
  can_use_tasks: boolean;
  can_create_plugins: boolean;
  can_use_webhooks: boolean;
  can_use_calendar_sync: boolean;
  can_export_data: boolean;
  can_require_2fa: boolean;
}> = {
  free: {
    max_users: 1,
    max_resources: 1,
    can_manage_oauth_credentials: false,
    can_accept_payments: false,
    can_use_custom_domain: false,
    can_white_label: false,
    can_api_access: false,
    can_add_video_conferencing: false,
    can_use_sms_reminders: false,
    can_use_masked_phone_numbers: false,
    can_use_plugins: true,
    can_use_tasks: true,
    can_create_plugins: false,
    can_use_webhooks: false,
    can_use_calendar_sync: false,
    can_export_data: false,
    can_require_2fa: false,
  },
  starter: {
    max_users: 3,
    max_resources: 3,
    can_manage_oauth_credentials: false,
    can_accept_payments: true,
    can_use_custom_domain: false,
    can_white_label: false,
    can_api_access: false,
    can_add_video_conferencing: false,
    can_use_sms_reminders: false,
    can_use_masked_phone_numbers: false,
    can_use_plugins: true,
    can_use_tasks: true,
    can_create_plugins: false,
    can_use_webhooks: false,
    can_use_calendar_sync: false,
    can_export_data: false,
    can_require_2fa: false,
  },
  growth: {
    max_users: 10,
    max_resources: 10,
    can_manage_oauth_credentials: false,
    can_accept_payments: true,
    can_use_custom_domain: true,
    can_white_label: false,
    can_api_access: false,
    can_add_video_conferencing: true,
    can_use_sms_reminders: true,
    can_use_masked_phone_numbers: false,
    can_use_plugins: true,
    can_use_tasks: true,
    can_create_plugins: false,
    can_use_webhooks: true,
    can_use_calendar_sync: true,
    can_export_data: false,
    can_require_2fa: false,
  },
  pro: {
    max_users: 25,
    max_resources: 25,
    can_manage_oauth_credentials: true,
    can_accept_payments: true,
    can_use_custom_domain: true,
    can_white_label: false,
    can_api_access: true,
    can_add_video_conferencing: true,
    can_use_sms_reminders: true,
    can_use_masked_phone_numbers: true,
    can_use_plugins: true,
    can_use_tasks: true,
    can_create_plugins: true,
    can_use_webhooks: true,
    can_use_calendar_sync: true,
    can_export_data: true,
    can_require_2fa: true,
  },
  enterprise: {
    max_users: -1, // unlimited
    max_resources: -1, // unlimited
    can_manage_oauth_credentials: true,
    can_accept_payments: true,
    can_use_custom_domain: true,
    can_white_label: true,
    can_api_access: true,
    can_add_video_conferencing: true,
    can_use_sms_reminders: true,
    can_use_masked_phone_numbers: true,
    can_use_plugins: true,
    can_use_tasks: true,
    can_create_plugins: true,
    can_use_webhooks: true,
    can_use_calendar_sync: true,
    can_export_data: true,
    can_require_2fa: true,
  },
};

const TenantInviteModal: React.FC<TenantInviteModalProps> = ({ isOpen, onClose }) => {
  const createInvitationMutation = useCreateTenantInvitation();
  const { data: billingPlans, isLoading: plansLoading } = useBillingPlans();

  // Get available plan options from billing plans
  const planOptions = useMemo(() => {
    if (!billingPlans) return [];
    return billingPlans
      .filter(p => p.is_active && p.active_version)
      .map(p => ({
        code: p.code,
        name: p.name,
        displayOrder: p.display_order,
      }))
      .sort((a, b) => a.displayOrder - b.displayOrder);
  }, [billingPlans]);

  const [inviteForm, setInviteForm] = useState({
    email: '',
    suggested_business_name: '',
    plan_code: 'growth', // Default to growth plan (most popular)
    use_custom_limits: false,
    // Limits
    max_users: 10,
    max_resources: 10,
    // Permissions
    can_manage_oauth_credentials: false,
    can_accept_payments: true,
    can_use_custom_domain: true,
    can_white_label: false,
    can_api_access: false,
    can_add_video_conferencing: true,
    can_use_sms_reminders: true,
    can_use_masked_phone_numbers: false,
    can_use_plugins: true,
    can_use_tasks: true,
    can_create_plugins: false,
    can_use_webhooks: true,
    can_use_calendar_sync: true,
    can_export_data: false,
    can_require_2fa: false,
    personal_message: '',
  });
  const [inviteError, setInviteError] = useState<string | null>(null);
  const [inviteSuccess, setInviteSuccess] = useState(false);

  // Get tier defaults from billing plans or fallback to static defaults
  const getTierDefaults = (planCode: string) => {
    // Try to find matching billing plan
    if (billingPlans) {
      const planVersion = getActivePlanVersion(billingPlans, planCode);
      if (planVersion) {
        const features = planVersion.features;
        return {
          max_users: getIntegerFeature(features, 'max_users') ?? TIER_DEFAULTS[planCode]?.max_users ?? 5,
          max_resources: getIntegerFeature(features, 'max_resources') ?? TIER_DEFAULTS[planCode]?.max_resources ?? 10,
          can_manage_oauth_credentials: getBooleanFeature(features, 'white_label') && getBooleanFeature(features, 'api_access'),
          can_accept_payments: getBooleanFeature(features, 'payment_processing'),
          can_use_custom_domain: getBooleanFeature(features, 'custom_domain'),
          can_white_label: getBooleanFeature(features, 'white_label') || getBooleanFeature(features, 'remove_branding'),
          can_api_access: getBooleanFeature(features, 'api_access'),
          can_add_video_conferencing: getBooleanFeature(features, 'integrations_enabled'),
          can_use_sms_reminders: getBooleanFeature(features, 'sms_enabled'),
          can_use_masked_phone_numbers: getBooleanFeature(features, 'masked_calling_enabled'),
          can_use_plugins: true, // Always enabled
          can_use_tasks: true, // Always enabled
          can_create_plugins: getBooleanFeature(features, 'api_access'),
          can_use_webhooks: getBooleanFeature(features, 'integrations_enabled'),
          can_use_calendar_sync: getBooleanFeature(features, 'integrations_enabled'),
          can_export_data: getBooleanFeature(features, 'advanced_reporting'),
          can_require_2fa: getBooleanFeature(features, 'team_permissions'),
        };
      }
    }
    // Fallback to static defaults
    return TIER_DEFAULTS[planCode] || TIER_DEFAULTS.free;
  };

  // Handle plan change - auto-update limits and permissions
  const handlePlanChange = (newPlanCode: string) => {
    const defaults = getTierDefaults(newPlanCode);
    setInviteForm(prev => ({
      ...prev,
      plan_code: newPlanCode,
      ...defaults,
    }));
  };

  // Reset to plan defaults button handler
  const handleResetToPlanDefaults = () => {
    const defaults = getTierDefaults(inviteForm.plan_code);
    setInviteForm(prev => ({
      ...prev,
      ...defaults,
    }));
  };

  // Initialize defaults when modal opens or billing plans load
  useEffect(() => {
    if (isOpen) {
      const defaults = getTierDefaults(inviteForm.plan_code);
      setInviteForm(prev => ({
        ...prev,
        ...defaults,
      }));
    }
  }, [isOpen, billingPlans]);

  const resetForm = () => {
    const defaults = getTierDefaults('growth');
    setInviteForm({
      email: '',
      suggested_business_name: '',
      plan_code: 'growth',
      use_custom_limits: false,
      ...defaults,
      personal_message: '',
    });
    setInviteError(null);
    setInviteSuccess(false);
  };

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

  const handleInviteSend = () => {
    setInviteError(null);
    setInviteSuccess(false);

    // Validation
    if (!inviteForm.email.trim()) {
      setInviteError('Email address is required');
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inviteForm.email)) {
      setInviteError('Please enter a valid email address');
      return;
    }

    // Map plan_code to subscription_tier for backend compatibility
    const planCodeToTier = (code: string): string => {
      const mapping: Record<string, string> = {
        free: 'FREE',
        starter: 'STARTER',
        growth: 'GROWTH',
        pro: 'PROFESSIONAL',
        enterprise: 'ENTERPRISE',
      };
      return mapping[code] || code.toUpperCase();
    };

    // Build invitation data
    const data: any = {
      email: inviteForm.email,
      subscription_tier: planCodeToTier(inviteForm.plan_code),
    };

    if (inviteForm.suggested_business_name.trim()) {
      data.suggested_business_name = inviteForm.suggested_business_name.trim();
    }

    // If using custom limits, include all the overrides
    if (inviteForm.use_custom_limits) {
      data.custom_max_users = inviteForm.max_users;
      data.custom_max_resources = inviteForm.max_resources;
      data.permissions = {
        can_manage_oauth_credentials: inviteForm.can_manage_oauth_credentials,
        can_accept_payments: inviteForm.can_accept_payments,
        can_use_custom_domain: inviteForm.can_use_custom_domain,
        can_white_label: inviteForm.can_white_label,
        can_api_access: inviteForm.can_api_access,
      };
      data.limits = {
        can_add_video_conferencing: inviteForm.can_add_video_conferencing,
        can_use_sms_reminders: inviteForm.can_use_sms_reminders,
        can_use_masked_phone_numbers: inviteForm.can_use_masked_phone_numbers,
        can_use_plugins: inviteForm.can_use_plugins,
        can_use_tasks: inviteForm.can_use_tasks,
        can_create_plugins: inviteForm.can_create_plugins,
        can_use_webhooks: inviteForm.can_use_webhooks,
        can_use_calendar_sync: inviteForm.can_use_calendar_sync,
        can_export_data: inviteForm.can_export_data,
        can_require_2fa: inviteForm.can_require_2fa,
      };
    }

    if (inviteForm.personal_message.trim()) {
      data.personal_message = inviteForm.personal_message.trim();
    }

    createInvitationMutation.mutate(data, {
      onSuccess: () => {
        setInviteSuccess(true);
        setTimeout(() => {
          handleClose();
        }, 2000);
      },
      onError: (error: any) => {
        setInviteError(error.response?.data?.detail || error.message || 'Failed to send invitation');
      },
    });
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
        {/* Modal Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
              <Send size={24} className="text-indigo-600 dark:text-indigo-400" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Invite New Tenant</h3>
              <p className="text-sm text-gray-500 dark:text-gray-400">Send an invitation to create a new business</p>
            </div>
          </div>
          <button
            onClick={handleClose}
            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            <X size={20} className="text-gray-500 dark:text-gray-400" />
          </button>
        </div>

        {/* Modal Body */}
        <div className="p-6 space-y-6">
          {inviteError && (
            <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
              <p className="text-sm text-red-600 dark:text-red-400">{inviteError}</p>
            </div>
          )}

          {inviteSuccess && (
            <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
              <p className="text-sm text-green-600 dark:text-green-400">Invitation sent successfully!</p>
            </div>
          )}

          {/* Email */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Email Address *
            </label>
            <div className="relative">
              <Mail size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <input
                type="email"
                value={inviteForm.email}
                onChange={(e) => setInviteForm({ ...inviteForm, email: e.target.value })}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder="owner@business.com"
              />
            </div>
          </div>

          {/* Suggested Business Name */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Suggested Business Name (Optional)
            </label>
            <div className="relative">
              <Building2 size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                value={inviteForm.suggested_business_name}
                onChange={(e) => setInviteForm({ ...inviteForm, suggested_business_name: e.target.value })}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder="Owner can change this during onboarding"
              />
            </div>
          </div>

          {/* Subscription Plan */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Subscription Plan
              </label>
              <button
                type="button"
                onClick={handleResetToPlanDefaults}
                disabled={plansLoading}
                className="flex items-center gap-1 text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 disabled:opacity-50"
              >
                <RefreshCw size={12} />
                Reset to plan defaults
              </button>
            </div>
            <select
              value={inviteForm.plan_code}
              onChange={(e) => handlePlanChange(e.target.value)}
              disabled={plansLoading}
              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:opacity-50"
            >
              {plansLoading ? (
                <option>Loading plans...</option>
              ) : planOptions.length > 0 ? (
                planOptions.map(plan => (
                  <option key={plan.code} value={plan.code}>
                    {plan.name}
                  </option>
                ))
              ) : (
                <>
                  <option value="free">Free</option>
                  <option value="starter">Starter</option>
                  <option value="growth">Growth</option>
                  <option value="pro">Pro</option>
                  <option value="enterprise">Enterprise</option>
                </>
              )}
            </select>
            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
              Plan defaults are loaded from billing catalog. Changing plan will update limits and permissions.
            </p>
          </div>

          {/* Override Tier Limits Toggle */}
          <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
            <button
              type="button"
              onClick={() => setInviteForm({ ...inviteForm, use_custom_limits: !inviteForm.use_custom_limits })}
              className="flex items-center justify-between w-full p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
            >
              <div className="flex items-center gap-3">
                <input
                  type="checkbox"
                  checked={inviteForm.use_custom_limits}
                  onChange={(e) => setInviteForm({ ...inviteForm, use_custom_limits: e.target.checked })}
                  className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
                  onClick={(e) => e.stopPropagation()}
                />
                <div className="text-left">
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Override Tier Limits
                  </span>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    Customize limits and permissions for this tenant
                  </p>
                </div>
              </div>
              {inviteForm.use_custom_limits ? (
                <ChevronUp size={20} className="text-gray-400" />
              ) : (
                <ChevronDown size={20} className="text-gray-400" />
              )}
            </button>

            {/* Sliding Custom Limits Panel */}
            <div
              className={`overflow-hidden transition-all duration-300 ease-in-out ${
                inviteForm.use_custom_limits ? 'max-h-[2000px] opacity-100 mt-4' : 'max-h-0 opacity-0'
              }`}
            >
              <div className="space-y-4 p-4 bg-gray-50 dark:bg-gray-700/30 rounded-lg border border-gray-200 dark:border-gray-700">
                {/* Limits Configuration */}
                <div>
                  <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-3">
                    Limits Configuration
                  </h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
                    Use -1 for unlimited
                  </p>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">Max Users</label>
                      <input
                        type="number"
                        min="-1"
                        value={inviteForm.max_users}
                        onChange={(e) => setInviteForm({ ...inviteForm, max_users: parseInt(e.target.value) || 0 })}
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                      />
                    </div>
                    <div>
                      <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">Max Resources</label>
                      <input
                        type="number"
                        min="-1"
                        value={inviteForm.max_resources}
                        onChange={(e) => setInviteForm({ ...inviteForm, max_resources: parseInt(e.target.value) || 0 })}
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                      />
                    </div>
                  </div>
                </div>

                {/* Payments & Revenue */}
                <div className="pt-3 border-t border-gray-200 dark:border-gray-600">
                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                    Payments & Revenue
                  </h4>
                  <div className="grid grid-cols-2 gap-2">
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_accept_payments}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_accept_payments: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Online Payments</span>
                    </label>
                  </div>
                </div>

                {/* Communication */}
                <div className="pt-3 border-t border-gray-200 dark:border-gray-600">
                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                    Communication
                  </h4>
                  <div className="grid grid-cols-2 gap-2">
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_use_sms_reminders}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_use_sms_reminders: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">SMS Reminders</span>
                    </label>
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_use_masked_phone_numbers}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_use_masked_phone_numbers: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Masked Calling</span>
                    </label>
                  </div>
                </div>

                {/* Customization */}
                <div className="pt-3 border-t border-gray-200 dark:border-gray-600">
                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                    Customization
                  </h4>
                  <div className="grid grid-cols-2 gap-2">
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_use_custom_domain}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_use_custom_domain: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Custom Domains</span>
                    </label>
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_white_label}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_white_label: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">White Labelling</span>
                    </label>
                  </div>
                </div>

                {/* Plugins & Automation */}
                <div className="pt-3 border-t border-gray-200 dark:border-gray-600">
                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                    Plugins & Automation
                  </h4>
                  <div className="grid grid-cols-2 gap-2">
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_use_plugins}
                        onChange={(e) => {
                          const checked = e.target.checked;
                          setInviteForm(prev => ({
                            ...prev,
                            can_use_plugins: checked,
                            ...(checked ? {} : { can_use_tasks: false, can_create_plugins: false })
                          }));
                        }}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Use Plugins</span>
                    </label>
                    <label className={`flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg ${inviteForm.can_use_plugins ? 'hover:bg-white dark:hover:bg-gray-700 cursor-pointer' : 'opacity-50 cursor-not-allowed'}`}>
                      <input
                        type="checkbox"
                        checked={inviteForm.can_use_tasks}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_use_tasks: e.target.checked })}
                        disabled={!inviteForm.can_use_plugins}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Scheduled Tasks</span>
                    </label>
                    <label className={`flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg ${inviteForm.can_use_plugins ? 'hover:bg-white dark:hover:bg-gray-700 cursor-pointer' : 'opacity-50 cursor-not-allowed'}`}>
                      <input
                        type="checkbox"
                        checked={inviteForm.can_create_plugins}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_create_plugins: e.target.checked })}
                        disabled={!inviteForm.can_use_plugins}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Create Plugins</span>
                    </label>
                  </div>
                </div>

                {/* Advanced Features */}
                <div className="pt-3 border-t border-gray-200 dark:border-gray-600">
                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                    Advanced Features
                  </h4>
                  <div className="grid grid-cols-2 gap-2">
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_api_access}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_api_access: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">API Access</span>
                    </label>
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_use_webhooks}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_use_webhooks: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Webhooks</span>
                    </label>
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_use_calendar_sync}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_use_calendar_sync: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Calendar Sync</span>
                    </label>
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_export_data}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_export_data: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Data Export</span>
                    </label>
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_add_video_conferencing}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_add_video_conferencing: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Video Conferencing</span>
                    </label>
                  </div>
                </div>

                {/* Enterprise */}
                <div className="pt-3 border-t border-gray-200 dark:border-gray-600">
                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                    Enterprise
                  </h4>
                  <div className="grid grid-cols-2 gap-2">
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_manage_oauth_credentials}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_manage_oauth_credentials: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Manage OAuth</span>
                    </label>
                    <label className="flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-white dark:hover:bg-gray-700 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={inviteForm.can_require_2fa}
                        onChange={(e) => setInviteForm({ ...inviteForm, can_require_2fa: e.target.checked })}
                        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                      />
                      <span className="text-sm text-gray-700 dark:text-gray-300">Require 2FA</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Personal Message */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Personal Message (Optional)
            </label>
            <textarea
              value={inviteForm.personal_message}
              onChange={(e) => setInviteForm({ ...inviteForm, personal_message: e.target.value })}
              rows={3}
              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
              placeholder="Add a personal note to the invitation email..."
            />
          </div>
        </div>

        {/* Modal Footer */}
        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700">
          <button
            onClick={handleClose}
            className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg font-medium text-sm transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={handleInviteSend}
            disabled={createInvitationMutation.isPending || inviteSuccess}
            className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Send size={16} />
            {createInvitationMutation.isPending ? 'Sending...' : inviteSuccess ? 'Sent!' : 'Send Invitation'}
          </button>
        </div>
      </div>
    </div>
  );
};

export default TenantInviteModal;
