import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { SetupStepProps } from '../types';
import { useTeamMembers, useAddTeamMemberWithUserCreation, useRemoveTeamMember } from '../../../../api/hooks/tenant';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useAuthUser } from '../../../../stores/auth.store';
import type { TenantMemberResponse } from '../../../../api/types/tenant';

// Map frontend roles to backend roles
const mapRoleToBackend = (frontendRole: string): 'admin' | 'member' | 'viewer' => {
  switch (frontendRole) {
    case 'admin':
      return 'admin';
    case 'manager':
      return 'admin'; // Managers get admin permissions
    case 'baker':
      return 'member';
    case 'cashier':
      return 'member';
    default:
      return 'member';
  }
};

// Map backend roles to frontend display roles
const mapRoleFromBackend = (backendRole: string): string => {
  switch (backendRole) {
    case 'owner':
      return 'admin';
    case 'admin':
      return 'admin';
    case 'member':
      return 'baker';
    case 'viewer':
      return 'cashier';
    default:
      return 'baker';
  }
};

export const TeamSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete, onPrevious, canContinue }) => {
  const { t } = useTranslation();

  // Get tenant ID
  const currentTenant = useCurrentTenant();
  const user = useAuthUser();
  const tenantId = currentTenant?.id || user?.tenant_id || '';

  // Fetch existing team members
  const { data: teamMembersData, isLoading } = useTeamMembers(tenantId, true, { enabled: !!tenantId });
  // Filter out the current user (owner) from the list
  const teamMembers: TenantMemberResponse[] = (teamMembersData || []).filter(
    (member) => member.user_id !== user?.id
  );

  // Mutations
  const addMemberMutation = useAddTeamMemberWithUserCreation();
  const removeMemberMutation = useRemoveTeamMember();

  const [isAdding, setIsAdding] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    confirmPassword: '',
    phone: '',
    role: 'baker',
  });
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Notify parent - Team step is always optional, so always canContinue
  useEffect(() => {
    onUpdate?.({
      itemCount: teamMembers.length,
      canContinue: true, // Team step is optional - user can skip
    });
  }, [teamMembers.length, onUpdate]);

  // Validation
  const validateForm = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!formData.name.trim()) {
      newErrors.name = t('setup_wizard:team.errors.name_required', 'Name is required');
    }

    if (!formData.email.trim()) {
      newErrors.email = t('setup_wizard:team.errors.email_required', 'Email is required');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = t('setup_wizard:team.errors.email_invalid', 'Invalid email format');
    }

    // Check for duplicate email
    if (teamMembers.some((member) => member.user_email?.toLowerCase() === formData.email.toLowerCase())) {
      newErrors.email = t('setup_wizard:team.errors.email_duplicate', 'This email is already added');
    }

    // Password validation
    if (!formData.password.trim()) {
      newErrors.password = t('setup_wizard:team.errors.password_required', 'Password is required');
    } else if (formData.password.length < 8) {
      newErrors.password = t('setup_wizard:team.errors.password_min_length', 'Password must be at least 8 characters');
    }

    // Confirm password validation
    if (!formData.confirmPassword.trim()) {
      newErrors.confirmPassword = t('setup_wizard:team.errors.confirm_password_required', 'Please confirm the password');
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = t('setup_wizard:team.errors.passwords_mismatch', 'Passwords do not match');
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Form handlers
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!validateForm()) return;
    if (!tenantId) {
      setErrors({ form: t('common:error_no_tenant', 'No tenant found') });
      return;
    }

    try {
      await addMemberMutation.mutateAsync({
        tenantId,
        memberData: {
          create_user: true,
          email: formData.email,
          full_name: formData.name,
          password: formData.password,
          phone: formData.phone || undefined,
          role: mapRoleToBackend(formData.role),
          language: 'es',
          timezone: 'Europe/Madrid',
        },
      });

      // Reset form
      resetForm();
    } catch (error: any) {
      console.error('Error adding team member:', error);
      const errorMessage = error?.message || t('common:error_saving', 'Error saving. Please try again.');
      setErrors({ form: errorMessage });
    }
  };

  const resetForm = () => {
    setFormData({
      name: '',
      email: '',
      password: '',
      confirmPassword: '',
      phone: '',
      role: 'baker',
    });
    setErrors({});
    setIsAdding(false);
  };

  const handleRemove = async (memberUserId: string) => {
    if (!tenantId) return;

    try {
      await removeMemberMutation.mutateAsync({ tenantId, memberUserId });
    } catch (error) {
      console.error('Error removing team member:', error);
    }
  };

  const roleOptions = [
    { value: 'admin', label: t('team:role.admin', 'Admin'), icon: '👑', description: t('team:role.admin_desc', 'Full access') },
    { value: 'manager', label: t('team:role.manager', 'Manager'), icon: '📊', description: t('team:role.manager_desc', 'Can manage operations') },
    { value: 'baker', label: t('team:role.baker', 'Baker'), icon: '👨‍🍳', description: t('team:role.baker_desc', 'Production staff') },
    { value: 'cashier', label: t('team:role.cashier', 'Cashier'), icon: '💰', description: t('team:role.cashier_desc', 'Sales and POS') },
  ];

  // Get display role for a member
  const getMemberDisplayRole = (member: TenantMemberResponse) => {
    const displayRole = mapRoleFromBackend(member.role);
    return roleOptions.find(opt => opt.value === displayRole) || roleOptions[2]; // Default to baker
  };

  return (
    <div className="space-y-6">
      {/* Why This Matters */}
      <div className="bg-[var(--color-info)]/10 border border-[var(--color-info)]/20 rounded-lg p-4">
        <h3 className="font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
          <svg className="w-5 h-5 text-[var(--color-info)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          {t('setup_wizard:why_this_matters', 'Why This Matters')}
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          {t('setup_wizard:team.why', 'Adding team members allows you to assign tasks, track who does what, and give everyone the tools they need to work efficiently.')}
        </p>
      </div>

      {/* Optional badge */}
      <div className="flex items-center gap-2 text-sm">
        <span className="px-2 py-1 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-full border border-[var(--border-secondary)]">
          {t('setup_wizard:optional', 'Optional')}
        </span>
        <span className="text-[var(--text-tertiary)]">
          {t('setup_wizard:team.optional_note', 'You can add team members now or invite them later from settings')}
        </span>
      </div>

      {/* Info note about future invitations */}
      {teamMembers.length > 0 && (
        <div className="flex items-start gap-2 p-3 bg-[var(--color-info)]/10 border border-[var(--color-info)]/20 rounded-lg">
          <svg className="w-5 h-5 text-[var(--color-info)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div className="text-sm text-[var(--text-secondary)]">
            {t('setup_wizard:team.invitation_note', 'Team members will receive invitation emails once you complete the setup wizard.')}
          </div>
        </div>
      )}

      {/* Progress indicator */}
      <div className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
        <div className="flex items-center gap-2">
          <svg className="w-5 h-5 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
          <span className="text-sm font-medium text-[var(--text-primary)]">
            {t('setup_wizard:team.added_count', { count: teamMembers.length, defaultValue: '{count} team member added' })}
          </span>
        </div>
      </div>

      {/* Loading state */}
      {isLoading && (
        <div className="text-center py-4">
          <svg className="animate-spin h-6 w-6 text-[var(--color-primary)] mx-auto" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
        </div>
      )}

      {/* Team members list */}
      {teamMembers.length > 0 && (
        <div className="space-y-2">
          <h4 className="text-sm font-medium text-[var(--text-secondary)]">
            {t('setup_wizard:team.your_team', 'Your Team Members')}
          </h4>
          <div className="space-y-2 max-h-80 overflow-y-auto">
            {teamMembers.map((member) => {
              const displayRole = getMemberDisplayRole(member);
              return (
                <div
                  key={member.id}
                  className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg hover:border-[var(--border-primary)] transition-colors"
                >
                  <div className="flex-1 min-w-0 flex items-center gap-3">
                    <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="text-lg">
                        {displayRole.icon}
                      </span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <h5 className="font-medium text-[var(--text-primary)] truncate">{member.user_full_name || member.user_email || 'Unknown'}</h5>
                        <span className="text-xs px-2 py-0.5 bg-[var(--bg-primary)] rounded-full text-[var(--text-secondary)]">
                          {displayRole.label}
                        </span>
                      </div>
                      <p className="text-xs text-[var(--text-secondary)] truncate">{member.user_email || ''}</p>
                    </div>
                  </div>
                  <button
                    type="button"
                    onClick={() => handleRemove(member.user_id)}
                    disabled={removeMemberMutation.isPending}
                    className="p-1.5 text-[var(--text-secondary)] hover:text-[var(--color-error)] hover:bg-[var(--color-error)]/10 rounded transition-colors ml-2 disabled:opacity-50"
                    aria-label={t('common:remove', 'Remove')}
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Form-level error */}
      {errors.form && (
        <div className="p-3 bg-[var(--color-error)]/10 border border-[var(--color-error)]/20 rounded-lg">
          <p className="text-sm text-[var(--color-error)]">{errors.form}</p>
        </div>
      )}

      {/* Add form */}
      {isAdding ? (
        <form onSubmit={handleSubmit} className="space-y-4 p-4 border-2 border-[var(--color-primary)] rounded-lg bg-[var(--bg-secondary)]">
          <div className="flex items-center justify-between mb-2">
            <h4 className="font-medium text-[var(--text-primary)]">
              {t('setup_wizard:team.add_member', 'Add Team Member')}
            </h4>
            <button
              type="button"
              onClick={resetForm}
              className="text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
            >
              {t('common:cancel', 'Cancel')}
            </button>
          </div>

          <div className="space-y-4">
            {/* Name */}
            <div>
              <label htmlFor="member-name" className="block text-sm font-medium text-[var(--text-primary)] mb-1">
                {t('setup_wizard:team.fields.name', 'Full Name')} <span className="text-[var(--color-error)]">*</span>
              </label>
              <input
                id="member-name"
                type="text"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className={`w-full px-3 py-2 bg-[var(--bg-primary)] border ${errors.name ? 'border-[var(--color-error)]' : 'border-[var(--border-secondary)]'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]`}
                placeholder={t('setup_wizard:team.placeholders.name', 'e.g., María García')}
              />
              {errors.name && <p className="mt-1 text-xs text-[var(--color-error)]">{errors.name}</p>}
            </div>

            {/* Email (Username) */}
            <div>
              <label htmlFor="member-email" className="block text-sm font-medium text-[var(--text-primary)] mb-1">
                {t('setup_wizard:team.fields.email', 'Email Address')} <span className="text-[var(--color-error)]">*</span>
              </label>
              <input
                id="member-email"
                type="email"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className={`w-full px-3 py-2 bg-[var(--bg-primary)] border ${errors.email ? 'border-[var(--color-error)]' : 'border-[var(--border-secondary)]'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]`}
                placeholder={t('setup_wizard:team.placeholders.email', 'e.g., maria@panaderia.com')}
              />
              <p className="mt-1 text-xs text-[var(--text-tertiary)]">
                {t('setup_wizard:team.email_hint', 'This will be used as their username to log in')}
              </p>
              {errors.email && <p className="mt-1 text-xs text-[var(--color-error)]">{errors.email}</p>}
            </div>

            {/* Password */}
            <div>
              <label htmlFor="member-password" className="block text-sm font-medium text-[var(--text-primary)] mb-1">
                {t('setup_wizard:team.fields.password', 'Password')} <span className="text-[var(--color-error)]">*</span>
              </label>
              <input
                id="member-password"
                type="password"
                value={formData.password}
                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                className={`w-full px-3 py-2 bg-[var(--bg-primary)] border ${errors.password ? 'border-[var(--color-error)]' : 'border-[var(--border-secondary)]'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]`}
                placeholder={t('setup_wizard:team.placeholders.password', '••••••••')}
              />
              <p className="mt-1 text-xs text-[var(--text-tertiary)]">
                {t('setup_wizard:team.password_hint', 'Minimum 8 characters')}
              </p>
              {errors.password && <p className="mt-1 text-xs text-[var(--color-error)]">{errors.password}</p>}
            </div>

            {/* Confirm Password */}
            <div>
              <label htmlFor="member-confirm-password" className="block text-sm font-medium text-[var(--text-primary)] mb-1">
                {t('setup_wizard:team.fields.confirm_password', 'Confirm Password')} <span className="text-[var(--color-error)]">*</span>
              </label>
              <input
                id="member-confirm-password"
                type="password"
                value={formData.confirmPassword}
                onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
                className={`w-full px-3 py-2 bg-[var(--bg-primary)] border ${errors.confirmPassword ? 'border-[var(--color-error)]' : 'border-[var(--border-secondary)]'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]`}
                placeholder={t('setup_wizard:team.placeholders.confirm_password', '••••••••')}
              />
              {errors.confirmPassword && <p className="mt-1 text-xs text-[var(--color-error)]">{errors.confirmPassword}</p>}
            </div>

            {/* Phone (Optional) */}
            <div>
              <label htmlFor="member-phone" className="block text-sm font-medium text-[var(--text-primary)] mb-1">
                {t('setup_wizard:team.fields.phone', 'Phone')} <span className="text-[var(--text-tertiary)]">({t('common:optional', 'Optional')})</span>
              </label>
              <input
                id="member-phone"
                type="tel"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
                placeholder={t('setup_wizard:team.placeholders.phone', '+34 600 000 000')}
              />
            </div>

            {/* Role */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                {t('setup_wizard:team.fields.role', 'Role')} <span className="text-[var(--color-error)]">*</span>
              </label>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                {roleOptions.map((option) => (
                  <button
                    key={option.value}
                    type="button"
                    onClick={() => setFormData({ ...formData, role: option.value })}
                    className={`p-3 text-left border-2 rounded-lg transition-all ${formData.role === option.value
                      ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/20 shadow-lg ring-2 ring-[var(--color-primary)]/30'
                      : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]'
                      }`}
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-lg">{option.icon}</span>
                      <span className="text-sm font-medium text-[var(--text-primary)]">{option.label}</span>
                    </div>
                    <p className="text-xs text-[var(--text-secondary)]">{option.description}</p>
                  </button>
                ))}
              </div>
            </div>
          </div>

          <div className="flex gap-2 pt-2">
            <button
              type="submit"
              disabled={addMemberMutation.isPending}
              className="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              {addMemberMutation.isPending ? (
                <>
                  <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                  </svg>
                  {t('common:saving', 'Saving...')}
                </>
              ) : (
                t('common:add', 'Add')
              )}
            </button>
            <button
              type="button"
              onClick={resetForm}
              className="px-4 py-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded-lg transition-colors"
            >
              {t('common:cancel', 'Cancel')}
            </button>
          </div>
        </form>
      ) : (
        <button
          type="button"
          onClick={() => setIsAdding(true)}
          className="w-full p-4 border-2 border-dashed border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] hover:bg-[var(--bg-secondary)] transition-colors group"
        >
          <div className="flex items-center justify-center gap-2 text-[var(--text-secondary)] group-hover:text-[var(--color-primary)]">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            <span className="font-medium">
              {teamMembers.length === 0
                ? t('setup_wizard:team.add_first', 'Add Your First Team Member')
                : t('setup_wizard:team.add_another', 'Add Another Team Member')}
            </span>
          </div>
        </button>
      )}

      {/* Skip message */}
      {teamMembers.length === 0 && !isAdding && (
        <div className="text-center py-6">
          <p className="text-sm text-[var(--text-secondary)] mb-2">
            {t('setup_wizard:team.skip_message', 'Working alone for now? No problem!')}
          </p>
          <p className="text-xs text-[var(--text-tertiary)]">
            {t('setup_wizard:team.skip_hint', 'You can always invite team members later from Settings → Team')}
          </p>
        </div>
      )}

      {/* Navigation buttons */}
      {!isAdding && onComplete && (
        <div className="flex items-center justify-between gap-4 pt-6 mt-6 border-t border-[var(--border-secondary)]">
          <div className="flex gap-2">
            <button
              type="button"
              onClick={onPrevious}
              className="px-4 py-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors font-medium"
            >
              ← {t('common:previous', 'Anterior')}
            </button>
          </div>

          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={() => onComplete()}
              disabled={canContinue === false}
              className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium flex items-center gap-2"
            >
              {t('common:next', 'Continuar →')}
            </button>
          </div>
        </div>
      )}
    </div>
  );
};
