import React, { useState, useEffect } from 'react';
import { MedLandingPage } from './LandingPage.tsx';
import { MedLayout } from './MedLayout.tsx';
import { MedDashboard } from './MedDashboard.tsx';
import { MedicoBackend } from './services/medicoBackend.ts';

export type MedViewKey =
    | 'med-landing'
    | 'med-dashboard'
    | 'med-pacientes'
    | 'med-agenda'
    | 'med-prontuarios'
    | 'med-fidelidade'
    | 'med-financeiro'
    | 'medical-repasse';

const ROUTE_MAP: Record<string, MedViewKey> = {
    '/': 'med-landing',
    '/landingpage': 'med-landing',
    '/dashboard': 'med-dashboard',
    '/pacientes': 'med-pacientes',
    '/agenda': 'med-agenda',
    '/prontuarios': 'med-prontuarios',
    '/fidelidade': 'med-fidelidade',
    '/financeiro': 'med-financeiro',
    '/repasse': 'medical-repasse',
};

const VIEW_TO_ROUTE: Record<MedViewKey, string> = {
    'med-landing': '/landingpage',
    'med-dashboard': '/dashboard',
    'med-pacientes': '/pacientes',
    'med-agenda': '/agenda',
    'med-prontuarios': '/prontuarios',
    'med-fidelidade': '/fidelidade',
    'med-financeiro': '/financeiro',
    'medical-repasse': '/repasse',
};

function getHashPath(): string {
    const hash = window.location.hash;
    if (hash.startsWith('#/')) return hash.slice(1);
    return '/';
}

function resolveViewFromUrl(): MedViewKey {
    const path = getHashPath();
    return ROUTE_MAP[path] ?? 'med-landing';
}

function navigate(view: MedViewKey) {
    window.location.hash = VIEW_TO_ROUTE[view];
}

const App: React.FC = () => {
    const [currentView, setCurrentView] = useState<MedViewKey>(resolveViewFromUrl);

    useEffect(() => {
        const onHashChange = () => {
            setCurrentView(resolveViewFromUrl());
        };
        window.addEventListener('hashchange', onHashChange);
        return () => window.removeEventListener('hashchange', onHashChange);
    }, []);

    const handleNavigate = (view: string) => {
        const key = view as MedViewKey;
        setCurrentView(key);
        navigate(key);
    };

    const renderView = () => {
        switch (currentView) {
            case 'med-landing': return <MedLandingPage />;
            case 'med-dashboard': return <MedDashboard />;
            case 'med-pacientes': return <div className="text-white p-20 text-center font-black uppercase tracking-widest text-2xl">Módulo de Pacientes Médicos <br /><span className="text-cyan-400 text-sm">Em Desenvolvimento</span></div>;
            case 'med-agenda': return <div className="text-white p-20 text-center font-black uppercase tracking-widest text-2xl">Agenda Médica Premium <br /><span className="text-cyan-400 text-sm">Em Desenvolvimento</span></div>;
            case 'med-prontuarios': return <div className="text-white p-20 text-center font-black uppercase tracking-widest text-2xl">Sistema de Prontuários <br /><span className="text-cyan-400 text-sm">Em Desenvolvimento</span></div>;
            case 'med-fidelidade': return <div className="text-white p-20 text-center font-black uppercase tracking-widest text-2xl">Gestão de Fidelidade <br /><span className="text-cyan-400 text-sm">Em Desenvolvimento</span></div>;
            case 'med-financeiro': return <div className="text-white p-20 text-center font-black uppercase tracking-widest text-2xl">Financeiro & MRR <br /><span className="text-cyan-400 text-sm">Em Desenvolvimento</span></div>;
            case 'medical-repasse': return <div className="text-white p-20 text-center font-black uppercase tracking-widest text-2xl">Repasse Médico <br /><span className="text-cyan-400 text-sm">Em Desenvolvimento</span></div>;
            default: return <MedLandingPage />;
        }
    };

    if (currentView === 'med-landing') {
        return <MedLandingPage />;
    }

    return (
        <MedLayout currentView={currentView} onNavigate={handleNavigate}>
            {renderView()}
        </MedLayout>
    );
};

export default App;