import { mdiChatOutline } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import BaseButton from '../../components/BaseButton';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { fetch } from '../../stores/scenes/scenesSlice';
import { getPageTitle } from '../../config';
import LoadingSpinner from '../../components/LoadingSpinner';

const AkazaRoleplay = () => {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { scenesId } = router.query;
  const { scenes, loading } = useAppSelector((state) => state.scenes);

  useEffect(() => {
    if (scenesId) {
      dispatch(fetch({ id: scenesId }));
    }
  }, [scenesId, dispatch]);

  return (
    <>
      <Head>
        <title>{getPageTitle('Akaza Roleplay')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiChatOutline} title="Roleplay: Koyuki vs Akaza" main>
          <BaseButton label="Exit Scene" color="danger" onClick={() => router.push('/scenes/scenes-list')} />
        </SectionTitleLineWithButton>
        <CardBox className="mb-6">
          {loading ? (
            <LoadingSpinner />
          ) : (
            <div>
              <h2 className="text-xl font-bold mb-4">{scenes?.title || 'Loading Scene...'}</h2>
              <div className="prose dark:prose-invert mb-6" dangerouslySetInnerHTML={{ __html: scenes?.premise || '' }} />
              
              <div className="border-t border-gray-200 dark:border-dark-700 pt-6">
                  <h3 className="text-lg font-semibold mb-4">Conversation</h3>
                  <div className="bg-gray-50 dark:bg-dark-900 p-4 rounded h-64 overflow-y-auto mb-4">
                      {/* Chat messages will appear here */}
                      <p className="text-gray-500 italic">Chat history will be loaded here...</p>
                  </div>
                  <div className="flex gap-2">
                      <input className="flex-grow p-2 border rounded dark:bg-dark-800" placeholder="Type your message..." />
                      <BaseButton label="Send" color="info" />
                  </div>
              </div>
            </div>
          )}
        </CardBox>
      </SectionMain>
    </>
  );
};

AkazaRoleplay.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
};

export default AkazaRoleplay;
