'use client'

import { useState } from 'react'
import { SnapshotMeta } from '../_hooks/useCRA'

export function SnapshotPanel({ snapshots, onSave, onView }: {
  snapshots: SnapshotMeta[]
  onSave: () => Promise<void>
  onView: (id: string) => Promise<any>
}) {
  const [saving, setSaving] = useState(false)
  const [detail, setDetail] = useState<{ version: number; content_md: string } | null>(null)

  const save = async () => {
    setSaving(true)
    try { await onSave() } finally { setSaving(false) }
  }
  const view = async (id: string) => {
    const d = await onView(id)
    if (d) setDetail({ version: d.version, content_md: d.content_md })
  }

  return (
    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Verlauf / Snapshots</h2>
          <p className="text-[11px] text-gray-400">
            Versionierte CRA-Risikobeurteilung über die Zeit — die fortlaufende Dokumentation (CRA Art. 13).
          </p>
        </div>
        <button
          onClick={save}
          disabled={saving}
          className="shrink-0 rounded bg-purple-600 hover:bg-purple-700 disabled:opacity-50 text-white text-xs px-3 py-1.5"
        >
          {saving ? 'Speichert …' : 'Snapshot speichern'}
        </button>
      </div>

      {snapshots.length === 0 ? (
        <p className="text-xs text-gray-500 mt-3">Noch kein Snapshot gespeichert.</p>
      ) : (
        <ul className="mt-3 space-y-1">
          {snapshots.map((s) => (
            <li key={s.id} className="flex items-center justify-between text-xs border-b border-gray-100 dark:border-gray-700/50 py-1">
              <span className="text-gray-600 dark:text-gray-300">
                <span className="font-medium">v{s.version}</span>
                <span className={`ml-2 rounded px-1.5 py-0.5 text-[10px] ${
                  s.status === 'draft'
                    ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
                    : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}`}>{s.status}</span>
                <span className="ml-2 text-gray-400">{new Date(s.generated_at).toLocaleString('de-DE')}</span>
                <span className="ml-2 text-gray-400">· {s.coverage?.covered?.length ?? 0}/{s.coverage?.total ?? 40} Anforderungen</span>
              </span>
              <button onClick={() => view(s.id)} className="text-purple-600 hover:underline">ansehen</button>
            </li>
          ))}
        </ul>
      )}

      {detail && (
        <div className="mt-3 rounded-lg border border-gray-200 dark:border-gray-700 p-3 bg-gray-50/60 dark:bg-gray-900/30">
          <div className="flex items-center justify-between mb-1">
            <span className="text-xs font-medium text-gray-700 dark:text-gray-200">Snapshot v{detail.version}</span>
            <button onClick={() => setDetail(null)} className="text-[11px] text-gray-400 hover:underline">schließen</button>
          </div>
          <pre className="text-[11px] text-gray-600 dark:text-gray-300 whitespace-pre-wrap font-mono">{detail.content_md}</pre>
        </div>
      )}
    </div>
  )
}
