REMind/src/pages/DreamPage.tsx

// src/pages/DreamPage.tsx

import {type NavigateFunction, useNavigate, useParams} from 'react-router-dom';
import {mockDreams} from '../data/MockDreams';
import MockUsers from '../data/MockUsers';
import User from '../types/User';
import type Dream from "../types/Dream.ts";

export default function DreamPage() {
    const {id} = useParams<{ id: string }>();
    const navigate: NavigateFunction = useNavigate();

    const dream: Dream | undefined = mockDreams.find(d => d.id === Number(id));
    const user: User | undefined = dream ? MockUsers.find(u => u.id === dream.userId) : undefined;

    if (!dream) {
        return (<div className="page p-4">
            <button
                onClick={() => navigate(-1)}
                className="mb-4 hover:underline"
                style={{ color: 'var(--accent)' }}
            >
                ← Zurück
            </button>
            <p style={{ color: 'var(--text-muted)' }}>Traum nicht gefunden.</p>
        </div>);
    }

    return (<div className="page min-h-screen">
        {/* Header */}
        <div className="relative" style={{ background: 'var(--accent-gradient)' }}>
            <div className="p-4 sm:p-6 md:p-8 text-white">
                <button
                    onClick={() => navigate(-1)}
                    className="absolute top-4 left-4 p-2 rounded-full bg-white/20 backdrop-blur-sm"
                >
                    ←
                </button>
                <div className="flex items-center space-x-4 mt-8">
                    {user && (<img
                        src={`/assets/profiles/${user.profilePicture}`}
                        alt={user.name}
                        className="w-16 h-16 rounded-full border-4 border-white/30 object-cover"
                    />)}
                    <div>
                        <h1 className="font-bold !text-xl sm:!text-2xl md:!text-3xl lg:!text-4xl">
                            {dream.title}
                        </h1>
                        {user && (<p className="mt-1 text-white/80">
                            {user.name} •{' '}
                            {dream.date.toLocaleDateString('de-DE', {
                                day: '2-digit',
                                month: '2-digit',
                                year: 'numeric',
                                hour: '2-digit',
                                minute: '2-digit',
                            })}
                        </p>)}
                    </div>
                </div>
            </div>
        </div>

        <div className="p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8">
            <div className="dream-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                <div className="flex items-center mb-4">
                    <span className="font-medium" style={{ color: 'var(--accent)' }}>Traum-Beschreibung</span>
                </div>
                <p className="leading-relaxed text-lg">
                    {dream.input}
                </p>
            </div>

            {dream.ai?.interpretation && dream.ai.interpretation !== '' && (<div
                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
                <div className="flex items-center mb-4">
                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Interpretation</span>
                </div>
                <p className="leading-relaxed">
                    {dream.ai.interpretation}
                </p>
            </div>)}

            {dream.ai?.image && dream.ai.image !== '' && (<div
                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
                <div className="flex items-center mb-4">
                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Bild</span>
                </div>
                <div className="flex justify-center">
                    <img 
                        src={`/assets/dreams/images/${dream.ai.image}`}
                        alt="KI-generiertes Traumbild" 
                        className="max-w-full w-full sm:w-auto rounded-lg shadow-lg object-contain mx-auto"
                    />
                </div>
            </div>)}

            {dream.ai?.audio && dream.ai.audio !== '' && (<div
                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
                <div className="flex items-center mb-4">
                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Audio</span>
                </div>
                <div className="flex justify-center">
                    <audio 
                        controls 
                        src={`/assets/dreams/audio/${dream.ai.audio}`}
                        className="w-full max-w-md sm:max-w-lg mx-auto"
                    >
                        Ihr Browser unterstützt das Audio-Element nicht.
                    </audio>
                </div>
            </div>)}

            {dream.ai?.video && dream.ai.video !== '' && (<div
                className="dreamPanel rounded-xl sm:rounded-2xl p-4 sm:p-6">
                <div className="flex items-center mb-4">
                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Video</span>
                </div>
                <div className="flex justify-center">
                    <video 
                        controls 
                        src={`/assets/dreams/videos/${dream.ai.video}`}
                        className="max-w-full w-full sm:w-auto rounded-lg shadow-lg object-contain mx-auto"
                    >
                        Ihr Browser unterstützt das Video-Element nicht.
                    </video>
                </div>
            </div>)}

            <div className="dream-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                <h2 className="text-lg font-semibold mb-3">Details</h2>
                <div className="space-y-2" style={{ color: 'var(--text-muted)' }}>
                    <div className="flex justify-between">
                        <span>Eingabetyp</span>
                        <span className="capitalize">{dream.inputType}</span>
                    </div>
                    <div className="flex justify-between">
                        <span>Datum</span>
                        <span>
                            {dream.date.toLocaleDateString('de-DE', {
                                day: '2-digit', month: '2-digit', year: 'numeric',
                            })}
                          </span>
                    </div>
                </div>
            </div>
        </div>
    </div>);
}