import { FileText, Clock, RotateCcw, Save, Edit3, AlertTriangle } from 'lucide-react'
import type { AgentDetail } from './types'

interface SoulTabContentProps {
  agent: AgentDetail
  editedContent: string
  isEditing: boolean
  hasChanges: boolean
  saving: boolean
  onContentChange: (content: string) => void
  onSave: () => void
  onReset: () => void
  onStartEditing: () => void
}

export function SoulTabContent({
  agent,
  editedContent,
  isEditing,
  hasChanges,
  saving,
  onContentChange,
  onSave,
  onReset,
  onStartEditing,
}: SoulTabContentProps) {
  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2 text-sm text-gray-500">
          <FileText className="w-4 h-4" />
          {agent.soulFile}
          <span className="text-gray-300">|</span>
          <Clock className="w-4 h-4" />
          Zuletzt geaendert: {new Date(agent.updatedAt).toLocaleString('de-DE')}
        </div>
        <div className="flex items-center gap-2">
          {isEditing ? (
            <>
              <button
                onClick={onReset}
                disabled={!hasChanges}
                className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
              >
                <RotateCcw className="w-4 h-4" />
                Zuruecksetzen
              </button>
              <button
                onClick={onSave}
                disabled={!hasChanges || saving}
                className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors disabled:opacity-50"
              >
                <Save className="w-4 h-4" />
                {saving ? 'Speichert...' : 'Speichern'}
              </button>
            </>
          ) : (
            <button
              onClick={onStartEditing}
              className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
            >
              <Edit3 className="w-4 h-4" />
              Bearbeiten
            </button>
          )}
        </div>
      </div>

      {hasChanges && (
        <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-center gap-2 text-amber-700">
          <AlertTriangle className="w-4 h-4" />
          <span className="text-sm">Ungespeicherte Aenderungen vorhanden</span>
        </div>
      )}

      <div className="relative">
        {isEditing ? (
          <textarea
            value={editedContent}
            onChange={(e) => onContentChange(e.target.value)}
            className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-none"
            spellCheck={false}
          />
        ) : (
          <div className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg overflow-auto whitespace-pre-wrap">
            {agent.soulContent}
          </div>
        )}
      </div>

      <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <h4 className="font-medium text-blue-900 mb-2">Hinweise zur SOUL-Datei</h4>
        <ul className="text-sm text-blue-700 space-y-1">
          <li>Die SOUL-Datei definiert die Persoenlichkeit und das Verhalten des Agents</li>
          <li>Aenderungen werden nach dem Speichern sofort wirksam</li>
          <li>Testen Sie Aenderungen zuerst im Staging-Modus</li>
          <li>Alle Aenderungen werden in der Historie protokolliert</li>
        </ul>
      </div>
    </div>
  )
}
