'use client'

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

interface SplitViewEditorProps {
  leftPanelRef: RefObject<HTMLDivElement | null>
  rightPanelRef: RefObject<HTMLDivElement | null>
  editorRef: RefObject<HTMLDivElement | null>
  currentVersion: Version | null
  draftVersion: Version | null
  isEditable: boolean
  editedTitle: string
  editedContent: string
  onTitleChange: (title: string) => void
  onUpdateEditorContent: () => void
  onPaste: (e: React.ClipboardEvent) => void
}

export default function SplitViewEditor({
  leftPanelRef,
  rightPanelRef,
  editorRef,
  currentVersion,
  draftVersion,
  isEditable,
  editedTitle,
  editedContent,
  onTitleChange,
  onUpdateEditorContent,
  onPaste,
}: SplitViewEditorProps) {
  return (
    <div className="grid grid-cols-2 gap-4">
      {/* Left: Current Published Version */}
      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div className="bg-emerald-50 border-b border-emerald-200 px-4 py-3 flex items-center justify-between">
          <div>
            <h3 className="font-semibold text-emerald-900">Veroeffentlichte Version</h3>
            {currentVersion && (
              <p className="text-sm text-emerald-700">v{currentVersion.version}</p>
            )}
          </div>
          <span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">
            Nur Lesen
          </span>
        </div>
        <div className="p-4">
          {currentVersion ? (
            <>
              <input
                type="text"
                value={currentVersion.title}
                disabled
                className="w-full px-3 py-2 mb-4 bg-slate-50 border border-slate-200 rounded-lg text-slate-700"
              />
              <div
                ref={leftPanelRef as RefObject<HTMLDivElement>}
                className="prose prose-sm max-w-none p-4 bg-slate-50 border border-slate-200 rounded-lg min-h-[500px] max-h-[500px] overflow-y-auto"
                dangerouslySetInnerHTML={{ __html: currentVersion.content }}
              />
            </>
          ) : (
            <div className="text-center py-12 text-slate-500">
              Keine veroeffentlichte Version vorhanden
            </div>
          )}
        </div>
      </div>

      {/* Right: Draft/Edit Version */}
      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div
          className={`border-b px-4 py-3 flex items-center justify-between ${
            draftVersion?.status === 'draft'
              ? 'bg-yellow-50 border-yellow-200'
              : draftVersion?.status === 'review' || draftVersion?.status === 'review_internal'
                ? 'bg-blue-50 border-blue-200'
                : draftVersion?.status === 'review_client'
                  ? 'bg-indigo-50 border-indigo-200'
                  : draftVersion?.status === 'approved'
                    ? 'bg-green-50 border-green-200'
                    : 'bg-slate-50 border-slate-200'
          }`}
        >
          <div>
            <h3 className="font-semibold text-slate-900">
              {draftVersion ? 'Aenderungsversion' : 'Neue Version'}
            </h3>
            {draftVersion && (
              <p className="text-sm text-slate-700">
                v{draftVersion.version} -{' '}
                {STATUS_LABELS[draftVersion.status]?.label ?? draftVersion.status}
              </p>
            )}
          </div>
          {isEditable && (
            <span className="px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs font-medium">
              Bearbeitbar
            </span>
          )}
        </div>
        <div className="p-4">
          <input
            type="text"
            value={editedTitle}
            onChange={(e) => onTitleChange(e.target.value)}
            disabled={!isEditable}
            placeholder="Titel der Version..."
            className={`w-full px-3 py-2 mb-4 border rounded-lg ${
              isEditable ? 'border-slate-300 bg-white' : 'border-slate-200 bg-slate-50 text-slate-700'
            }`}
          />

          {isEditable ? (
            <div
              ref={rightPanelRef as RefObject<HTMLDivElement>}
              className="min-h-[500px] max-h-[500px] overflow-y-auto"
            >
              <div
                ref={editorRef as RefObject<HTMLDivElement>}
                contentEditable
                onInput={onUpdateEditorContent}
                onPaste={onPaste}
                className="prose prose-sm max-w-none p-4 bg-white border border-slate-300 rounded-lg min-h-[500px] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                dangerouslySetInnerHTML={{ __html: editedContent }}
                suppressContentEditableWarning
              />
            </div>
          ) : (
            <div
              ref={rightPanelRef as RefObject<HTMLDivElement>}
              className="prose prose-sm max-w-none p-4 bg-slate-50 border border-slate-200 rounded-lg min-h-[500px] max-h-[500px] overflow-y-auto"
              dangerouslySetInnerHTML={{ __html: editedContent || draftVersion?.content || '' }}
            />
          )}

          {/* Character count */}
          <div className="mt-2 text-right text-sm text-slate-500">
            {(editorRef.current?.textContent || editedContent.replace(/<[^>]*>/g, '')).length} Zeichen
          </div>
        </div>
      </div>
    </div>
  )
}
