import { useState, useEffect } from "react"
import { getStatuses, logout } from "../../api/connections"
import { ServiceType, type ConnectionStatus } from "../../types/connection"
import { ServiceCard } from "./ServiceCard"
import { ConnectModal } from "./ConnectModal"
import "./Dashboard.scss"
import { SearchModal } from "../search/SearchModal"

const SERVICES = [
    { serviceType: ServiceType.HOMEBOX, label: 'Homebox', icon: '📦' },
] as const

export function Dashboard() {
    const [statuses, setStatuses] = useState<ConnectionStatus[]>([])
    const [openConnectionModal, setOpenConnectionModal] = useState<string | null>(null)
    const [openSearchModal, setOpenSearchModal] = useState<string | null>(null)

    const refresh = () => {
        getStatuses().then(setStatuses).catch(() => { })
    }

    useEffect(() => { refresh() }, [])

    const handleDisconnect = (serviceType: ServiceType) => {
        logout(serviceType).then(refresh).catch(() => { })
    }

    const activeConnectionModal = SERVICES.find(s => s.serviceType === openConnectionModal)
    const activeSearchModal = SERVICES.find(s => s.serviceType === openSearchModal)
    const activeSearchStatus = statuses.find(s => s.serviceType === openSearchModal)

    return (
        <div className="dashboard">
            <div className="dashboard__header">
                <h1 className="dashboard__title">Vaessl Dashboard</h1>
            </div>

            <p className="dashboard__section-label">Services</p>
            <div className="dashboard__cards">
                {SERVICES.map(({ serviceType, label, icon }) => (
                    <ServiceCard
                        key={serviceType}
                        serviceType={serviceType}
                        label={label}
                        icon={icon}
                        status={statuses.find(s => s.serviceType === serviceType) ?? null}
                        onConnect={() => setOpenConnectionModal(serviceType)}
                        onDisconnect={() => handleDisconnect(serviceType)}
                        onSearch={() => setOpenSearchModal(serviceType)}
                    />
                ))}
            </div>

            {activeConnectionModal && (
                <ConnectModal
                    serviceType={activeConnectionModal.serviceType}
                    label={activeConnectionModal.label}
                    onClose={() => setOpenConnectionModal(null)}
                    onSuccess={() => { setOpenConnectionModal(null); refresh() }}
                />
            )}

            {activeSearchModal && (
                <SearchModal
                    serviceType={activeSearchModal.serviceType}
                    label={activeSearchModal.label}
                    appUrl={activeSearchStatus?.appUrl ?? ''}
                    username={activeSearchStatus?.username ?? ''}
                    onClose={() => setOpenSearchModal(null) }
                    
                />
            )}
        </div>
    )
}