breakpilot-lehrer/website/app/mail/_components/EmailDetail.tsx

'use client'

import { useState } from 'react'
import type { Email } from './types'
import { SENDER_TYPE_LABELS, CATEGORY_LABELS } from './types'

interface EmailDetailProps {
  email: Email
  onAnalyze: () => void
}

export default function EmailDetail({ email, onAnalyze }: EmailDetailProps) {
  const [showAIPanel, setShowAIPanel] = useState(true)

  return (
    <div className="flex h-full">
      {/* Email Content */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <div className="p-6 border-b border-slate-200">
          <h1 className="text-xl font-semibold text-slate-900 mb-4">
            {email.subject || '(Kein Betreff)'}
          </h1>

          <div className="flex items-start justify-between">
            <div className="flex items-center gap-4">
              <div className="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
                <span className="text-primary-700 font-medium">
                  {(email.senderName || email.senderEmail)[0].toUpperCase()}
                </span>
              </div>
              <div>
                <p className="font-medium text-slate-900">
                  {email.senderName || email.senderEmail}
                </p>
                <p className="text-sm text-slate-500">{email.senderEmail}</p>
              </div>
            </div>

            <div className="text-right">
              <p className="text-sm text-slate-500">
                {new Date(email.date).toLocaleDateString('de-DE', {
                  weekday: 'long',
                  day: '2-digit',
                  month: 'long',
                  year: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                })}
              </p>
              <p className="text-xs text-slate-400 mt-1">An: {email.recipients.join(', ')}</p>
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-2 mt-4">
            <button className="px-3 py-1.5 text-sm font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100">
              Antworten
            </button>
            <button className="px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200">
              Weiterleiten
            </button>
            <button className="px-3 py-1.5 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200">
              Aufgabe erstellen
            </button>
            {!email.aiAnalyzed && (
              <button
                onClick={onAnalyze}
                className="px-3 py-1.5 text-sm font-medium text-purple-600 bg-purple-50 rounded-lg hover:bg-purple-100 flex items-center gap-1"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
                Mit KI analysieren
              </button>
            )}
          </div>
        </div>

        {/* Body */}
        <div className="flex-1 p-6 overflow-y-auto">
          {email.bodyHtml ? (
            <div
              className="prose prose-slate max-w-none"
              dangerouslySetInnerHTML={{ __html: email.bodyHtml }}
            />
          ) : (
            <pre className="whitespace-pre-wrap text-slate-700 font-sans">
              {email.bodyText || email.bodyPreview}
            </pre>
          )}

          {/* Attachments */}
          {email.hasAttachments && (
            <div className="mt-6 pt-6 border-t border-slate-200">
              <h3 className="text-sm font-medium text-slate-700 mb-3">
                Anhänge ({email.attachmentCount})
              </h3>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-2 px-3 py-2 bg-slate-100 rounded-lg">
                  <svg className="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  <span className="text-sm text-slate-700">Anhang herunterladen</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* AI Panel */}
      {showAIPanel && (
        <AIPanel
          email={email}
          onAnalyze={onAnalyze}
          onClose={() => setShowAIPanel(false)}
        />
      )}
    </div>
  )
}

function AIPanel({
  email,
  onAnalyze,
  onClose,
}: {
  email: Email
  onAnalyze: () => void
  onClose: () => void
}) {
  return (
    <div className="w-80 border-l border-slate-200 bg-slate-50 overflow-y-auto">
      <div className="p-4 border-b border-slate-200 bg-white flex items-center justify-between">
        <div className="flex items-center gap-2">
          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
          <h2 className="font-semibold text-slate-900">KI-Analyse</h2>
        </div>
        <button
          onClick={onClose}
          className="p-1 text-slate-400 hover:text-slate-600"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      {email.aiAnalyzed ? (
        <div className="p-4 space-y-6">
          {/* Sender Classification */}
          {email.senderType && SENDER_TYPE_LABELS[email.senderType] && (
            <div>
              <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
                Absender-Typ
              </h3>
              <span className={`px-3 py-1.5 rounded-lg text-sm font-medium ${SENDER_TYPE_LABELS[email.senderType].color}`}>
                {SENDER_TYPE_LABELS[email.senderType].label}
              </span>
            </div>
          )}

          {/* Category */}
          {email.category && (
            <div>
              <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
                Kategorie
              </h3>
              <span className="px-3 py-1.5 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium">
                {CATEGORY_LABELS[email.category] || email.category}
              </span>
            </div>
          )}

          {/* Deadlines */}
          {email.deadlines && email.deadlines.length > 0 && (
            <div>
              <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
                Erkannte Fristen
              </h3>
              <div className="space-y-2">
                {email.deadlines.map((deadline, idx) => (
                  <div key={idx} className="p-3 bg-white rounded-lg border border-slate-200">
                    <div className="flex items-center gap-2 mb-1">
                      <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      <span className="font-medium text-slate-900">
                        {new Date(deadline.date).toLocaleDateString('de-DE', {
                          day: '2-digit',
                          month: '2-digit',
                          year: 'numeric',
                        })}
                      </span>
                      {deadline.isFirm && (
                        <span className="px-1.5 py-0.5 bg-red-100 text-red-700 text-xs rounded">
                          verbindlich
                        </span>
                      )}
                    </div>
                    <p className="text-sm text-slate-600">{deadline.description}</p>
                    <p className="text-xs text-slate-400 mt-1">
                      Konfidenz: {Math.round(deadline.confidence * 100)}%
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Quick Actions */}
          <div>
            <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
              Schnellaktionen
            </h3>
            <div className="space-y-2">
              <button className="w-full p-3 bg-white rounded-lg border border-slate-200 text-left hover:bg-slate-50 transition-colors">
                <div className="flex items-center gap-2">
                  <svg className="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                  <span className="text-sm font-medium text-slate-700">Als Aufgabe speichern</span>
                </div>
              </button>
              <button className="w-full p-3 bg-white rounded-lg border border-slate-200 text-left hover:bg-slate-50 transition-colors">
                <div className="flex items-center gap-2">
                  <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  <span className="text-sm font-medium text-slate-700">In Kalender eintragen</span>
                </div>
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="p-4 text-center">
          <div className="py-8">
            <svg className="w-12 h-12 text-slate-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
            </svg>
            <p className="text-slate-500 mb-4">Diese E-Mail wurde noch nicht analysiert.</p>
            <button
              onClick={onAnalyze}
              className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
            >
              Jetzt analysieren
            </button>
          </div>
        </div>
      )}
    </div>
  )
}