import { useState, useEffect } from 'react'
import { useAdminConfig } from '../hooks/useAdminConfig'
import { useAuth } from '../context/AuthContext'
import { useCustomers } from '../hooks/useCustomers'
import { useEmployees } from '../hooks/useEmployees'
import { FaPlus, FaTrash, FaFloppyDisk, FaSpinner } from 'react-icons/fa6'
import { FaEdit } from 'react-icons/fa'

export default function AdminPage() {
  const { user, isAdmin } = useAuth()
  const { config, loading, error, updateConfig } = useAdminConfig()
  const { customers, loading: customersLoading, createCustomer, updateCustomer, deleteCustomer, refresh: refreshCustomers } = useCustomers()
  const { employees, loading: employeesLoading, createEmployee, updateEmployee, deleteEmployee, refresh: refreshEmployees } = useEmployees()
  const [localConfig, setLocalConfig] = useState(() => {
    // Initialisiere mit Default-Werten falls config noch nicht geladen
    if (config && Object.keys(config).length > 0) {
      return config
    }
    return {
      ticketTypes: [],
      systems: [],
      responseLevels: [],
      serviceTypes: [],
      priorities: []
    }
  })
  const [saving, setSaving] = useState(false)
  const [saveMessage, setSaveMessage] = useState('')
  const [editingCustomer, setEditingCustomer] = useState(null)
  const [customerForm, setCustomerForm] = useState({ code: '', name: '', location: '', email: '', phone: '' })
  const [editingEmployee, setEditingEmployee] = useState(null)
  const [employeeForm, setEmployeeForm] = useState({ userId: '', displayName: '', email: '', shortcode: '' })
  const [adminSection, setAdminSection] = useState('config')

  // Update localConfig when config loads
  useEffect(() => {
    if (config && Object.keys(config).length > 0) {
      setLocalConfig(config)
    }
  }, [config])

  if (!isAdmin) {
    return (
      <div className="main-content">
        <div className="card">
          <div className="card-header">
            <h2>Zugriff verweigert</h2>
          </div>
          <div className="card-body">
            <p>Du hast keine Berechtigung, auf diese Seite zuzugreifen.</p>
          </div>
        </div>
      </div>
    )
  }

  const handleAddItem = (field) => {
    setLocalConfig(prev => ({
      ...prev,
      [field]: [...prev[field], field === 'priorities' ? { value: prev[field].length, label: 'New' } : 'New Item']
    }))
  }

  const handleRemoveItem = (field, index) => {
    setLocalConfig(prev => ({
      ...prev,
      [field]: prev[field].filter((_, i) => i !== index)
    }))
  }

  const handleUpdateItem = (field, index, value) => {
    setLocalConfig(prev => {
      const newArray = [...prev[field]]
      if (field === 'priorities') {
        newArray[index] = { ...newArray[index], ...value }
      } else {
        newArray[index] = value
      }
      return { ...prev, [field]: newArray }
    })
  }

  const handleSave = async () => {
    setSaving(true)
    setSaveMessage('')
    
    const result = await updateConfig(localConfig)
    
    if (result.success) {
      setSaveMessage('Konfiguration erfolgreich gespeichert!')
      setTimeout(() => setSaveMessage(''), 3000)
    } else {
      setSaveMessage('Fehler beim Speichern: ' + (result.error || 'Unbekannter Fehler'))
    }
    
    setSaving(false)
  }

  if (loading && !config) {
    return (
      <div className="main-content text-center p-4">
        <FaSpinner className="spinner" size={32} />
        <p>Lade Konfiguration...</p>
      </div>
    )
  }

  return (
    <div className="main-content">
      <header className="text-center mb-2">
        <h2>Admin Panel - Dropdown Konfiguration</h2>
      </header>

      {error && (
        <div className="bg-red text-white p-2 mb-2" style={{ borderRadius: '4px' }}>
          Fehler: {error}
        </div>
      )}

      {saveMessage && (
        <div className={`p-2 mb-2 ${saveMessage.includes('erfolgreich') ? 'bg-green text-white' : 'bg-red text-white'}`} style={{ borderRadius: '4px' }}>
          {saveMessage}
        </div>
      )}

      <div
        className="text-center mb-2"
        style={{
          display: 'flex',
          gap: '20px',
          justifyContent: 'center',
          flexWrap: 'wrap',
          padding: '12px',
          background: 'rgba(45, 55, 72, 0.4)',
          borderRadius: '8px',
        }}
      >
        {[
          { id: 'config', label: 'Konfiguration' },
          { id: 'customers', label: 'Kunden' },
          { id: 'employees', label: 'Mitarbeiter' },
        ].map((section) => (
          <label
            key={section.id}
            style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontWeight: adminSection === section.id ? 'bold' : 'normal' }}
          >
            <input
              type="radio"
              name="adminSection"
              checked={adminSection === section.id}
              onChange={() => setAdminSection(section.id)}
            />
            {section.label}
          </label>
        ))}
      </div>

      {adminSection === 'config' && (
      <>
      <div className="row">
        {/* Ticket Types */}
        <div className="col col-6">
          <div className="card mb-2">
            <div className="card-header">
              <h3>Work Order Types</h3>
            </div>
            <div className="card-body">
              {localConfig.ticketTypes?.map((type, index) => (
                <div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                  <input
                    type="text"
                    className="form-control"
                    value={type}
                    onChange={(e) => handleUpdateItem('ticketTypes', index, e.target.value)}
                    style={{ flex: 1 }}
                  />
                  <button
                    className="btn btn-red"
                    onClick={() => handleRemoveItem('ticketTypes', index)}
                  >
                    <FaTrash />
                  </button>
                </div>
              ))}
              <button
                className="btn btn-green"
                onClick={() => handleAddItem('ticketTypes')}
                style={{ width: '100%', marginTop: '8px' }}
              >
                <FaPlus /> Hinzufügen
              </button>
            </div>
          </div>
        </div>

        {/* Systems */}
        <div className="col col-6">
          <div className="card mb-2">
            <div className="card-header">
              <h3>Affected Systems</h3>
            </div>
            <div className="card-body">
              {localConfig.systems?.map((system, index) => (
                <div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                  <input
                    type="text"
                    className="form-control"
                    value={system}
                    onChange={(e) => handleUpdateItem('systems', index, e.target.value)}
                    style={{ flex: 1 }}
                  />
                  <button
                    className="btn btn-red"
                    onClick={() => handleRemoveItem('systems', index)}
                  >
                    <FaTrash />
                  </button>
                </div>
              ))}
              <button
                className="btn btn-green"
                onClick={() => handleAddItem('systems')}
                style={{ width: '100%', marginTop: '8px' }}
              >
                <FaPlus /> Hinzufügen
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="row">
        {/* Response Levels */}
        <div className="col col-6">
          <div className="card mb-2">
            <div className="card-header">
              <h3>Response Levels</h3>
            </div>
            <div className="card-body">
              {localConfig.responseLevels?.map((level, index) => (
                <div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                  <input
                    type="text"
                    className="form-control"
                    value={level}
                    onChange={(e) => handleUpdateItem('responseLevels', index, e.target.value)}
                    style={{ flex: 1 }}
                  />
                  <button
                    className="btn btn-red"
                    onClick={() => handleRemoveItem('responseLevels', index)}
                  >
                    <FaTrash />
                  </button>
                </div>
              ))}
              <button
                className="btn btn-green"
                onClick={() => handleAddItem('responseLevels')}
                style={{ width: '100%', marginTop: '8px' }}
              >
                <FaPlus /> Hinzufügen
              </button>
            </div>
          </div>
        </div>

        {/* Service Types */}
        <div className="col col-6">
          <div className="card mb-2">
            <div className="card-header">
              <h3>Service Types</h3>
            </div>
            <div className="card-body">
              {localConfig.serviceTypes?.map((type, index) => (
                <div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                  <input
                    type="text"
                    className="form-control"
                    value={type}
                    onChange={(e) => handleUpdateItem('serviceTypes', index, e.target.value)}
                    style={{ flex: 1 }}
                  />
                  <button
                    className="btn btn-red"
                    onClick={() => handleRemoveItem('serviceTypes', index)}
                  >
                    <FaTrash />
                  </button>
                </div>
              ))}
              <button
                className="btn btn-green"
                onClick={() => handleAddItem('serviceTypes')}
                style={{ width: '100%', marginTop: '8px' }}
              >
                <FaPlus /> Hinzufügen
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Priorities */}
      <div className="card mb-2">
        <div className="card-header">
          <h3>Priorities</h3>
        </div>
        <div className="card-body">
          {localConfig.priorities?.map((priority, index) => (
            <div key={index} className="form-group" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
              <input
                type="number"
                className="form-control"
                value={priority.value}
                onChange={(e) => handleUpdateItem('priorities', index, { ...priority, value: parseInt(e.target.value) })}
                style={{ width: '100px' }}
                placeholder="Value"
              />
              <input
                type="text"
                className="form-control"
                value={priority.label}
                onChange={(e) => handleUpdateItem('priorities', index, { ...priority, label: e.target.value })}
                style={{ flex: 1 }}
                placeholder="Label"
              />
              <button
                className="btn btn-red"
                onClick={() => handleRemoveItem('priorities', index)}
              >
                <FaTrash />
              </button>
            </div>
          ))}
          <button
            className="btn btn-green"
            onClick={() => handleAddItem('priorities')}
            style={{ width: '100%', marginTop: '8px' }}
          >
            <FaPlus /> Hinzufügen
          </button>
        </div>
      </div>

      <div className="text-center mt-2">
        <button
          className="btn btn-dark"
          onClick={handleSave}
          disabled={saving}
          style={{ minWidth: '200px' }}
        >
          {saving ? (
            <>
              <FaSpinner className="spinner" /> Speichere...
            </>
          ) : (
            <>
              <FaFloppyDisk /> Konfiguration speichern
            </>
          )}
        </button>
      </div>
      </>
      )}

      {adminSection === 'customers' && (
      <div className="card mb-2">
        <div className="card-header">
          <h3>Kunden</h3>
        </div>
        <div className="card-body">
          {customersLoading ? (
            <div className="text-center p-2">
              <FaSpinner className="spinner" /> Lade Kunden...
            </div>
          ) : (
            <>
              <table className="table" style={{ marginBottom: '16px' }}>
                <thead>
                  <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Aktionen</th>
                  </tr>
                </thead>
                <tbody>
                  {customers.map((customer) => (
                    <tr key={customer.$id}>
                      {editingCustomer === customer.$id ? (
                        <>
                          <td>
                            <input
                              type="text"
                              className="form-control"
                              value={customerForm.code}
                              onChange={(e) => setCustomerForm(prev => ({ ...prev, code: e.target.value }))}
                              style={{ width: '100px' }}
                            />
                          </td>
                          <td>
                            <input
                              type="text"
                              className="form-control"
                              value={customerForm.name}
                              onChange={(e) => setCustomerForm(prev => ({ ...prev, name: e.target.value }))}
                            />
                          </td>
                          <td>
                            <input
                              type="text"
                              className="form-control"
                              value={customerForm.location}
                              onChange={(e) => setCustomerForm(prev => ({ ...prev, location: e.target.value }))}
                            />
                          </td>
                          <td>
                            <input
                              type="email"
                              className="form-control"
                              value={customerForm.email}
                              onChange={(e) => setCustomerForm(prev => ({ ...prev, email: e.target.value }))}
                            />
                          </td>
                          <td>
                            <input
                              type="text"
                              className="form-control"
                              value={customerForm.phone}
                              onChange={(e) => setCustomerForm(prev => ({ ...prev, phone: e.target.value }))}
                            />
                          </td>
                          <td>
                            <button
                              className="btn btn-green"
                              onClick={async () => {
                                const result = await updateCustomer(customer.$id, customerForm)
                                if (result.success) {
                                  setEditingCustomer(null)
                                  setCustomerForm({ code: '', name: '', location: '', email: '', phone: '' })
                                }
                              }}
                            >
                              Speichern
                            </button>
                            <button
                              className="btn"
                              onClick={() => {
                                setEditingCustomer(null)
                                setCustomerForm({ code: '', name: '', location: '', email: '', phone: '' })
                              }}
                              style={{ marginLeft: '4px' }}
                            >
                              Abbrechen
                            </button>
                          </td>
                        </>
                      ) : (
                        <>
                          <td>{customer.code || '-'}</td>
                          <td>{customer.name || '-'}</td>
                          <td>{customer.location || '-'}</td>
                          <td>{customer.email || '-'}</td>
                          <td>{customer.phone || '-'}</td>
                          <td>
                            <button
                              className="btn"
                              onClick={() => {
                                setEditingCustomer(customer.$id)
                                setCustomerForm({
                                  code: customer.code || '',
                                  name: customer.name || '',
                                  location: customer.location || '',
                                  email: customer.email || '',
                                  phone: customer.phone || ''
                                })
                              }}
                            >
                              <FaEdit />
                            </button>
                            <button
                              className="btn btn-red"
                              onClick={async () => {
                                if (confirm(`Möchtest du ${customer.name || customer.code} wirklich löschen?`)) {
                                  await deleteCustomer(customer.$id)
                                }
                              }}
                              style={{ marginLeft: '4px' }}
                            >
                              <FaTrash />
                            </button>
                          </td>
                        </>
                      )}
                    </tr>
                  ))}
                </tbody>
              </table>

              <div className="card" style={{ background: '#f5f5f5', padding: '16px' }}>
                <h4 style={{ marginTop: 0 }}>Neuen Kunden hinzufügen</h4>
                <div className="row">
                  <div className="col col-3">
                    <div className="form-group">
                      <label className="form-label">Code</label>
                      <input
                        type="text"
                        className="form-control"
                        value={customerForm.code}
                        onChange={(e) => setCustomerForm(prev => ({ ...prev, code: e.target.value }))}
                        placeholder="C001"
                      />
                    </div>
                  </div>
                  <div className="col col-3">
                    <div className="form-group">
                      <label className="form-label">Name</label>
                      <input
                        type="text"
                        className="form-control"
                        value={customerForm.name}
                        onChange={(e) => setCustomerForm(prev => ({ ...prev, name: e.target.value }))}
                        placeholder="Kundenname"
                        required
                      />
                    </div>
                  </div>
                  <div className="col col-3">
                    <div className="form-group">
                      <label className="form-label">Location</label>
                      <input
                        type="text"
                        className="form-control"
                        value={customerForm.location}
                        onChange={(e) => setCustomerForm(prev => ({ ...prev, location: e.target.value }))}
                        placeholder="Stadt"
                      />
                    </div>
                  </div>
                  <div className="col col-3">
                    <div className="form-group">
                      <label className="form-label">Email</label>
                      <input
                        type="email"
                        className="form-control"
                        value={customerForm.email}
                        onChange={(e) => setCustomerForm(prev => ({ ...prev, email: e.target.value }))}
                        placeholder="email@example.com"
                      />
                    </div>
                  </div>
                </div>
                <div className="row">
                  <div className="col col-3">
                    <div className="form-group">
                      <label className="form-label">Phone</label>
                      <input
                        type="text"
                        className="form-control"
                        value={customerForm.phone}
                        onChange={(e) => setCustomerForm(prev => ({ ...prev, phone: e.target.value }))}
                        placeholder="030-123456"
                      />
                    </div>
                  </div>
                  <div className="col col-9">
                    <div className="form-group" style={{ marginTop: '24px' }}>
                      <button
                        className="btn btn-green"
                        onClick={async () => {
                          if (!customerForm.name) {
                            alert('Bitte gib mindestens einen Namen ein.')
                            return
                          }
                          const result = await createCustomer(customerForm)
                          if (result.success) {
                            setCustomerForm({ code: '', name: '', location: '', email: '', phone: '' })
                          } else {
                            alert('Fehler beim Erstellen: ' + (result.error || 'Unbekannter Fehler'))
                          }
                        }}
                      >
                        <FaPlus /> Kunden hinzufügen
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
      )}

      {adminSection === 'employees' && (
      <div className="card mb-2">
        <div className="card-header">
          <h3>Mitarbeiter & Kürzel</h3>
        </div>
        <div className="card-body">
          {employeesLoading ? (
            <div className="text-center p-2">
              <FaSpinner className="spinner" /> Lade Mitarbeiter...
            </div>
          ) : (
            <>
              {employees.length === 0 ? (
                <div style={{ padding: '20px', textAlign: 'center', background: '#f5f5f5', borderRadius: '4px' }}>
                  <p style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: 'bold' }}>
                    Noch keine Mitarbeiter in der Liste
                  </p>
                  <p style={{ margin: 0, fontSize: '14px', color: '#666' }}>
                    Sobald sich Benutzer einloggen, werden sie automatisch hier angezeigt.
                  </p>
                </div>
              ) : (
                <table className="table" style={{ marginBottom: '16px' }}>
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Kürzel</th>
                      <th>User ID</th>
                      <th>Aktionen</th>
                    </tr>
                  </thead>
                  <tbody>
                    {employees.map((employee) => (
                      <tr key={employee.$id}>
                        {editingEmployee === employee.$id ? (
                          <>
                            <td>{employee.displayName || '-'}</td>
                            <td>{employee.email || '-'}</td>
                            <td>
                              <input
                                type="text"
                                className="form-control"
                                value={employeeForm.shortcode}
                                onChange={(e) => setEmployeeForm(prev => ({ ...prev, shortcode: e.target.value.toUpperCase() }))}
                                placeholder="KNSO"
                                style={{ width: '100px' }}
                                maxLength={10}
                                autoFocus
                              />
                            </td>
                            <td>
                              <small style={{ color: '#666' }}>{employee.userId.substring(0, 12)}...</small>
                            </td>
                            <td>
                              <button
                                className="btn btn-green"
                                onClick={async () => {
                                  const result = await updateEmployee(employee.$id, {
                                    shortcode: employeeForm.shortcode
                                  })
                                  if (result.success) {
                                    setEditingEmployee(null)
                                    setEmployeeForm({ userId: '', displayName: '', email: '', shortcode: '' })
                                  } else {
                                    alert('Fehler: ' + (result.error || 'Unbekannter Fehler'))
                                  }
                                }}
                              >
                                Speichern
                              </button>
                              <button
                                className="btn"
                                onClick={() => {
                                  setEditingEmployee(null)
                                  setEmployeeForm({ userId: '', displayName: '', email: '', shortcode: '' })
                                }}
                                style={{ marginLeft: '4px' }}
                              >
                                Abbrechen
                              </button>
                            </td>
                          </>
                        ) : (
                          <>
                            <td>{employee.displayName || '-'}</td>
                            <td>{employee.email || '-'}</td>
                            <td>
                              <strong style={{ color: employee.shortcode ? '#007bff' : '#999' }}>
                                {employee.shortcode || '(kein Kürzel)'}
                              </strong>
                            </td>
                            <td>
                              <small style={{ color: '#666' }}>{employee.userId.substring(0, 12)}...</small>
                            </td>
                            <td>
                              <button
                                className="btn btn-blue"
                                onClick={() => {
                                  setEditingEmployee(employee.$id)
                                  setEmployeeForm({
                                    userId: employee.userId,
                                    displayName: employee.displayName || '',
                                    email: employee.email || '',
                                    shortcode: employee.shortcode || ''
                                  })
                                }}
                                title="Kürzel bearbeiten"
                              >
                                <FaEdit /> Kürzel
                              </button>
                              <button
                                className="btn btn-red"
                                onClick={async () => {
                                  if (confirm(`Möchtest du ${employee.displayName} wirklich aus der Mitarbeiter-Liste entfernen?`)) {
                                    await deleteEmployee(employee.$id)
                                  }
                                }}
                                style={{ marginLeft: '4px' }}
                                title="Aus Mitarbeiter-Liste entfernen"
                              >
                                <FaTrash />
                              </button>
                            </td>
                          </>
                        )}
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </>
          )}
        </div>
      </div>
      )}

    </div>
  )
}