<div class="register-wrapper">
  <div class="register-container">
    <div class="register-header">
      <div class="logo-container">
        <svg class="medical-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L2 7V10C2 16 6 21.4 12 22C18 21.4 22 16 22 10V7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 8V16M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <h1 class="register-title">Doctor Registration</h1>
      <p class="register-subtitle">Join our telemedicine platform</p>
    </div>

    <!-- Success Message -->
    <div class="success-message" *ngIf="success">
      <svg class="success-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <div class="success-content">
        <h3>Registration Successful!</h3>
        <p>Your account has been created. Redirecting to login...</p>
      </div>
    </div>

    <!-- Registration Form -->
    <form class="register-form" *ngIf="!success" (ngSubmit)="submit()">
      <div class="form-section">
        <h3 class="section-title">Personal Information</h3>
        <div class="form-row">
          <div class="form-group">
            <label for="firstName" class="form-label">First Name</label>
            <input 
              id="firstName"
              type="text" 
              [(ngModel)]="formData.firstName" 
              name="firstName" 
              class="form-input"
              placeholder="John"
              required
              minlength="2"
              maxlength="50"
            />
          </div>
          <div class="form-group">
            <label for="lastName" class="form-label">Last Name</label>
            <input 
              id="lastName"
              type="text" 
              [(ngModel)]="formData.lastName" 
              name="lastName" 
              class="form-input"
              placeholder="Smith"
              required
              minlength="2"
              maxlength="50"
            />
          </div>
        </div>

        <div class="form-group">
          <label for="email" class="form-label">Email Address</label>
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input 
              id="email"
              type="email" 
              [(ngModel)]="formData.email" 
              name="email" 
              class="form-input"
              [class.input-error]="hasFieldError('email')"
              placeholder="doctor@example.com"
              required 
              autocomplete="email"
              (blur)="validationErrors['email'] = validateField('email', formData.email)"
              (input)="validationErrors['email'] = ''"
            />
          </div>
          <span class="field-error" *ngIf="hasFieldError('email')">{{ getFieldError('email') }}</span>
        </div>

        <div class="form-group">
          <label for="phoneNumber" class="form-label">Phone Number</label>
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22 16.92V19.92C22.0011 20.1985 21.9441 20.4742 21.8325 20.7292C21.7209 20.9842 21.5573 21.2129 21.3528 21.4004C21.1483 21.5879 20.9071 21.7302 20.6446 21.8181C20.3821 21.906 20.1039 21.9376 19.83 21.91C16.7428 21.5856 13.787 20.5341 11.19 18.85C8.77382 17.3147 6.72533 15.2662 5.19 12.85C3.49997 10.2412 2.44824 7.27099 2.13 4.17C2.10237 3.89697 2.13376 3.62029 2.2218 3.35926C2.30983 3.09824 2.45226 2.85827 2.63988 2.65473C2.82751 2.45119 3.0562 2.28831 3.31111 2.17698C3.56601 2.06566 3.84169 2.00857 4.12 2.01H7.12C7.68024 2.00469 8.22027 2.22017 8.62921 2.61133C9.03815 3.00249 9.28534 3.54043 9.32 4.1C9.37444 5.1076 9.52099 6.10863 9.758 7.09C9.89341 7.63998 9.83945 8.21585 9.606 8.73L8.39 11.12C9.95606 13.8721 12.1279 16.0439 14.88 17.61L17.27 16.4C17.7842 16.1666 18.36 16.1126 18.91 16.248C19.8914 16.485 20.8924 16.6316 21.9 16.686C22.4596 16.7207 22.9975 16.9679 23.3887 17.3768C23.7798 17.7858 23.9953 18.3258 23.99 18.886L22.99 18.886Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input 
              id="phoneNumber"
              type="tel" 
              [(ngModel)]="formData.phoneNumber" 
              name="phoneNumber" 
              class="form-input"
              [class.input-error]="hasFieldError('phoneNumber')"
              placeholder="+1234567890"
              required
              pattern="^\+?[1-9][0-9]\d{1,14}"
              (blur)="validationErrors['phoneNumber'] = validateField('phoneNumber', formData.phoneNumber)"
              (input)="validationErrors['phoneNumber'] = ''"
            />
          </div>
          <span class="field-error" *ngIf="hasFieldError('phoneNumber')">{{ getFieldError('phoneNumber') }}</span>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Medical Credentials</h3>
        <div class="form-group">
          <label for="medicalLicenseNumber" class="form-label">Medical License Number</label>
          <input 
            id="medicalLicenseNumber"
            type="text" 
            [(ngModel)]="formData.medicalLicenseNumber" 
            name="medicalLicenseNumber" 
            class="form-input"
            [class.input-error]="hasFieldError('medicalLicenseNumber')"
            placeholder="MD123456"
            required
            maxlength="100"
            (blur)="validationErrors['medicalLicenseNumber'] = validateField('medicalLicenseNumber', formData.medicalLicenseNumber)"
            (input)="validationErrors['medicalLicenseNumber'] = ''"
          />
          <span class="field-error" *ngIf="hasFieldError('medicalLicenseNumber')">{{ getFieldError('medicalLicenseNumber') }}</span>
        </div>

        <div class="form-group">
          <label for="specialization" class="form-label">Specialization</label>
          <input 
            id="specialization"
            type="text" 
            [(ngModel)]="formData.specialization" 
            name="specialization" 
            class="form-input"
            [class.input-error]="hasFieldError('specialization')"
            placeholder="Cardiology, General Practice, etc."
            required
            maxlength="100"
            (blur)="validationErrors['specialization'] = validateField('specialization', formData.specialization)"
            (input)="validationErrors['specialization'] = ''"
          />
          <span class="field-error" *ngIf="hasFieldError('specialization')">{{ getFieldError('specialization') }}</span>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="yearsOfExperience" class="form-label">Years of Experience</label>
            <input 
              id="yearsOfExperience"
              type="number" 
              [(ngModel)]="formData.yearsOfExperience" 
              name="yearsOfExperience" 
              class="form-input"
              [class.input-error]="hasFieldError('yearsOfExperience')"
              placeholder="5"
              required
              min="0"
              max="50"
              (blur)="validationErrors['yearsOfExperience'] = validateField('yearsOfExperience', formData.yearsOfExperience)"
              (input)="validationErrors['yearsOfExperience'] = ''"
            />
            <span class="field-error" *ngIf="hasFieldError('yearsOfExperience')">{{ getFieldError('yearsOfExperience') }}</span>
          </div>
          <div class="form-group">
            <label for="consultationFee" class="form-label">Consultation Fee ($)</label>
            <input 
              id="consultationFee"
              type="number" 
              [(ngModel)]="formData.consultationFee" 
              name="consultationFee" 
              class="form-input"
              [class.input-error]="hasFieldError('consultationFee')"
              placeholder="150.00"
              required
              min="0"
              step="0.01"
              (blur)="validationErrors['consultationFee'] = validateField('consultationFee', formData.consultationFee)"
              (input)="validationErrors['consultationFee'] = ''"
            />
            <span class="field-error" *ngIf="hasFieldError('consultationFee')">{{ getFieldError('consultationFee') }}</span>
          </div>
        </div>

        <div class="form-group">
          <label for="biography" class="form-label">Biography (Optional)</label>
          <textarea 
            id="biography"
            [(ngModel)]="formData.biography" 
            name="biography" 
            class="form-input form-textarea"
            placeholder="Tell us about your medical background and expertise..."
            rows="4"
            maxlength="1000"
          ></textarea>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Account Security</h3>
        <div class="form-group">
          <label for="password" class="form-label">Password</label>
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
              <path d="M7 11V7C7 4.239 9.239 2 12 2C14.761 2 17 4.239 17 7V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input 
              id="password"
              [type]="showPassword ? 'text' : 'password'" 
              [(ngModel)]="formData.password" 
              name="password" 
              class="form-input"
              [class.input-error]="hasFieldError('password')"
              placeholder="Minimum 8 characters"
              required
              minlength="8"
              maxlength="20"
              autocomplete="new-password"
              (input)="onPasswordChange()"
              (blur)="validationErrors['password'] = validateField('password', formData.password)"
            />
            <button 
              type="button" 
              class="password-toggle"
              (click)="togglePasswordVisibility()"
              tabindex="-1"
              [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'"
            >
              <svg *ngIf="!showPassword" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              </svg>
              <svg *ngIf="showPassword" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.94 17.94C16.2307 19.243 14.1491 20.4649 12 20.4649C5 20.4649 1 12 1 12C2.24389 9.68192 3.96914 7.65661 6.06 6.06M9.9 4.24C10.5883 4.07888 11.2931 3.99834 12 4C19 4 23 12 23 12C22.393 13.1356 21.6691 14.2047 20.84 15.19M14.12 14.12C13.8454 14.4147 13.5141 14.6511 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1751 15.0073 10.8016 14.8565C10.4281 14.7056 10.0887 14.481 9.80385 14.1961C9.51897 13.9113 9.29436 13.5719 9.14354 13.1984C8.99272 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2218 9.18488 10.8538C9.34886 10.4859 9.58525 10.1546 9.88 9.88M1 1L23 23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
          <div class="password-strength" *ngIf="formData.password">
            <div class="strength-bar">
              <div 
                class="strength-fill" 
                [style.width.%]="passwordStrength * 20"
                [class]="'strength-' + passwordStrength"
              ></div>
            </div>
            <span class="strength-text" [class]="'strength-' + passwordStrength">
              {{ passwordStrengthText || 'Enter a password' }}
            </span>
          </div>
          <span class="field-error" *ngIf="hasFieldError('password')">{{ getFieldError('password') }}</span>
        </div>

        <div class="form-group">
          <label for="confirmPassword" class="form-label">Confirm Password</label>
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
              <path d="M7 11V7C7 4.239 9.239 2 12 2C14.761 2 17 4.239 17 7V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input 
              id="confirmPassword"
              [type]="showConfirmPassword ? 'text' : 'password'" 
              [(ngModel)]="formData.confirmPassword" 
              name="confirmPassword" 
              class="form-input"
              [class.input-error]="hasFieldError('confirmPassword')"
              placeholder="Re-enter your password"
              required
              autocomplete="new-password"
              (blur)="validationErrors['confirmPassword'] = validateField('confirmPassword', formData.confirmPassword)"
              (input)="validationErrors['confirmPassword'] = ''"
            />
            <button 
              type="button" 
              class="password-toggle"
              (click)="toggleConfirmPasswordVisibility()"
              tabindex="-1"
              [attr.aria-label]="showConfirmPassword ? 'Hide password' : 'Show password'"
            >
              <svg *ngIf="!showConfirmPassword" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              </svg>
              <svg *ngIf="showConfirmPassword" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.94 17.94C16.2307 19.243 14.1491 20.4649 12 20.4649C5 20.4649 1 12 1 12C2.24389 9.68192 3.96914 7.65661 6.06 6.06M9.9 4.24C10.5883 4.07888 11.2931 3.99834 12 4C19 4 23 12 23 12C22.393 13.1356 21.6691 14.2047 20.84 15.19M14.12 14.12C13.8454 14.4147 13.5141 14.6511 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1751 15.0073 10.8016 14.8565C10.4281 14.7056 10.0887 14.481 9.80385 14.1961C9.51897 13.9113 9.29436 13.5719 9.14354 13.1984C8.99272 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2218 9.18488 10.8538C9.34886 10.4859 9.58525 10.1546 9.88 9.88M1 1L23 23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
          <span class="field-error" *ngIf="hasFieldError('confirmPassword')">{{ getFieldError('confirmPassword') }}</span>
        </div>
      </div>

      <div class="error-message" *ngIf="error">
        <svg class="error-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <span>{{ error }}</span>
      </div>

      <button 
        type="submit" 
        class="submit-button"
        [disabled]="loading"
        [class.loading]="loading"
      >
        <span *ngIf="!loading">Create Doctor Account</span>
        <span *ngIf="loading" class="loading-content">
          <svg class="spinner" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" stroke-opacity="0.25"/>
            <path d="M12 2C16.4183 2 20 5.58172 20 10" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
          </svg>
          Creating account...
        </span>
      </button>
    </form>

    <div class="register-footer">
      <p class="footer-text">Already have an account? <a routerLink="/login" class="login-link">Sign in</a></p>
    </div>
  </div>
</div>

