import type { ObjectMeta, Sentence } from '../types'

interface Props {
  obj: ObjectMeta | null
  objects: ObjectMeta[]
  sentences: Sentence[]
}

function DetailRow({ label, value }: { label: string; value?: string }) {
  return (
    <div className="sidebar-row">
      <label>{label}</label>
      <div className="detail-value">{value || ''}</div>
    </div>
  )
}

export default function DetailsPanel({ obj, objects, sentences }: Props) {
  const latestSentence = sentences.length > 0 ? sentences[sentences.length - 1] : null

  const parentDisplay = obj?.parent_id
    ? (() => {
        const parent = objects.find(o => o.id === obj.parent_id)
        return parent ? `${parent.index} - ${parent.title_de || 'ohne Titel'}` : ''
      })()
    : ''

  return (
    <>
      <div className="sidebar-section">
        <h2>Details</h2>
        <DetailRow label="Titel" value={obj?.title_de} />
        <DetailRow label="Position" value={obj?.position_de} />
        <DetailRow label="Status (sitzt/schwimmt/segelt)" value={obj?.action_de} />
        <DetailRow label="Zustand (alt/jung/rostig)" value={obj?.condition_de} />
        <DetailRow label="Hierarchie" value={obj?.hierarchy != null ? String(obj.hierarchy) : ''} />
        <div className="sidebar-row">
          <label>Gehört zu (Parent-Index)</label>
          <div className="detail-value">{parentDisplay}</div>
        </div>
      </div>

      <div className="sidebar-section">
        <h2>KI-Details</h2>
        <DetailRow label="Label (EN)" value={obj?.label_en} />
        <DetailRow label="Label (DE)" value={obj?.label_de} />
        <DetailRow label="Label (SE)" value={obj?.label_se} />
        <DetailRow label="Farbe (EN)" value={obj?.color_en} />
        <DetailRow label="Adjektiv (EN)" value={obj?.adjective_en} />
        <DetailRow label="Action Verb (EN)" value={obj?.action_verb_en} />
        <DetailRow label="Präposition (EN)" value={obj?.preposition_en} />
        <DetailRow label="Relative Position (EN)" value={obj?.relative_position_en} />
        <DetailRow label="Season (EN)" value={obj?.season_en} />
      </div>

      <div className="sidebar-section">
        <h2>KI-Sentence</h2>
        <h3 style={{ fontSize: '0.9rem', marginTop: 0, marginBottom: 8, color: '#475569' }}>
          Einfach (für Kinder)
        </h3>
        <DetailRow label="Question (EN)" value={latestSentence?.question_simple_en} />
        <DetailRow label="Answer (EN)" value={latestSentence?.answer_simple_en} />
        <h3 style={{ fontSize: '0.9rem', marginTop: 12, marginBottom: 8, color: '#475569' }}>
          Fortgeschritten
        </h3>
        <DetailRow label="Question (EN)" value={latestSentence?.question_advanced_en} />
        <DetailRow label="Answer (EN)" value={latestSentence?.answer_advanced_en} />
      </div>
    </>
  )
}