import { useEffect, useState } from 'react';
import {
    faBuilding,
    faStethoscope,
    faUserTie,
    faPhone,
    faRobot,
    faGlobe,
    faPalette,
    faShieldHalved,
} from '@fortawesome/pro-duotone-svg-icons';
import { TopBar } from '@/components/layout/top-bar';
import { SectionCard } from '@/components/setup/section-card';
import {
    SETUP_STEP_NAMES,
    SETUP_STEP_LABELS,
    type SetupState,
    type SetupStepName,
    getSetupState,
} from '@/lib/setup-state';

// Settings hub — the new /settings route. Replaces the old monolithic
// SettingsPage which had only the team listing. The team listing now lives
// at /settings/team via TeamSettingsPage.
//
// Each card links to a dedicated settings page. Pages built in earlier
// phases link to existing routes (branding, rules); pages coming in later
// phases link to placeholder routes that render "Coming soon" until those
// phases land.
//
// The completion status badges mirror the sidecar setup-state so an admin
// returning later sees what still needs attention. Sections without a
// matching wizard step (branding, widget, rules) don't show a badge.

const STEP_TO_STATUS = (state: SetupState | null, step: SetupStepName | null) => {
    if (!state || !step) return 'unknown' as const;
    return state.steps[step].completed ? ('complete' as const) : ('incomplete' as const);
};

export const SettingsPage = () => {
    const [state, setState] = useState<SetupState | null>(null);

    useEffect(() => {
        getSetupState()
            .then(setState)
            .catch(() => {
                // Hub still works even if setup-state isn't reachable — just no badges.
            });
    }, []);

    return (
        <div className="flex flex-1 flex-col overflow-hidden">
            <TopBar title="Settings" subtitle="Configure your hospital workspace" />

            <div className="flex-1 overflow-y-auto p-8">
                <div className="mx-auto max-w-5xl">
                    {/* Identity & branding */}
                    <SectionGroup title="Hospital identity" description="How your hospital appears across the platform.">
                        <SectionCard
                            title="Branding"
                            description="Hospital name, logo, colors, login copy, sidebar text."
                            icon={faPalette}
                            href="/branding"
                            status={STEP_TO_STATUS(state, 'identity')}
                        />
                    </SectionGroup>

                    {/* Care delivery */}
                    <SectionGroup title="Care delivery" description="The clinics, doctors, and team members that run your operations.">
                        <SectionCard
                            title="Clinics"
                            description="Add hospital branches, addresses, and visiting hours."
                            icon={faBuilding}
                            href="/settings/clinics"
                            status={STEP_TO_STATUS(state, 'clinics')}
                        />
                        <SectionCard
                            title={SETUP_STEP_LABELS.doctors.title}
                            description="Add clinicians, specialties, and clinic assignments."
                            icon={faStethoscope}
                            href="/settings/doctors"
                            status={STEP_TO_STATUS(state, 'doctors')}
                        />
                        <SectionCard
                            title={SETUP_STEP_LABELS.team.title}
                            description="Invite supervisors and call-center agents."
                            icon={faUserTie}
                            href="/settings/team"
                            status={STEP_TO_STATUS(state, 'team')}
                        />
                    </SectionGroup>

                    {/* Channels & automation */}
                    <SectionGroup title="Channels & automation" description="Telephony, AI assistant, and the public-facing widget.">
                        <SectionCard
                            title={SETUP_STEP_LABELS.telephony.title}
                            description="Connect Ozonetel and Exotel for inbound and outbound calls."
                            icon={faPhone}
                            href="/settings/telephony"
                            status={STEP_TO_STATUS(state, 'telephony')}
                        />
                        <SectionCard
                            title={SETUP_STEP_LABELS.ai.title}
                            description="Choose your AI provider, model, and prompts."
                            icon={faRobot}
                            href="/settings/ai"
                            status={STEP_TO_STATUS(state, 'ai')}
                        />
                        <SectionCard
                            title="Website widget"
                            description="Embed the chat + booking widget on your hospital website."
                            icon={faGlobe}
                            href="/settings/widget"
                        />
                        <SectionCard
                            title="Routing rules"
                            description="Lead scoring, prioritisation, and assignment rules."
                            icon={faShieldHalved}
                            href="/rules"
                        />
                    </SectionGroup>

                    {state && (
                        <p className="mt-8 text-xs text-tertiary">
                            {SETUP_STEP_NAMES.filter(s => state.steps[s].completed).length} of{' '}
                            {SETUP_STEP_NAMES.length} setup steps complete.
                        </p>
                    )}
                </div>
            </div>
        </div>
    );
};

const SectionGroup = ({
    title,
    description,
    children,
}: {
    title: string;
    description: string;
    children: React.ReactNode;
}) => {
    return (
        <div className="mb-10 last:mb-0">
            <div className="mb-4">
                <h2 className="text-base font-bold text-primary">{title}</h2>
                <p className="mt-0.5 text-xs text-tertiary">{description}</p>
            </div>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">{children}</div>
        </div>
    );
};