import { CircularProgress, Typography } from "@mui/material";
import styled from "styled-components";
import { useTesBancosQuery } from "../../../tanstack/TesoreriaStack";

export const TesBancosConfigSection = () => {
  const { data: bancos = [], isLoading } = useTesBancosQuery();

  return (
    <Container>
      <div style={{ marginBottom: 20 }}>
        <Typography variant="h6" fontWeight={600}>Bancos</Typography>
        <Typography variant="body2" sx={{ opacity: 0.6, mt: 0.5 }}>
          Lista de bancos habilitados para asociar a las cuentas de tesorería.
        </Typography>
      </div>

      <TableWrap>
        <StyledTable>
          <thead>
            <tr>
              <Th>Código</Th>
              <Th>Nombre</Th>
            </tr>
          </thead>
          <tbody>
            {isLoading ? (
              <tr><Td colSpan={2} style={{ textAlign: "center", padding: 32 }}><CircularProgress size={20} /></Td></tr>
            ) : bancos.length === 0 ? (
              <tr><Td colSpan={2} style={{ textAlign: "center", opacity: 0.5 }}>Sin bancos registrados</Td></tr>
            ) : bancos.map((b) => (
              <Tr key={b.id}>
                <Td style={{ fontFamily: "monospace", opacity: 0.7, width: 80 }}>{b.codigo || "—"}</Td>
                <Td style={{ fontWeight: 500 }}>{b.descripcion}</Td>
              </Tr>
            ))}
          </tbody>
        </StyledTable>
      </TableWrap>

      <Typography variant="caption" sx={{ opacity: 0.4, mt: 2, display: "block" }}>
        Lista predefinida del Banco Central del Paraguay. Para agregar un banco que no aparece, contactá al administrador del sistema.
      </Typography>
    </Container>
  );
};

const Container = styled.div`padding: 24px; height: 100%; overflow-y: auto;`;
const TableWrap = styled.div`background: ${({ theme }) => theme.bg2}; border: 1px solid ${({ theme }) => theme.color2}; border-radius: 10px; overflow: hidden;`;
const StyledTable = styled.table`width: 100%; border-collapse: collapse;`;
const Th = styled.th`background: ${({ theme }) => theme.bg3}; color: ${({ theme }) => theme.text2}; padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid ${({ theme }) => theme.color2};`;
const Td = styled.td`padding: 10px 14px; border-bottom: 1px solid ${({ theme }) => theme.color2}; font-size: 13px;`;
const Tr = styled.tr`&:last-child td { border-bottom: none; } &:hover { background: ${({ theme }) => theme.bg3}; }`;