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";
import {formatDateNumeric, formatDateWithTime} from '../utils/DateUtils';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

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 pb-20">
        {/* 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 flex-col sm:flex-row sm:items-center sm:space-x-4 mt-8">
                    {user && (<img
                        src={`/assets/profiles/${user.profilePicture}`}
                        alt={user.name}
                        className="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-white/30 object-cover mx-auto sm:mx-0 mb-3 sm:mb-0"
                    />)}
                    <div className="text-center sm:text-left">
                        <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 text-sm sm:text-base">
                            {user.name} •{' '}
                            {formatDateWithTime(dream.date)}
                        </p>)}
                    </div>
                </div>
            </div>
        </div>

        <div className="p-4 sm:p-6 md:p-8 space-y-6 sm:space-y-8 max-w-4xl mx-auto">
            <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                <div className="flex items-center mb-4">
                    <span className="font-medium dreamy-text">Traum-Beschreibung</span>
                </div>
                {(dream.input.inputType === 'image' || dream.input.inputType === 'audio') && (
                    <div className="flex justify-center mb-1">
                        {dream.input.inputType === 'audio' && (<audio></audio>)}
                        {dream.input.inputType === 'image' && (<img alt={dream.input.imgAlt}></img>)}
                    </div>)}
                <p className="leading-relaxed text-base sm:text-lg">
                    {(dream.input.inputType === 'text' && dream.input.input) || (dream.input.inputType === 'audio' && dream.input.transcript) || (dream.input.inputType === 'image' && dream.input.description)}
                </p>
            </div>

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


            {/* Carousel for KI-Bild and KI-Video if both exist */}
            {dream.ai?.image && dream.ai.video && dream.ai.image !== '' && dream.ai.video !== '' && (
                <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                    <div className="flex items-center mb-4">
                        <span className="font-medium dreamy-text">KI-Medien</span>
                    </div>
                    <Slider
                        dots={true}
                        infinite={true}
                        speed={500}
                        slidesToShow={1}
                        slidesToScroll={1}
                        className="max-w-full mx-auto carousel-container"
                    >
                        <div className="flex justify-center px-2">
                            <img
                                src={`/assets/dreams/images/${dream.ai.image}`}
                                alt="KI-generiertes Traumbild"
                                className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
                                style={{maxHeight: '70vh'}}
                            />
                        </div>
                        <div className="flex justify-center px-2">
                            <video
                                controls
                                src={`/assets/dreams/videos/${dream.ai.video}`}
                                className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
                                style={{maxHeight: '70vh'}}
                            >
                                Ihr Browser unterstützt das Video-Element nicht.
                            </video>
                        </div>
                    </Slider>
                </div>)}

            {/* Show KI-Bild alone if video doesn't exist */}
            {dream.ai?.image && dream.ai.image !== '' && (!dream.ai.video || dream.ai.video === '') && (
                <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                    <div className="flex items-center mb-4">
                        <span className="font-medium dreamy-text">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 rounded-lg shadow-lg object-contain mx-auto"
                            style={{maxHeight: '70vh'}}
                        />
                    </div>
                </div>)}

            {/* Show KI-Video alone if image doesn't exist */}
            {dream.ai?.video && dream.ai.video !== '' && (!dream.ai.image || dream.ai.image === '') && (
                <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                    <div className="flex items-center mb-4">
                        <span className="font-medium dreamy-text">KI-Video</span>
                    </div>
                    <div className="flex justify-center">
                        <video
                            controls
                            src={`/assets/dreams/videos/${dream.ai.video}`}
                            className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
                            style={{maxHeight: '70vh'}}
                        >
                            Ihr Browser unterstützt das Video-Element nicht.
                        </video>
                    </div>
                </div>)}

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

            <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                <h2 className="text-lg font-semibold mb-3 dreamy-text">Details</h2>
                <div className="space-y-3" style={{color: 'var(--text-muted)'}}>
                    <div className="flex flex-col sm:flex-row sm:justify-between">
                        <span className="font-medium mb-1 sm:mb-0">Eingabetyp</span>
                        <span className="capitalize">{dream.input.inputType}</span>
                    </div>
                    <div className="flex flex-col sm:flex-row sm:justify-between">
                        <span className="font-medium mb-1 sm:mb-0">Datum</span>
                        <span>
                            {formatDateNumeric(dream.date)}
                          </span>
                    </div>
                </div>
            </div>
        </div>
    </div>);
}