'use client'

import { Version, STATUS_LABELS } from '../_types'

interface CompareViewProps {
  currentVersion: Version | null
  draftVersion: Version | null
  editedContent: string
  onClose: () => void
  onSaveDraft: () => void
  onSubmitForReview: () => void
  onShowApprovalModal: (mode: 'approve' | 'reject') => void
  onPublishVersion: () => void
}

export default function CompareView({
  currentVersion,
  draftVersion,
  editedContent,
  onClose,
  onSaveDraft,
  onSubmitForReview,
  onShowApprovalModal,
  onPublishVersion,
}: CompareViewProps) {
  return (
    <div className="fixed inset-0 bg-slate-900 z-50 flex flex-col">
      {/* Header */}
      <div className="bg-slate-800 border-b border-slate-700 px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <h2 className="text-xl font-semibold text-white">Versionsvergleich</h2>
          <span className="text-slate-400">
            {currentVersion ? `v${currentVersion.version}` : 'Keine Version'}
            <span className="mx-2 text-slate-600">vs</span>
            {draftVersion ? `v${draftVersion.version}` : 'Neue Version'}
          </span>
        </div>
        <button
          onClick={onClose}
          className="px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600"
        >
          Schliessen
        </button>
      </div>

      {/* Compare Panels */}
      <div className="flex-1 grid grid-cols-2 gap-1 bg-slate-700">
        {/* Left: Published */}
        <div className="bg-white flex flex-col">
          <div className="bg-emerald-100 border-b border-emerald-200 px-4 py-2">
            <span className="font-medium text-emerald-800">Veroeffentlichte Version</span>
            {currentVersion && (
              <span className="ml-2 text-emerald-600">v{currentVersion.version}</span>
            )}
          </div>
          <div className="flex-1 overflow-y-auto p-6 prose prose-sm max-w-none">
            {currentVersion ? (
              <div dangerouslySetInnerHTML={{ __html: currentVersion.content }} />
            ) : (
              <p className="text-slate-500 text-center py-12">Keine veroeffentlichte Version</p>
            )}
          </div>
        </div>

        {/* Right: Draft */}
        <div className="bg-white flex flex-col">
          <div className={`border-b px-4 py-2 ${
            draftVersion?.status === 'draft' ? 'bg-yellow-100 border-yellow-200' :
            draftVersion?.status === 'review' ? 'bg-blue-100 border-blue-200' :
            draftVersion?.status === 'approved' ? 'bg-green-100 border-green-200' :
            'bg-slate-100 border-slate-200'
          }`}>
            <span className={`font-medium ${
              draftVersion?.status === 'draft' ? 'text-yellow-800' :
              draftVersion?.status === 'review' ? 'text-blue-800' :
              draftVersion?.status === 'approved' ? 'text-green-800' :
              'text-slate-800'
            }`}>
              {draftVersion ? 'Aenderungsversion' : 'Neue Version'}
            </span>
            {draftVersion && (
              <span className={`ml-2 ${
                draftVersion.status === 'draft' ? 'text-yellow-600' :
                draftVersion.status === 'review' ? 'text-blue-600' :
                draftVersion.status === 'approved' ? 'text-green-600' :
                'text-slate-600'
              }`}>
                v{draftVersion.version} - {STATUS_LABELS[draftVersion.status].label}
              </span>
            )}
          </div>
          <div className="flex-1 overflow-y-auto p-6 prose prose-sm max-w-none">
            <div dangerouslySetInnerHTML={{ __html: editedContent || draftVersion?.content || '' }} />
          </div>
        </div>
      </div>

      {/* Footer with Actions */}
      <div className="bg-slate-800 border-t border-slate-700 px-6 py-4 flex items-center justify-end gap-3">
        {draftVersion?.status === 'draft' && (
          <>
            <button
              onClick={() => { onClose(); onSaveDraft() }}
              className="px-4 py-2 bg-slate-600 text-white rounded-lg hover:bg-slate-500"
            >
              Speichern
            </button>
            <button
              onClick={() => { onClose(); onSubmitForReview() }}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500"
            >
              Zur Pruefung einreichen
            </button>
          </>
        )}
        {draftVersion?.status === 'review' && (
          <>
            <button
              onClick={() => { onClose(); onShowApprovalModal('reject') }}
              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-500"
            >
              Ablehnen
            </button>
            <button
              onClick={() => { onClose(); onShowApprovalModal('approve') }}
              className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-500"
            >
              Freigeben
            </button>
          </>
        )}
        {draftVersion?.status === 'approved' && (
          <button
            onClick={() => { onClose(); onPublishVersion() }}
            className="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-500"
          >
            Veroeffentlichen
          </button>
        )}
      </div>
    </div>
  )
}