import { useEffect, useState } from 'react'
import { useDiagramSnapshotStore } from '../../state/diagramSnapshotStore'
import { useDiagramStore } from '../../state/diagramStore'
import Modal from '../common/Modal'

function formatDateTime(iso: string): string {
  return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
}

export default function VersionHistoryModal({ onClose }: { onClose: () => void }) {
  const diagram = useDiagramStore((s) => s.diagram)
  const access = useDiagramStore((s) => s.access)
  const canRestore = access?.myPermission === 'owner' || access?.myPermission === 'edit'
  const diagramId = diagram.id

  const snapshots = useDiagramSnapshotStore((s) => s.snapshots)
  const isLoaded = useDiagramSnapshotStore((s) => s.isLoaded)
  const load = useDiagramSnapshotStore((s) => s.load)
  const restore = useDiagramSnapshotStore((s) => s.restore)
  const [restoringId, setRestoringId] = useState<string | null>(null)

  useEffect(() => {
    load(diagramId)
  }, [diagramId, load])

  const handleRestore = async (snapshotId: string, createdAt: string) => {
    const confirmed = window.confirm(
      `Restore the diagram to how it was on ${formatDateTime(createdAt)}? If you've made changes since your last restore, the current state is saved as a new checkpoint first, so this can be undone.`,
    )
    if (!confirmed) return
    setRestoringId(snapshotId)
    try {
      await restore(diagramId, snapshotId)
    } finally {
      setRestoringId(null)
    }
  }

  return (
    <Modal title={`Version History — "${diagram.name}"`} onClose={onClose} width="max-w-md">
      <div className="space-y-1.5">
        <p className="text-[11px] text-slate-500">
          Checkpoints saved periodically while editing (up to the 50 most recent).
        </p>
        {!isLoaded && <p className="py-2 text-center text-xs italic text-slate-400">Loading…</p>}
        {isLoaded && snapshots.length === 0 && (
          <p className="py-2 text-center text-xs italic text-slate-400">No checkpoints yet.</p>
        )}
        {snapshots.map((s) => (
          <div key={s.id} className="flex items-center justify-between gap-2 rounded border border-slate-200 bg-white px-2 py-1.5 text-xs">
            <div className="min-w-0">
              <div className="font-medium text-slate-700">{formatDateTime(s.createdAt)}</div>
              {s.savedByUsername && <div className="text-[10px] text-slate-400">by {s.savedByUsername}</div>}
            </div>
            {canRestore && (
              <button
                onClick={() => handleRestore(s.id, s.createdAt)}
                disabled={restoringId === s.id}
                className="shrink-0 rounded bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-600 hover:bg-indigo-100 hover:text-indigo-700 disabled:cursor-not-allowed disabled:opacity-40"
              >
                Restore
              </button>
            )}
          </div>
        ))}
      </div>
      <div className="mt-4 flex justify-end border-t border-slate-100 pt-3">
        <button onClick={onClose} className="rounded px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-100">
          Close
        </button>
      </div>
    </Modal>
  )
}