import React, { useState } from 'react';
import styled from 'styled-components';

import {
  IFaqItem,
  IInformationCenterItem,
  IInformationCenterNPC,
  IVideoGuide,
} from '@rpg-engine/shared';
import { DraggableContainer } from '../DraggableContainer';
import { InternalTabs } from '../InternalTabs/InternalTabs';
import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { InformationCenterBestiarySection } from './sections/bestiary/InformationCenterBestiarySection';
import { InformationCenterFAQSection } from './sections/faq/InformationCenterFaqSection';
import { InformationCenterItemsSection } from './sections/items/InformationCenterItemsSection';
import { InformationCenterTutorialsSection } from './sections/tutorials/InformationCenterTutorialsSection';

interface IInformationCenterProps {
  itemsAtlasJSON: Record<string, any>;
  itemsAtlasIMG: string;
  entitiesAtlasJSON: Record<string, any>;
  entitiesAtlasIMG: string;
  iconsAtlasJSON: any;
  iconsAtlasIMG: any;
  faqItems?: IFaqItem[];
  bestiaryItems?: IInformationCenterNPC[];
  videoGuides?: IVideoGuide[];
  items?: IInformationCenterItem[];
  loading?: boolean;
  error?: string;
  initialSearchQuery?: string;
}

export const InformationCenter: React.FC<IInformationCenterProps> = ({
  itemsAtlasJSON,
  itemsAtlasIMG,
  entitiesAtlasJSON,
  entitiesAtlasIMG,
  iconsAtlasIMG,
  iconsAtlasJSON,
  faqItems = [],
  bestiaryItems = [],
  videoGuides = [],
  items = [],
  loading = false,
  error,
  initialSearchQuery = '',
}) => {
  const [activeTab, setActiveTab] = useState('bestiary');

  if (loading) {
    return <LoadingMessage>Loading...</LoadingMessage>;
  }

  if (error) {
    return <ErrorMessage>{error}</ErrorMessage>;
  }

  const tabs = [
    {
      id: 'bestiary',
      title: 'Bestiary',
      content: (
        <InformationCenterBestiarySection
          bestiaryItems={bestiaryItems}
          itemsAtlasJSON={itemsAtlasJSON}
          itemsAtlasIMG={itemsAtlasIMG}
          iconsAtlasIMG={iconsAtlasIMG}
          iconsAtlasJSON={iconsAtlasJSON}
          entitiesAtlasJSON={entitiesAtlasJSON}
          entitiesAtlasIMG={entitiesAtlasIMG}
          initialSearchQuery={initialSearchQuery}
          tabId="bestiary"
        />
      ),
    },
    {
      id: 'items',
      title: 'Items',
      content: (
        <InformationCenterItemsSection
          items={items}
          bestiaryItems={bestiaryItems}
          itemsAtlasJSON={itemsAtlasJSON}
          itemsAtlasIMG={itemsAtlasIMG}
          initialSearchQuery={initialSearchQuery}
          tabId="items"
        />
      ),
    },
    {
      id: 'faq',
      title: 'FAQ',
      content: (
        <InformationCenterFAQSection
          faqItems={faqItems}
          initialSearchQuery={initialSearchQuery}
          tabId="faq"
        />
      ),
    },
    {
      id: 'tutorials',
      title: 'Tutorials',
      content: (
        <InformationCenterTutorialsSection
          videoGuides={videoGuides}
          initialSearchQuery={initialSearchQuery}
          tabId="tutorials"
        />
      ),
    },
  ];

  return (
    <DraggableContainer
      title="Information Center"
      type={RPGUIContainerTypes.Framed}
    >
      <Container>
        <InternalTabs
          tabs={tabs}
          activeTextColor="#000000"
          activeTab={activeTab}
          onTabChange={setActiveTab}
          activeColor="#fef08a"
          inactiveColor="#6b7280"
          borderColor="#f59e0b"
          hoverColor="#fef3c7"
        />
      </Container>
    </DraggableContainer>
  );
};

const Container = styled.div`
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
`;

const LoadingMessage = styled.div`
  text-align: center;
  color: #ffffff;
  padding: 2rem;
`;

const ErrorMessage = styled.div`
  text-align: center;
  color: #ef4444;
  padding: 2rem;
`;
