// DocumentPanel.jsx
import { useRef, forwardRef, useImperativeHandle } from 'react'

const DocumentPanel = forwardRef(function DocumentPanel({
  text,
  documentType,
  onDocumentChange,
  onDocumentTypeChange,
  onStartAnalysis,
  onDownload,
  onClear,
  loading,
  sessionId,
}, ref) {

  const textareaRef = useRef(null)

  useImperativeHandle(ref, () => ({
    focus() {
      textareaRef.current?.scrollIntoView({ behavior: 'smooth' })
      setTimeout(() => textareaRef.current?.focus(), 400)
    }
  }))

  function handleFileUpload(e) {
    const file = e.target.files[0]
    if (!file) return
    const reader = new FileReader()
    reader.onload = (ev) => onDocumentChange(ev.target.result)
    reader.readAsText(file)
    e.target.value = ''
  }

  return (
    <div style={s.panel}>
      <div style={s.header}>
        <span style={s.label}>Dokument</span>
      </div>

      <div style={s.body}>

        <div style={s.row}>
          <span style={s.rowLabel}>Dokumenttyp</span>
          <select
            style={s.select}
            value={documentType}
            onChange={e => onDocumentTypeChange(e.target.value)}
          >
            <option>Arztbrief</option>
            <option>Befund</option>
            <option>Entlassungsbrief</option>
            <option>Laborwerte</option>
          </select>
        </div>

        <textarea
          ref={textareaRef}
          style={s.textarea}
          placeholder="Klinischen Text hier einfügen…"
          value={text}
          onChange={e => onDocumentChange(e.target.value)}
        />

        <div style={s.hint}>
          Die KI-generierten Inhalte können Fehler enthalten und dienen der Unterstützung klinischer Entscheidungsfindung, nicht deren Ersatz. Ärztinnen und Ärzte sollten alle Informationen prüfen und bei der Entscheidungsfindung ihr eigenes klinisches Urteilsvermögen anwenden.
        </div>

        <input
          type="file"
          id="file-input"
          accept=".txt"
          style={{ display: 'none' }}
          onChange={handleFileUpload}
        />

        <div style={s.actions}>
          <button
            style={{ ...s.btnPrimary, opacity: loading || !text.trim() ? 0.6 : 1 }}
            disabled={!!loading || !text.trim()}
            onClick={onStartAnalysis}
          >
            {loading ? 'Läuft…' : 'Analyse starten'}
          </button>
          <button
            style={s.btnSecondary}
            onClick={() => document.getElementById('file-input').click()}
          >
            Dokument hochladen (.txt)
          </button>
          <button
            style={{ ...s.btnSecondary, opacity: !sessionId ? 0.5 : 1 }}
            disabled={!sessionId}
            onClick={onDownload}
          >
            Sitzung speichern
          </button>
          <button
            style={s.btnDanger}
            onClick={onClear}
          >
            Sitzung löschen
          </button>
        </div>

      </div>
    </div>
  )
})

export default DocumentPanel

const s = {
panel: { 
  width:'44%', 
  flexShrink:0, 
  background:'#fff', 
  borderRight:'0.5px solid #E2E0D8', 
  display:'flex', 
  flexDirection:'column', 
  overflow:'hidden',
  height: '100%', 
},
  header:      { padding:'12px 16px', borderBottom:'0.5px solid #E2E0D8', flexShrink:0 },
  label:       { fontSize:11, fontWeight:500, letterSpacing:'0.05em', textTransform:'uppercase', color:'#6B6960' },
  body:        { flex:1, overflowY:'auto', padding:16, display:'flex', flexDirection:'column', gap:12 },
  row:         { display:'flex', alignItems:'center', gap:8 },
  rowLabel:    { fontSize:12, color:'#6B6960', flexShrink:0 },
  select:      { flex:1, fontSize:12, padding:'5px 8px', borderRadius:6, border:'0.5px solid #C8C6BC', background:'#F7F6F3', color:'#1A1916' },
  textarea:    { width:'100%', minHeight:320, fontFamily:"'IBM Plex Sans', system-ui, sans-serif", fontSize:13, lineHeight:1.8, padding:12, borderRadius:8, border:'0.5px solid #C8C6BC', background:'#F7F6F3', color:'#1A1916', resize:'vertical' },
  hint:        { fontSize:11, color:'#A09D94', fontStyle:'italic', lineHeight:1.6 },
  actions:     { display:'flex', flexDirection:'column', gap:8 },
  btnPrimary:  { fontFamily:'inherit', fontSize:12, padding:'7px 14px', borderRadius:6, border:'0.5px solid #1A1916', background:'#1A1916', color:'#fff', cursor:'pointer', width:'100%' },
  btnSecondary:{ fontFamily:'inherit', fontSize:12, padding:'7px 14px', borderRadius:6, border:'0.5px solid #C8C6BC', background:'#F7F6F3', color:'#1A1916', cursor:'pointer', width:'100%' },
  btnDanger:   { fontFamily:'inherit', fontSize:12, padding:'7px 14px', borderRadius:6, border:'0.5px solid #FECACA', background:'transparent', color:'#B91C1C', cursor:'pointer', width:'100%' },
}