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

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 [selectedUnitId, setSelectedUnitId] = useState<string | null>(null)
  const [selectedUnitName, setSelectedUnitName] = useState('')
  const [selectedUnitRole, setSelectedUnitRole] = useState<EmployeeUnitRole>('mitarbeiter')

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

  const watchCreateUser = watch('createUser')

  useEffect(() => {
    if (selectedUnitName) {
      setValue('department', selectedUnitName)
    }
  }, [selectedUnitName, setValue])

  const getUnitRoleLabel = (role: EmployeeUnitRole): string => {
    switch (role) {
      case 'leiter':
        return 'Leitung'
      case 'stellvertreter':
        return 'Stellvertretung'
      case 'beauftragter':
        return 'Beauftragte Person'
      default:
        return 'Teammitglied'
    }
  }

  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,
        organizationUnitId: selectedUnitId || undefined,
        organizationRole: selectedUnitId ? selectedUnitRole : undefined
      }

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

      if (response.data.data?.temporaryPassword) {
        setCreatedUser({ password: response.data.data.temporaryPassword })
        setSuccess(`Profil und Benutzerkonto erfolgreich erstellt!`)
      } else {
        setSuccess('Profil erfolgreich erstellt!')
      }
    } 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 Mitarbeitende anlegen und verwalten, aber kein Zugriff auf Admin Panel',
      user: 'Kann nur das eigene Profil bearbeiten und Mitarbeitende 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">
          Neues Mitarbeitendenprofil & Benutzer anlegen
        </h1>
        <p className="text-body text-secondary mt-2">
          Erstellen Sie ein neues Profil 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}
            {selectedUnitName && (
              <div className="mt-2 text-green-700">
                Zugeordnete Einheit: <strong>{selectedUnitName}</strong> · {getUnitRoleLabel(selectedUnitRole)}
              </div>
            )}
            {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 die betreffende Person 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">
            Grunddaten des Profils
          </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 ${selectedUnitId ? 'bg-gray-100 cursor-not-allowed' : ''}`}
                placeholder="IT, Personal, Marketing, etc."
                readOnly={Boolean(selectedUnitId)}
              />
              {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">
            Organisation & Rolle
          </h2>

          <div className="space-y-5">
            <div>
              <label className="block text-body font-medium text-secondary mb-2">
                Organisationseinheit
              </label>
              <OrganizationSelector
                value={selectedUnitId}
                onChange={(unitId, unitPath) => {
                  setSelectedUnitId(unitId)
                  setSelectedUnitName(unitPath)
                  if (!unitId) {
                    setSelectedUnitRole('mitarbeiter')
                  }
                }}
              />
              <p className="text-sm text-secondary-light mt-2">
                Wählen Sie die primäre Organisationseinheit für die neue Person. Die Abteilung wird automatisch anhand der Auswahl gesetzt.
              </p>
            </div>

            {selectedUnitId && (
              <div>
                <label className="block text-body font-medium text-secondary mb-2">
                  Rolle innerhalb der Einheit
                </label>
                <select
                  value={selectedUnitRole}
                  onChange={event => setSelectedUnitRole(event.target.value as EmployeeUnitRole)}
                  className="input-field w-full"
                >
                  <option value="leiter">Leitung</option>
                  <option value="stellvertreter">Stellvertretung</option>
                  <option value="mitarbeiter">Teammitglied</option>
                  <option value="beauftragter">Beauftragte Person</option>
                </select>
                <p className="text-sm text-secondary-light mt-2">
                  Diese Rolle wird für Vertretungs- und Organigramm-Funktionen verwendet.
                </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 die angelegte Person 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>• Die Person wird mit Grunddaten angelegt (Position: "Teammitglied", Telefon: "Nicht angegeben")</li>
            <li>• {watchCreateUser ? 'Ein Benutzerkonto wird erstellt und ein temporäres Passwort generiert' : 'Kein Benutzerkonto wird erstellt'}</li>
            <li>• {selectedUnitId ? `Die Organisationseinheit ${selectedUnitName} (${getUnitRoleLabel(selectedUnitRole)}) wird als primäre Zuordnung hinterlegt` : 'Organisationseinheit kann später im Organigramm zugewiesen werden'}</li>
            <li>• Die Person kann später im Frontend das Profil 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...' : 'Profil erstellen'}
          </button>
        </div>
      </form>
    </div>
  )
}
