import { useEffect, useState } from 'react'
import api from '../api/client'
import { copyToClipboard } from '../utils/clipboard'
import { Plus, Trash2, Edit2, X, Check, ChevronDown, ChevronRight, Copy, Key } from 'lucide-react'

const PERM_LABELS = {
  agent: { label: 'Agent', color: 'text-blue-400 bg-blue-900/30 border-blue-700/50' },
  read:  { label: 'Read-only', color: 'text-green-400 bg-green-900/30 border-green-700/50' },
  write: { label: 'Write', color: 'text-yellow-400 bg-yellow-900/30 border-yellow-700/50' },
  admin: { label: 'Admin', color: 'text-orange-400 bg-orange-900/30 border-orange-700/50' },
}

export default function Customers() {
  const [customers, setCustomers] = useState([])
  const [loading, setLoading] = useState(true)
  const [showAdd, setShowAdd] = useState(false)
  const [editId, setEditId] = useState(null)
  const [form, setForm] = useState({ number: '', name: '' })
  const [expandedId, setExpandedId] = useState(null)

  const reload = () => {
    api.getCustomers().then((c) => setCustomers(c || [])).finally(() => setLoading(false))
  }

  useEffect(() => { reload() }, [])

  const handleAdd = async () => {
    if (!form.number || !form.name) return
    await api.createCustomer(form.number, form.name)
    setForm({ number: '', name: '' })
    setShowAdd(false)
    reload()
  }

  const handleUpdate = async (id) => {
    await api.updateCustomer(id, form.number, form.name)
    setEditId(null)
    reload()
  }

  const handleDelete = async (id) => {
    if (!confirm('Kunde wirklich loeschen?')) return
    await api.deleteCustomer(id)
    reload()
  }

  const toggleExpand = (id) => {
    setExpandedId(prev => prev === id ? null : id)
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold text-white">Kunden</h1>
        <button
          onClick={() => { setShowAdd(true); setForm({ number: '', name: '' }) }}
          className="flex items-center gap-1.5 px-3 py-1.5 bg-orange-600 hover:bg-orange-700 rounded text-sm text-white transition-colors"
        >
          <Plus className="w-4 h-4" />
          Neuer Kunde
        </button>
      </div>

      <div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-800 text-left text-gray-500">
              <th className="px-4 py-2 font-medium w-6"></th>
              <th className="px-4 py-2 font-medium">Nummer</th>
              <th className="px-4 py-2 font-medium">Name</th>
              <th className="px-4 py-2 font-medium hidden md:table-cell">Erstellt</th>
              <th className="px-4 py-2 font-medium w-24"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-800">
            {showAdd && (
              <tr>
                <td></td>
                <td className="px-4 py-2">
                  <input
                    type="text"
                    placeholder="K05116"
                    value={form.number}
                    onChange={(e) => setForm({ ...form, number: e.target.value })}
                    className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
                    autoFocus
                  />
                </td>
                <td className="px-4 py-2">
                  <input
                    type="text"
                    placeholder="Kundenname"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
                    onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
                  />
                </td>
                <td className="hidden md:table-cell"></td>
                <td className="px-4 py-2">
                  <div className="flex gap-1">
                    <button onClick={handleAdd} className="text-green-400 hover:text-green-300">
                      <Check className="w-4 h-4" />
                    </button>
                    <button onClick={() => setShowAdd(false)} className="text-gray-500 hover:text-gray-300">
                      <X className="w-4 h-4" />
                    </button>
                  </div>
                </td>
              </tr>
            )}
            {customers.map((c) => (
              <>
                {editId === c.id ? (
                  <tr key={`edit-${c.id}`} className="bg-gray-800/30">
                    <td></td>
                    <td className="px-4 py-2">
                      <input
                        type="text"
                        value={form.number}
                        onChange={(e) => setForm({ ...form, number: e.target.value })}
                        className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
                      />
                    </td>
                    <td className="px-4 py-2">
                      <input
                        type="text"
                        value={form.name}
                        onChange={(e) => setForm({ ...form, name: e.target.value })}
                        className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
                      />
                    </td>
                    <td className="hidden md:table-cell"></td>
                    <td className="px-4 py-2">
                      <div className="flex gap-1">
                        <button onClick={() => handleUpdate(c.id)} className="text-green-400 hover:text-green-300">
                          <Check className="w-4 h-4" />
                        </button>
                        <button onClick={() => setEditId(null)} className="text-gray-500 hover:text-gray-300">
                          <X className="w-4 h-4" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ) : (
                  <tr
                    key={`row-${c.id}`}
                    className={`hover:bg-gray-800/50 cursor-pointer transition-colors ${expandedId === c.id ? 'bg-gray-800/30' : ''}`}
                    onClick={() => toggleExpand(c.id)}
                  >
                    <td className="px-3 py-2.5 text-gray-600">
                      {expandedId === c.id
                        ? <ChevronDown className="w-3.5 h-3.5" />
                        : <ChevronRight className="w-3.5 h-3.5" />
                      }
                    </td>
                    <td className="px-4 py-2.5 text-orange-400 font-mono">{c.number}</td>
                    <td className="px-4 py-2.5 text-white">{c.name}</td>
                    <td className="px-4 py-2.5 text-gray-500 text-xs hidden md:table-cell">
                      {new Date(c.created_at).toLocaleDateString('de-DE')}
                    </td>
                    <td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
                      <div className="flex gap-1">
                        <button
                          onClick={() => { setEditId(c.id); setForm({ number: c.number, name: c.name }) }}
                          className="text-gray-500 hover:text-gray-300 p-1 rounded hover:bg-gray-700"
                        >
                          <Edit2 className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => handleDelete(c.id)}
                          className="text-gray-500 hover:text-red-400 p-1 rounded hover:bg-gray-700"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </td>
                  </tr>
                )}
                {expandedId === c.id && (
                  <tr key={`expand-${c.id}`}>
                    <td colSpan={5} className="px-0 py-0">
                      <CustomerKeyPanel customerId={c.id} />
                    </td>
                  </tr>
                )}
              </>
            ))}
          </tbody>
        </table>
        {!loading && customers.length === 0 && !showAdd && (
          <div className="text-center py-8 text-gray-500">Keine Kunden angelegt</div>
        )}
      </div>
    </div>
  )
}

