import React from 'react';
import { useTranslation } from 'react-i18next';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import { UserPlus, Shield, Mail, Phone } from 'lucide-react';

const MemberDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
  const { t } = useTranslation('wizards');
  const data = dataRef?.current || {};
  const handleFieldChange = (field: string, value: any) => {
    onDataChange?.({ ...data, [field]: value });
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <UserPlus className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">{t('teamMember.memberDetails')}</h3>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="md:col-span-2">
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('teamMember.fields.fullName')} *</label>
          <input
            type="text"
            value={data.fullName || ''}
            onChange={(e) => handleFieldChange('fullName', e.target.value)}
            placeholder={t('teamMember.fields.fullNamePlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            <Mail className="w-3.5 h-3.5 inline mr-1" />
            {t('teamMember.fields.email')} *
          </label>
          <input
            type="email"
            value={data.email || ''}
            onChange={(e) => handleFieldChange('email', e.target.value)}
            placeholder={t('teamMember.fields.emailPlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            <Phone className="w-3.5 h-3.5 inline mr-1" />
            {t('teamMember.fields.phone')}
          </label>
          <input
            type="tel"
            value={data.phone || ''}
            onChange={(e) => handleFieldChange('phone', e.target.value)}
            placeholder={t('teamMember.fields.phonePlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('teamMember.fields.position')} *</label>
          <select
            value={data.position || 'baker'}
            onChange={(e) => handleFieldChange('position', e.target.value)}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          >
            <option value="baker">{t('teamMember.positions.baker')}</option>
            <option value="pastry-chef">{t('teamMember.positions.pastryChef')}</option>
            <option value="manager">{t('teamMember.positions.manager')}</option>
            <option value="sales">{t('teamMember.positions.sales')}</option>
            <option value="delivery">{t('teamMember.positions.delivery')}</option>
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('teamMember.fields.employmentType')}</label>
          <select
            value={data.employmentType || 'full-time'}
            onChange={(e) => handleFieldChange('employmentType', e.target.value)}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          >
            <option value="full-time">{t('teamMember.employmentTypes.fullTime')}</option>
            <option value="part-time">{t('teamMember.employmentTypes.partTime')}</option>
            <option value="contractor">{t('teamMember.employmentTypes.contractor')}</option>
          </select>
        </div>
      </div>
    </div>
  );
};

const PermissionsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
  const { t } = useTranslation('wizards');
  const data = dataRef?.current || {};

  const handleFieldChange = (field: string, value: any) => {
    onDataChange?.({ ...data, [field]: value });
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Shield className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">{t('teamMember.roleAndPermissions')}</h3>
        <p className="text-sm text-[var(--text-secondary)]">{data.fullName}</p>
      </div>

      <div>
        <label className="block text-sm font-medium text-[var(--text-secondary)] mb-3">{t('teamMember.fields.systemRole')}</label>
        <select
          value={data.role}
          onChange={(e) => handleFieldChange('role', e.target.value)}
          className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
        >
          <option value="admin">{t('teamMember.roles.admin')}</option>
          <option value="manager">{t('teamMember.roles.manager')}</option>
          <option value="staff">{t('teamMember.roles.staff')}</option>
          <option value="view-only">{t('teamMember.roles.viewOnly')}</option>
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium text-[var(--text-secondary)] mb-3">{t('teamMember.specificPermissions')}</label>
        <div className="space-y-2">
          {[
            { key: 'canManageInventory', label: t('teamMember.permissions.canManageInventory') },
            { key: 'canViewRecipes', label: t('teamMember.permissions.canViewRecipes') },
            { key: 'canCreateOrders', label: t('teamMember.permissions.canCreateOrders') },
            { key: 'canViewFinancial', label: t('teamMember.permissions.canViewFinancial') },
          ].map(({ key, label }) => (
            <label
              key={key}
              className="flex items-center gap-3 p-3 border border-[var(--border-secondary)] rounded-lg cursor-pointer hover:bg-[var(--bg-secondary)]/30"
            >
              <input
                type="checkbox"
                checked={data[key] ?? false}
                onChange={(e) => handleFieldChange(key, e.target.checked)}
                className="w-4 h-4 text-[var(--color-primary)] rounded focus:ring-[var(--color-primary)]"
              />
              <span className="text-sm text-[var(--text-primary)]">{label}</span>
            </label>
          ))}
        </div>
      </div>
    </div>
  );
};

export const TeamMemberWizardSteps = (dataRef: React.MutableRefObject<Record<string, any>>, setData: (data: Record<string, any>) => void): WizardStep[] => {
  // Wizard steps only handle UI and validation
  // API submission is handled centrally in UnifiedAddWizard.handleWizardComplete
  return [
    {
      id: 'member-details',
      title: 'wizards:teamMember.steps.memberDetails',
      description: 'wizards:teamMember.steps.memberDetailsDescription',
      component: MemberDetailsStep,
    },
    {
      id: 'member-permissions',
      title: 'wizards:teamMember.steps.roleAndPermissions',
      description: 'wizards:teamMember.steps.roleAndPermissionsDescription',
      component: PermissionsStep,
      validate: () => {
        const data = dataRef.current;
        // Validate required fields
        if (!data.fullName || data.fullName.trim().length < 1) {
          return false;
        }
        if (!data.email || !data.email.includes('@')) {
          return false;
        }
        if (!data.role) {
          return false;
        }
        return true;
      },
    },
  ];
};
