import { useNavigate } from 'react-router-dom'
import { useForm } from 'react-hook-form'
import { useState } from 'react'
import { api } from '../services/api'
import type { UserRole } from '@skillmate/shared'

interface CreateEmployeeData {
  firstName: string
  lastName: string
  email: string
  department: string
  userRole: 'admin' | 'superuser' | 'user'
  createUser: boolean
}

export default function CreateEmployee() {
  const navigate = useNavigate()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [createdUser, setCreatedUser] = useState<{password?: string}>({})
  const [creationDone, setCreationDone] = useState(false)

  const { register, handleSubmit, formState: { errors }, watch } = useForm<CreateEmployeeData>({
    defaultValues: {
      userRole: 'user',
      createUser: true
    }
  })

  const watchCreateUser = watch('createUser')

  const onSubmit = async (data: CreateEmployeeData) => {
    try {
      setLoading(true)
      setError('')
      setSuccess('')

      const payload = {
        firstName: data.firstName,
        lastName: data.lastName,
        email: data.email,
        department: data.department,
        userRole: data.createUser ? data.userRole : undefined,
        createUser: data.createUser
      }

      const response = await api.post('/employees', payload)

      if (response.data.data?.temporaryPassword) {
        setCreatedUser({ password: response.data.data.temporaryPassword })
        setSuccess(`Mitarbeiter und Benutzerkonto erfolgreich erstellt!`)
      } else {
        setSuccess('Mitarbeiter erfolgreich erstellt!')
      }
      // Manuelles Weiterklicken statt Auto-Navigation, damit Passwort kopiert werden kann
      setCreationDone(true)
    } catch (err: any) {
      console.error('Error:', err.response?.data)
      const errorMessage = err.response?.data?.error?.message || 'Speichern fehlgeschlagen'
      const errorDetails = err.response?.data?.error?.details
      
      if (errorDetails && Array.isArray(errorDetails)) {
        const detailMessages = errorDetails.map((d: any) => d.msg || d.message).join(', ')
        setError(`${errorMessage}: ${detailMessages}`)
      } else {
        setError(errorMessage)
      }
    } finally {
      setLoading(false)
    }
  }

  const getRoleDescription = (role: UserRole): string => {
    const descriptions = {
      admin: 'Vollzugriff auf alle Funktionen inklusive Admin Panel und Benutzerverwaltung',
      superuser: 'Kann Mitarbeiter anlegen und verwalten, aber kein Zugriff auf Admin Panel',
      user: 'Kann nur das eigene Profil bearbeiten und Mitarbeiter durchsuchen'
    }
    return descriptions[role]
  }

  return (
    <div>
      <div className="mb-8">
        <button
          onClick={() => navigate('/users')}
          className="text-primary-blue hover:text-primary-blue-hover mb-4"
        >
          ← Zurück zur Benutzerverwaltung
        </button>
        <h1 className="text-title-lg font-poppins font-bold text-primary">
          Neuen Mitarbeiter & Benutzer anlegen
        </h1>
        <p className="text-body text-secondary mt-2">
          Erstellen Sie einen neuen Mitarbeiter-Datensatz und optional ein Benutzerkonto
        </p>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="max-w-2xl">
        {error && (
          <div className="bg-error-bg text-error px-4 py-3 rounded-input text-sm mb-6">
            {error}
          </div>
        )}

        {success && (
          <div className="bg-green-50 text-green-800 px-4 py-3 rounded-input text-sm mb-6">
            {success}
            {createdUser.password && (
              <div className="mt-4 p-4 bg-white rounded border border-green-300">
                <h4 className="font-semibold mb-2">🔑 Temporäres Passwort:</h4>
                <code className="text-lg bg-gray-100 px-3 py-2 rounded block">
                  {createdUser.password}
                </code>
                <p className="text-sm mt-2 text-green-700">
                  ⚠️ Bitte notieren Sie dieses Passwort und geben Sie es sicher an den Mitarbeiter weiter.
                  Das Passwort muss beim ersten Login geändert werden.
                </p>
                <div className="mt-4 flex justify-end">
                  <button
                    type="button"
                    onClick={() => navigate('/users')}
                    className="btn-primary"
                  >
                    Weiter zur Benutzerverwaltung
                  </button>
                </div>
              </div>
            )}
          </div>
        )}

        <div className="card mb-6">
          <h2 className="text-title-card font-poppins font-semibold text-primary mb-6">
            Mitarbeiter-Grunddaten
          </h2>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-body font-medium text-secondary mb-2">
                Vorname *
              </label>
              <input
                {...register('firstName', { required: 'Vorname ist erforderlich' })}
                className="input-field w-full"
                placeholder="Max"
              />
              {errors.firstName && (
                <p className="text-error text-sm mt-1">{errors.firstName.message}</p>
              )}
            </div>

            <div>
              <label className="block text-body font-medium text-secondary mb-2">
                Nachname *
              </label>
              <input
                {...register('lastName', { required: 'Nachname ist erforderlich' })}
                className="input-field w-full"
                placeholder="Mustermann"
              />
              {errors.lastName && (
                <p className="text-error text-sm mt-1">{errors.lastName.message}</p>
              )}
            </div>

            <div className="col-span-2">
              <label className="block text-body font-medium text-secondary mb-2">
                E-Mail *
              </label>
              <input
                {...register('email', { 
                  required: 'E-Mail ist erforderlich',
                  pattern: {
                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                    message: 'Ungültige E-Mail-Adresse'
                  }
                })}
                type="email"
                className="input-field w-full"
                placeholder="max.mustermann@firma.de"
              />
              {errors.email && (
                <p className="text-error text-sm mt-1">{errors.email.message}</p>
              )}
            </div>

            <div className="col-span-2">
              <label className="block text-body font-medium text-secondary mb-2">
                Abteilung *
              </label>
              <input
                {...register('department', { required: 'Abteilung ist erforderlich' })}
                className="input-field w-full"
                placeholder="IT, Personal, Marketing, etc."
              />
              {errors.department && (
                <p className="text-error text-sm mt-1">{errors.department.message}</p>
              )}
            </div>
          </div>
        </div>

        <div className="card mb-6">
          <h2 className="text-title-card font-poppins font-semibold text-primary mb-6">
            Benutzerkonto
          </h2>

          <div className="space-y-4">
            <div>
              <label className="flex items-center space-x-2 cursor-pointer">
                <input
                  {...register('createUser')}
                  type="checkbox"
                  className="w-5 h-5 rounded border-border-input text-primary-blue focus:ring-primary-blue"
                />
                <span className="text-body font-medium text-secondary">
                  Benutzerkonto für System-Zugang erstellen
                </span>
              </label>
              <p className="text-sm text-secondary-light mt-2 ml-7">
                Erstellt ein Benutzerkonto, mit dem sich der Mitarbeiter im System anmelden kann.
                Ein sicheres temporäres Passwort wird automatisch generiert.
              </p>
            </div>

            {watchCreateUser && (
              <div>
                <label className="block text-body font-medium text-secondary mb-2">
                  Benutzerrolle *
                </label>
                <select
                  {...register('userRole')}
                  className="input-field w-full"
                >
                  <option value="user">Benutzer</option>
                  <option value="superuser">Poweruser</option>
                  <option value="admin">Administrator</option>
                </select>
                <p className="text-sm text-secondary-light mt-2">
                  {getRoleDescription(watch('userRole'))}
                </p>
              </div>
            )}
          </div>
        </div>

        <div className="card mb-6 bg-blue-50 border-blue-200">
          <h3 className="text-title-card font-poppins font-semibold text-primary mb-3">
            📋 Was passiert als Nächstes?
          </h3>
          <ul className="space-y-2 text-body text-secondary">
            <li>• Der Mitarbeiter wird mit Grunddaten angelegt (Position: "Mitarbeiter", Telefon: "Nicht angegeben")</li>
            <li>• {watchCreateUser ? 'Ein Benutzerkonto wird erstellt und ein temporäres Passwort generiert' : 'Kein Benutzerkonto wird erstellt'}</li>
            <li>• Der Mitarbeiter kann später im Frontend seine Profildaten vervollständigen</li>
            <li>• Alle Daten werden verschlüsselt in der Datenbank gespeichert</li>
          </ul>
        </div>

        <div className="flex justify-end space-x-4">
          <button
            type="button"
            onClick={() => navigate('/users')}
            className="btn-secondary"
            disabled={loading}
          >
            Abbrechen
          </button>
          <button
            type="submit"
            className="btn-primary"
            disabled={loading}
          >
            {loading ? 'Erstelle...' : 'Mitarbeiter erstellen'}
          </button>
        </div>
      </form>
    </div>
  )
}
