'use client'

import { useState } from 'react'

export function ApiGdprProcessEditor({
  process,
  saving,
  onSave,
}: {
  process: { id: string; process_key: string; title: string; description: string; legal_basis: string; retention_days: number; is_active: boolean }
  saving: boolean
  onSave: (title: string, description: string) => void
}) {
  const [title, setTitle] = useState(process.title)
  const [description, setDescription] = useState(process.description || '')
  const [expanded, setExpanded] = useState(false)

  return (
    <div className="border border-slate-200 rounded-xl bg-white overflow-hidden">
      <div className="p-4 flex items-start justify-between">
        <div className="flex items-start gap-3">
          <div className="w-10 h-10 bg-purple-100 text-purple-700 rounded-lg flex items-center justify-center flex-shrink-0 font-mono text-xs font-bold">
            {process.legal_basis?.replace('Art. ', '').replace(' DSGVO', '') || '?'}
          </div>
          <div>
            <h4 className="font-semibold text-slate-900">{title}</h4>
            <p className="text-sm text-slate-500">{description || 'Keine Beschreibung'}</p>
            {process.retention_days && (
              <span className="text-xs text-slate-400">Aufbewahrung: {process.retention_days} Tage</span>
            )}
          </div>
        </div>
        <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 flex-shrink-0"
        >
          {expanded ? 'Schliessen' : 'Bearbeiten'}
        </button>
      </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">Titel</label>
            <input
              type="text"
              value={title}
              onChange={(e) => setTitle(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">Beschreibung</label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
            />
          </div>
          <div className="flex justify-end">
            <button
              onClick={() => onSave(title, description)}
              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>
  )
}