import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { supabase } from "../services/supabase";
import "./EmployeeCard.css";

export default function EmployeeCard() {

    const { employeeNumber } = useParams();

    const [employee, setEmployee] = useState(null);
    const [loading, setLoading] = useState(true);
    const [notFound, setNotFound] = useState(false);

    useEffect(() => {

        async function loadEmployee() {

            const { data, error } = await supabase
                .rpc("get_carnet_publico", { p_cedula: employeeNumber });

            if (error || !data || data.length === 0) {
                setNotFound(true);
            } else {
                setEmployee(data[0]);
            }

            setLoading(false);
        }

        loadEmployee();

    }, [employeeNumber]);

    if (loading) {
        return (
            <div className="page">
                <h2>Cargando...</h2>
            </div>
        );
    }

    if (notFound) {
        return (
            <div className="page">
                <h1 style={{ color: "red" }}>
                    Empleado no encontrado
                </h1>
            </div>
        );
    }

    const active = employee.status?.toLowerCase() === "active";

    return (
        <div className="page">

            <div className="employee-card">

                <div
                    className="header"
                    style={{
                        backgroundColor: active
                            ? "#22c55e"
                            : "#ef4444"
                    }}
                >
                    {active
                        ? "Empleado Activo"
                        : "Empleado No Activo"}
                </div>

                <div className="content">
                    {employee.photo_url ? (
                        <img
                            src={employee.photo_url}
                            alt={employee.name}
                            className="employee-photo"
                        />
                    ) : (
                        <div className="employee-photo-placeholder">
                            Sin foto
                        </div>
                    )}

                    <div className="label">
                        Nombre
                    </div>

                    <div className="value">
                        {employee.name}
                    </div>

                    <div className="label">
                        Puesto
                    </div>

                    <div className="value">
                        {employee.job_title}
                    </div>

                    <div className="label">
                        País
                    </div>

                    <div className="value">
                        {employee.country}
                    </div>

                    <div className="label">
                        Estado
                    </div>

                    <div className="value">
                        {employee.status}
                    </div>

                </div>

            </div>

        </div>
    );

}