"use client";

// Removida a importação de ManagerLayout, pois a página agora é envolvida pelo ManagerLayout pai (em app/manager/layout.tsx)
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Calendar, Clock, Plus, User } from "lucide-react"; 
import Link from "next/link";
import React, { useState, useEffect } from "react";
import { usuariosApi } from "@/services/usuariosApi"; 
import { perfisApi } from "@/services/perfisApi";   
import { medicosApi } from "@/services/medicosApi";

export default function ManagerDashboard() {
    // 🔹 Estados para usuários
    const [firstUser, setFirstUser] = useState<any>(null);
    const [loadingUser, setLoadingUser] = useState(true);

    // 🔹 Estados para médicos
    const [doctors, setDoctors] = useState<any[]>([]);
    const [loadingDoctors, setLoadingDoctors] = useState(true);

    // REMOVIDO: mockUserProfile e mockMenuItems foram removidos.
    // Agora, o layout (ManagerLayout em app/manager/layout.tsx) é responsável por fornecer esses dados.


    // 🔹 Buscar primeiro usuário
    useEffect(() => {
        async function fetchFirstUser() {
            try {
                // Passo 1: Buscar a lista de papéis/usuários
                const rolesData = await usuariosApi.listRoles(); 
                if (Array.isArray(rolesData) && rolesData.length > 0) {
                    const firstRole = rolesData[0];
                    // Passo 2: Usar o user_id do primeiro papel para buscar o perfil completo
                    // NOTE: Esta lógica parece buscar a lista de perfis, não um único perfil por user_id.
                    // Mantendo a estrutura para evitar quebrar a lógica de dados, mas é uma área a ser revisada.
                    const profileData = await perfisApi.list(); 
                    // Se list() retorna um array, talvez você queira mapear para encontrar o perfil do firstRole.user_id, mas mantendo o original:
                    setFirstUser(profileData[0]); // Assumindo que o primeiro item é o perfil
                }
            } catch (error) {
                console.error("Erro ao carregar usuário:", error);
            } finally {
                setLoadingUser(false);
            }
        }

        fetchFirstUser();
    }, []);

    // 🔹 Buscar 3 primeiros médicos (sem alterações aqui)
    useEffect(() => {
        async function fetchDoctors() {
            try {
                const data = await medicosApi.list();
                if (Array.isArray(data)) {
                    setDoctors(data.slice(0, 3));
                }
            } catch (error) {
                console.error("Erro ao carregar médicos:", error);
            } finally {
                setLoadingDoctors(false);
            }
        }

        fetchDoctors();
    }, []);

    return (
        // REMOVIDO: A página agora apenas retorna seu conteúdo, confiando no ManagerLayout em app/manager/layout.tsx para o wrapper.
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
                <p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Relatórios gerenciais</CardTitle>
                        <Calendar className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">0</div>
                        <p className="text-xs text-muted-foreground">Relatórios disponíveis</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Gestão de usuários</CardTitle>
                        <Clock className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        {loadingUser ? (
                            <div className="text-gray-500 text-sm">Carregando usuário...</div>
                        ) : firstUser ? (
                            <>
                                <div className="text-2xl font-bold">{firstUser.full_name || "Sem nome"}</div>
                                <p className="text-xs text-muted-foreground">
                                    {firstUser.email || "Sem e-mail cadastrado"}
                                </p>
                            </>
                        ) : (
                            <div className="text-sm text-gray-500">Nenhum usuário encontrado</div>
                        )}
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Perfil</CardTitle>
                        <User className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">100%</div>
                        <p className="text-xs text-muted-foreground">Dados completos</p>
                    </CardContent>
                </Card>
            </div>
            <div className="grid md:grid-cols-2 gap-6">
                <Card>
                    <CardHeader>
                        <CardTitle>Ações Rápidas</CardTitle>
                        <CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <Link href="/manager/home"><Button className="w-full justify-start"><User className="mr-2 h-4 w-4" />Gestão de Médicos</Button></Link>
                        <Link href="/manager/usuario"><Button variant="outline" className="w-full justify-start bg-transparent"><User className="mr-2 h-4 w-4" />Usuários Cadastrados</Button></Link>
                        <Link href="/manager/home/novo"><Button variant="outline" className="w-full justify-start bg-transparent"><Plus className="mr-2 h-4 w-4" />Adicionar Novo Médico</Button></Link>
                        <Link href="/manager/usuario/novo"><Button variant="outline" className="w-full justify-start bg-transparent"><Plus className="mr-2 h-4 w-4" />Criar novo Usuário</Button></Link>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Gestão de Médicos</CardTitle>
                        <CardDescription>Médicos cadastrados recentemente</CardDescription>
                    </CardHeader>
                    <CardContent>
                        {loadingDoctors ? (
                            <p className="text-sm text-gray-500">Carregando médicos...</p>
                        ) : doctors.length === 0 ? (
                            <p className="text-sm text-gray-500">Nenhum médico cadastrado.</p>
                        ) : (
                            <div className="space-y-4">
                                {doctors.map((doc, index) => (
                                    <div key={index} className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-100">
                                        <div>
                                            <p className="font-medium">{doc.full_name || "Sem nome"}</p>
                                            <p className="text-sm text-gray-600">{doc.specialty || "Sem especialidade"}</p>
                                        </div>
                                        <div className="text-right">
                                            <p className="font-medium text-green-700">{doc.active ? "Ativo" : "Inativo"}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}