import { Icon } from "@iconify/react";
import { Box, Container, Stack, Tab, Tabs, Typography } from "@mui/material";
import { useState } from "react";
import { EmptyState, ScreenGuia } from "../components/_standards";
import { Cobros } from "../components/organismos/NovasisPay/Cobros";
import { CuentasConfig } from "../components/organismos/NovasisPay/CuentasConfig";
import { usePermission } from "../hooks/usePermission";

export function NovasisPay() {
  const [tab, setTab] = useState("cuentas");
  const { can } = usePermission("NOVASIS_PAY");
  const canEditar = can("NOV_CFG_CUENTA_EDITAR");
  const canCrearCobro = can("NOV_COBROS_CREAR");

  return (
    <Container maxWidth="lg" sx={{ py: 3 }}>
      <Stack spacing={2.5}>
        <Box>
          <Typography variant="h5" fontWeight={700}>
            Novasis Pay
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Cobrá con tarjeta, QR y transferencia desde tu ERP. Configurá tu cuenta, cobrá desde
            caja y revisá los depósitos contra tu contabilidad.
          </Typography>
        </Box>

        <ScreenGuia
          moduloPadre="Novasis Pay"
          titulo="¿Cómo funciona Novasis Pay?"
          intro="Cobrá con tarjeta, QR y transferencia desde una sola pantalla. El cliente paga en una página segura de Novasis Pay y los pagos quedan reflejados en tu ERP."
          pasos={[
            {
              icon: "lucide:key-round",
              color: "#2563EB",
              titulo: "1. Conectá tu cuenta",
              desc: "Pedí el alta a soporte@novasis.pay. Te entregan una clave pública y una privada — pegalas en la pestaña Cuentas y probá la conexión.",
            },
            {
              icon: "lucide:credit-card",
              color: "#10B981",
              titulo: "2. Cobrá",
              desc: "Desde caja o desde una factura abrís el cobro. El cliente paga en una página segura y el ERP se entera al instante.",
            },
            {
              icon: "lucide:scale",
              color: "#F59E0B",
              titulo: "3. Conciliá los depósitos",
              desc: "Cuando Novasis Pay deposita en tu cuenta bancaria, el sistema asienta automáticamente la entrada y la comisión.",
            },
          ]}
          notas={[
            { icon: "mdi:shield-lock", text: "Tus claves se guardan cifradas. Nunca volvemos a mostrarlas en pantalla." },
            { icon: "mdi:information", text: "Soporta varias pasarelas (Bancard, dLocal, Pagopar…). Podés elegir cuál usar por defecto." },
          ]}
        />

        <Tabs value={tab} onChange={(_, v) => setTab(v)} variant="scrollable">
          <Tab value="cuentas" label="Cuentas" icon={<Icon icon="lucide:key-round" width={16} />} iconPosition="start" />
          <Tab value="cobros" label="Cobros" icon={<Icon icon="lucide:credit-card" width={16} />} iconPosition="start" />
          <Tab value="conciliaciones" label="Conciliaciones" icon={<Icon icon="lucide:scale" width={16} />} iconPosition="start" />
        </Tabs>

        {tab === "cuentas" && <CuentasConfig canEditar={canEditar} />}
        {tab === "cobros" && <Cobros canCrear={canCrearCobro} />}
        {tab === "conciliaciones" && (
          <EmptyState
            icon="lucide:scale"
            title="Conciliaciones automáticas"
            description="Cuando Novasis Pay liquide depósitos a tu banco, vas a ver acá el matching contra tus extractos y los asientos generados."
          />
        )}
      </Stack>
    </Container>
  );
}