import * as React from 'react';
import { GreenPage } from '../types';
import { Preview } from './Preview';
import { Icon } from './ui/Icon';
// FIX: Added 'generateEnterpriseShowcases' to the import as it is now correctly exported.
import { generatePersonalShowcases, generateEnterpriseShowcases } from '../services/showcaseDataService';

interface ShowcaseProps {
  initialTab: 'personal' | 'enterprise';
  onImportPage: (page: GreenPage) => void;
}

const Showcase: React.FC<ShowcaseProps> = ({ initialTab, onImportPage }) => {
    const [activeTab, setActiveTab] = React.useState(initialTab);
    const [showcasePages, setShowcasePages] = React.useState<GreenPage[]>([]);
    const [selectedPage, setSelectedPage] = React.useState<GreenPage | null>(null);

    const [previewMode, setPreviewMode] = React.useState<'personal' | 'enterprise'>(initialTab);
    const [deviceView, setDeviceView] = React.useState<'pc' | 'mobile'>('pc');

    React.useEffect(() => {
        const pages = activeTab === 'personal' ? generatePersonalShowcases() : generateEnterpriseShowcases();
        setShowcasePages(pages);
        setSelectedPage(pages[0] || null);
        setPreviewMode(activeTab);
    }, [activeTab]);

    return (
        <div className="flex h-full">
            <div className="w-1/3 max-w-sm flex flex-col border-r border-gray-200 dark:border-gray-700">
                <header className="p-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Showcase</h2>
                    <p className="text-gray-500 dark:text-gray-400 mt-1">Explore what you can build.</p>
                     <div className="mt-4 flex items-center gap-1 bg-gray-200 dark:bg-gray-800 p-1 rounded-lg">
                        <button onClick={() => setActiveTab('personal')} className={`flex-1 px-3 py-1 text-sm rounded-md capitalize transition-colors ${activeTab === 'personal' ? 'bg-brand-primary text-white shadow' : 'hover:bg-gray-300 dark:hover:bg-gray-600'}`}>Personal</button>
                        <button onClick={() => setActiveTab('enterprise')} className={`flex-1 px-3 py-1 text-sm rounded-md capitalize transition-colors ${activeTab === 'enterprise' ? 'bg-brand-primary text-white shadow' : 'hover:bg-gray-300 dark:hover:bg-gray-600'}`}>Enterprise</button>
                    </div>
                </header>
                <div className="flex-1 overflow-y-auto p-4 space-y-3">
                    {showcasePages.map(page => (
                         <button
                            key={page.id}
                            onClick={() => setSelectedPage(page)}
                            className={`w-full p-4 rounded-lg text-left transition-all duration-200 ${selectedPage?.id === page.id ? 'bg-brand-primary/10 ring-2 ring-brand-primary' : 'bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700/50'}`}
                        >
                            <p className="font-semibold text-gray-900 dark:text-white">{page.name}</p>
                            <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{page.slug}</p>
                        </button>
                    ))}
                </div>
            </div>
            <div className="flex-1 border-l border-gray-200 dark:border-gray-700 flex flex-col bg-gray-200 dark:bg-gray-900/50">
                <div className="flex-shrink-0 bg-white dark:bg-gray-800 p-2 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                    {selectedPage ? (
                         <button
                            onClick={() => onImportPage(selectedPage)}
                            className="flex items-center gap-2 bg-brand-primary text-white font-semibold py-2 px-4 rounded-lg hover:bg-brand-secondary transition-colors"
                        >
                            <Icon className="h-5 w-5"><path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></Icon>
                            Import Page
                        </button>
                    ) : <div />}
                    <div className="flex items-center gap-1 bg-gray-200 dark:bg-gray-700 p-1 rounded-lg">
                        <button onClick={() => setDeviceView('pc')} className={`p-2 rounded-md ${deviceView === 'pc' ? 'bg-brand-primary text-white' : ''}`}> 
                            <Icon className='h-5 w-5'><path strokeLinecap="round" strokeLinejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></Icon>
                        </button>
                        <button onClick={() => setDeviceView('mobile')} className={`p-2 rounded-md ${deviceView === 'mobile' ? 'bg-brand-primary text-white' : ''}`}> 
                            <Icon className='h-5 w-5'><path strokeLinecap="round" strokeLinejoin="round" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></Icon>
                        </button>
                    </div>
                </div>
                 <div className="flex-1 overflow-hidden relative">
                    {selectedPage ? (
                         <Preview
                            key={`${selectedPage.id}-${previewMode}-${deviceView}`}
                            pageSettings={selectedPage.pageSettings}
                            aigcVideos={selectedPage.aigcSettings.videos}
                            aigcArticles={selectedPage.aigcSettings.articles}
                            previewMode={previewMode}
                            deviceView={deviceView}
                            // FIX: Added the required 'onFormSubmit' prop with a dummy function as it's not needed in the showcase.
                            onFormSubmit={() => {}}
                        />
                    ) : (
                        <div className="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">Select a showcase to preview</div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default Showcase;