function CustomerKeyPanel({ customerId }) {
  const [keys, setKeys] = useState(null)
  const [copied, setCopied] = useState(null)

  useEffect(() => {
    api.getCustomerAPIKeys(customerId).then(setKeys)
  }, [customerId])

  const copyKey = (key, id) => {
    copyToClipboard(key)
    setCopied(id)
    setTimeout(() => setCopied(null), 2000)
  }

  if (keys === null) {
    return <div className="px-8 py-3 text-gray-500 text-xs bg-gray-800/20 border-t border-gray-800">Laden...</div>
  }

  if (keys.length === 0) {
    return (
      <div className="px-8 py-3 text-gray-500 text-xs bg-gray-800/20 border-t border-gray-800 flex items-center gap-2">
        <Key className="w-3.5 h-3.5" />
        Keine API-Keys fuer diesen Kunden
      </div>
    )
  }

  return (
    <div className="bg-gray-800/20 border-t border-gray-800 px-8 py-3 space-y-1.5">
      <div className="flex items-center gap-2 mb-2">
        <Key className="w-3.5 h-3.5 text-gray-500" />
        <span className="text-xs text-gray-500 font-medium">API-Keys</span>
      </div>
      {keys.map((k) => {
        const perm = PERM_LABELS[k.permissions] || PERM_LABELS.read
        return (
          <div key={k.id} className="flex items-center gap-3">
            <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border leading-none w-16 text-center flex-shrink-0 ${perm.color}`}>
              {perm.label}
            </span>
            <span className="text-xs text-gray-400 flex-1 min-w-0 truncate">{k.name}</span>
            <code className="text-xs text-gray-500 font-mono flex-shrink-0">
              {k.key.substring(0, 8)}...{k.key.substring(k.key.length - 4)}
            </code>
            <button
              onClick={(e) => { e.stopPropagation(); copyKey(k.key, k.id) }}
              className="text-gray-600 hover:text-orange-400 transition-colors flex-shrink-0"
              title="Key kopieren"
            >
              {copied === k.id
                ? <Check className="w-3.5 h-3.5 text-green-400" />
                : <Copy className="w-3.5 h-3.5" />
              }
            </button>
          </div>
        )
      })}
    </div>
  )
}