'use client'

import { useState } from 'react'

export function ApiTemplateEditor({
  template,
  saving,
  onSave,
  onPreview,
}: {
  template: { id: string; template_key: string; subject: string; body: string; language: string; is_active: boolean }
  saving: boolean
  onSave: (subject: string, body: string) => void
  onPreview: (subject: string, body: string) => void
}) {
  const [subject, setSubject] = useState(template.subject)
  const [body, setBody] = useState(template.body)
  const [expanded, setExpanded] = useState(false)

  return (
    <div className="border border-slate-200 rounded-lg bg-white overflow-hidden">
      <div className="p-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span className={`w-2.5 h-2.5 rounded-full ${template.is_active ? 'bg-green-400' : 'bg-slate-300'}`} />
          <div>
            <span className="font-medium text-slate-900 font-mono text-sm">{template.template_key}</span>
            <p className="text-sm text-slate-500 truncate max-w-xs">{subject}</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <span className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-xs uppercase">{template.language}</span>
          <button
            onClick={() => onPreview(subject, body)}
            className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:border-slate-400"
          >
            Vorschau
          </button>
          <button
            onClick={() => setExpanded(!expanded)}
            className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:border-slate-400"
          >
            {expanded ? 'Schliessen' : 'Bearbeiten'}
          </button>
        </div>
      </div>
      {expanded && (
        <div className="border-t border-slate-200 p-4 space-y-3 bg-slate-50">
          <div>
            <label className="block text-xs font-medium text-slate-700 mb-1">Betreff</label>
            <input
              type="text"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
            />
          </div>
          <div>
            <label className="block text-xs font-medium text-slate-700 mb-1">Inhalt</label>
            <textarea
              value={body}
              onChange={(e) => setBody(e.target.value)}
              rows={8}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm font-mono"
            />
          </div>
          <div className="bg-white rounded-lg p-3 border border-slate-200">
            <div className="text-xs font-medium text-slate-500 mb-1">Verfuegbare Platzhalter:</div>
            <div className="flex flex-wrap gap-2">
              {['{{name}}', '{{email}}', '{{date}}', '{{deadline}}', '{{company}}'].map(v => (
                <span key={v} className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs font-mono">{v}</span>
              ))}
            </div>
          </div>
          <div className="flex justify-end">
            <button
              onClick={() => onSave(subject, body)}
              disabled={saving}
              className="px-4 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg font-medium disabled:opacity-60"
            >
              {saving ? 'Speichern...' : 'Speichern'}
            </button>
          </div>
        </div>
      )}
    </div>
  )
}