import type { Server } from "../types/Server";

interface Props {
    servers: Server[];
    loading: boolean;
    error: string | null;
}

export const ServersTable = ({ servers, loading, error }: Props) => {
    return (
        <div className={Styles.card}>
            {loading && <div className={Styles.status}>Carregando servidores...</div>}
            {error && <div className={Styles.error}>{error}</div>}
            {!loading && !error && servers.length === 0 && (
                <div className={Styles.status}>Nenhum servidor encontrado.</div>
            )}
            {!loading && !error && servers.length > 0 && (
                <div className={Styles.tableWrapper}>
                    <table className={Styles.table}>
                        <thead className={Styles.tableHead}>
                            <tr className="text-left">
                                <th className={Styles.tableHeadCell}>Nome</th>
                                <th className={Styles.tableHeadCell}>IP</th>
                                <th className={Styles.tableHeadCell}>Porta</th>
                                <th className={Styles.tableHeadCell}>Usuário</th>
                                <th className={Styles.tableHeadCell}>Senha</th>
                                <th className={Styles.tableHeadCell}>Tipo</th>
                                <th className={Styles.tableHeadCell}>Aplicação</th>
                                <th className={Styles.tableHeadCell}>Banco</th>
                            </tr>
                        </thead>
                        <tbody className={Styles.tableBody}>
                            {servers.map((server) => (
                                <tr
                                    key={server.id}
                                    className="hover:bg-gray-50 transition-colors even:bg-gray-50/50"
                                >
                                    <td className={Styles.rowCell}>{server.name}</td>
                                    <td className={Styles.rowCell}>{server.ip}</td>
                                    <td className={Styles.rowCell}>{server.port}</td>
                                    <td className={Styles.rowCell}>{server.user}</td>
                                    <td className={Styles.rowCell}>
                                        <code className="text-xs bg-gray-100 px-2 py-1 rounded">{server.password}</code>
                                    </td>
                                    <td className={`${Styles.rowCell} capitalize`}>{server.type.toLowerCase()}</td>
                                    <td className={`${Styles.rowCell} capitalize`}>{server.application.toLowerCase()}</td>
                                    <td className={`${Styles.rowCell} capitalize`}>{server.dbType.toLowerCase()}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            )}
        </div>
    );
};

const Styles = {
    card: "bg-card border border-cardBorder shadow-sm rounded-lg overflow-hidden",
    status: "p-4 text-text-secondary text-sm",
    error: "p-4 text-red-600 text-sm",
    tableWrapper: "overflow-x-auto rounded-lg shadow-sm border border-cardBorder",
    table: "min-w-full divide-y divide-cardBorder table-auto",
    tableHead: "bg-gray-50 sticky top-0",
    tableHeadCell: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-text-secondary",
    tableBody: "bg-white divide-y divide-cardBorder",
    rowCell: "px-4 py-3 text-sm text-text",
};