import React from 'react'
import { calculateTotal, getAchievement, getPatTypeColor } from '../utils/patCalculations'
import { useTranslation } from '../i18n/LanguageContext'

const formatDate = (value) => {
  if (!value) return '—'
  const parsed = new Date(value)
  if (Number.isNaN(parsed.getTime())) return value
  return new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(parsed)
}

const formatValue = (value) => {
  if (value === '' || value === null || typeof value === 'undefined') return '—'
  return value
}

const ValueRow = ({ label, values = [] }) => (
  <div className="flex flex-wrap items-center gap-2">
    <span className="min-w-10 text-sm font-semibold text-gray-600 dark:text-gray-300">{label}</span>
    {values.map((value, index) => (
      <span
        key={`${label}-${index}`}
        className="min-w-12 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2 text-center text-sm font-medium text-gray-800 dark:text-gray-100"
      >
        {formatValue(value)}
      </span>
    ))}
  </div>
)

export default function SharedAssessmentView({ assessment }) {
  const t = useTranslation()

  if (!assessment) return null

  const totalPoints = calculateTotal(assessment.exercises || [])
  const achievement = getAchievement(assessment.patType, totalPoints)

  return (
    <div className="min-h-screen bg-gray-100 dark:bg-gray-950 p-6 text-gray-900 dark:text-gray-100">
      <div className="max-w-5xl mx-auto">
        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-800">
          <div className="flex justify-between items-start gap-4 mb-6 flex-wrap">
            <div>
              <p className="text-xs uppercase tracking-[0.2em] text-sky-700 dark:text-sky-300">{t('shared.title')}</p>
              <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100 mt-2">
                {assessment.name || t('shared.default_name')}
              </h1>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t('shared.hint')}
              </p>
            </div>

            <span
              className={`px-4 py-2 rounded-full text-sm font-semibold ${getPatTypeColor(assessment.patType)}`}
            >
              {assessment.patType}
            </span>
          </div>

          <div className="grid md:grid-cols-3 gap-3 mb-6 bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
            <div>
              <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">{t('shared.date')}</p>
              <p className="mt-1 text-lg font-semibold">{formatDate(assessment.datum)}</p>
            </div>
            <div>
              <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">{t('shared.total_points')}</p>
              <p className="mt-1 text-lg font-semibold text-green-600 dark:text-green-300">
                {totalPoints.toFixed(0)}
              </p>
            </div>
            <div>
              <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">{t('shared.rating')}</p>
              <p className="mt-1 text-lg font-semibold">{achievement.name}</p>
            </div>
          </div>

          {(assessment.exercises || []).map((exercise, index) => (
            <div key={`${exercise.name}-${index}`} className="mb-6 border-b pb-4 border-gray-200 dark:border-gray-800">
              <div className="flex items-start justify-between gap-3 mb-3 flex-wrap">
                <div>
                  <h2 className="font-bold text-lg text-gray-700 dark:text-gray-200">{exercise.name}</h2>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    {t('shared.target_factor', { soll: exercise.soll, faktor: exercise.faktor })}
                  </p>
                </div>
                <div className="rounded-lg bg-green-50 dark:bg-green-900/30 px-4 py-2">
                  <p className="text-xs uppercase tracking-wide text-green-700 dark:text-green-300">{t('shared.col_points')}</p>
                  <p className="text-xl font-bold text-green-700 dark:text-green-200">
                    {(exercise.points || 0).toFixed(0)}
                  </p>
                </div>
              </div>

              <div className="space-y-3">
                {exercise.subA && exercise.subB ? (
                  <>
                    <ValueRow label={exercise.subLabels?.[0] || 'a)'} values={exercise.subA} />
                    <ValueRow label={exercise.subLabels?.[1] || 'b)'} values={exercise.subB} />
                  </>
                ) : (
                  <ValueRow label={t('shared.col_values')} values={exercise.values || []} />
                )}
              </div>

              <div className="grid md:grid-cols-3 gap-3 mt-4">
                <div className="rounded-lg bg-blue-50 dark:bg-blue-900/30 px-4 py-3">
                  <p className="text-xs uppercase tracking-wide text-blue-700 dark:text-blue-300">{t('shared.col_avg')}</p>
                  <p className="text-lg font-semibold text-blue-700 dark:text-blue-200">
                    {(exercise.durchschnitt || 0).toFixed(2)}
                  </p>
                </div>
                <div className="rounded-lg bg-gray-50 dark:bg-gray-800 px-4 py-3">
                  <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">{t('shared.col_target')}</p>
                  <p className="text-lg font-semibold">{exercise.soll}</p>
                </div>
                <div className="rounded-lg bg-gray-50 dark:bg-gray-800 px-4 py-3">
                  <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">{t('shared.col_factor')}</p>
                  <p className="text-lg font-semibold">{exercise.faktor}</p>
                </div>
              </div>
            </div>
          ))}

          <div className="mt-6 bg-gradient-to-r from-green-100 to-blue-100 dark:from-gray-800 dark:to-gray-700 p-6 rounded-lg">
            <div className="flex justify-between items-center gap-4 flex-wrap mb-4">
              <span className="text-2xl font-bold text-gray-800 dark:text-gray-100">{t('shared.col_result')}</span>
              <span className="text-4xl font-bold text-green-600 dark:text-green-300">{totalPoints.toFixed(0)}</span>
            </div>

            <div className={`mt-4 px-6 py-4 rounded-lg ${achievement.color} ${achievement.text} text-center`}>
              <p className="text-2xl font-bold">{achievement.name}</p>
              {achievement.subtitle && <p className="text-lg mt-2">{achievement.subtitle}</p>}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}