import { Icon } from "@iconify/react";
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Alert,
  AlertTitle,
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControlLabel,
  Grid,
  Link,
  ListItemText,
  MenuItem,
  Paper,
  Stack,
  Switch,
  Typography,
} from "@mui/material";
import { useEffect, useState } from "react";
import { FieldHint } from "../../_standards";
import {
  useNovasisPayConfigQuery,
  useNovasisPayProvidersQuery,
  useRegisterNovasisPayWebhookMutation,
  useTestNovasisPayConnectionMutation,
  useUpsertNovasisPayConfigMutation,
} from "../../../tanstack/NovasisPayStack";

const empty = {
  merchant_id: "",
  publishable_key: "",
  secret_key: "",
  webhook_secret: "",
  mode: "test",
  default_provider: "",
  default_country: "PY",
  api_base_url: "https://api.pay.novasis.com/v1",
  checkout_base_url: "https://pay.novasis.com/checkout",
  activo: false,
  qr_embebido: false,
};

// Países que la pasarela soporta hoy. Si más adelante agregamos, sumar acá.
const PAISES = [
  { code: "PY", flag: "🇵🇾", name: "Paraguay" },
  { code: "UY", flag: "🇺🇾", name: "Uruguay" },
  { code: "AR", flag: "🇦🇷", name: "Argentina" },
  { code: "BR", flag: "🇧🇷", name: "Brasil" },
  { code: "CL", flag: "🇨🇱", name: "Chile" },
  { code: "CO", flag: "🇨🇴", name: "Colombia" },
  { code: "MX", flag: "🇲🇽", name: "México" },
  { code: "PE", flag: "🇵🇪", name: "Perú" },
];

export function CuentasConfig({ canEditar }) {
  const { data: cfg, isLoading } = useNovasisPayConfigQuery();
  const { data: providersRes } = useNovasisPayProvidersQuery({ enabled: canEditar });
  const upsert = useUpsertNovasisPayConfigMutation();
  const testConn = useTestNovasisPayConnectionMutation();
  const registerWebhook = useRegisterNovasisPayWebhookMutation();
  const [form, setForm] = useState(empty);

  useEffect(() => {
    if (!cfg) return;
    setForm({
      merchant_id: cfg.merchant_id ?? "",
      publishable_key: cfg.publishable_key ?? "",
      secret_key: "",
      webhook_secret: "",
      mode: cfg.mode ?? "test",
      default_provider: cfg.default_provider ?? "",
      default_country: cfg.default_country ?? "PY",
      api_base_url: cfg.api_base_url ?? empty.api_base_url,
      checkout_base_url: cfg.checkout_base_url ?? empty.checkout_base_url,
      activo: !!cfg.activo,
      qr_embebido: !!cfg.qr_embebido,
    });
  }, [cfg]);

  const providers = providersRes?.providers ?? [];
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const [showAyudaClaves, setShowAyudaClaves] = useState(false);

  const handleSave = () => {
    const payload = {
      merchant_id: form.merchant_id || undefined,
      publishable_key: form.publishable_key || undefined,
      secret_key: form.secret_key || undefined,
      webhook_secret: form.webhook_secret || undefined,
      mode: form.mode,
      default_provider: form.default_provider || undefined,
      default_country: form.default_country || undefined,
      api_base_url: form.api_base_url || undefined,
      checkout_base_url: form.checkout_base_url || undefined,
      activo: form.activo,
      qr_embebido: form.qr_embebido,
    };
    upsert.mutate(payload, {
      onSuccess: () => setForm((f) => ({ ...f, secret_key: "", webhook_secret: "" })),
    });
  };

  if (isLoading) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", p: 6 }}>
        <CircularProgress size={28} />
      </Box>
    );
  }

  const disabled = !canEditar;
  const paisActual = PAISES.find((p) => p.code === form.default_country);
  const pkPrefix = form.mode === "live" ? "pk_live_" : "pk_test_";
  const skPrefix = form.mode === "live" ? "sk_live_" : "sk_test_";
  const pkMismatch =
    form.publishable_key.trim().length > 0 && !form.publishable_key.startsWith(pkPrefix);
  const skMismatch = form.secret_key.trim().length > 0 && !form.secret_key.startsWith(skPrefix);

  return (
    <Paper variant="outlined" sx={{ p: 3 }}>
      <Stack direction="row" alignItems="center" spacing={1.5} mb={2}>
        <Icon icon="lucide:credit-card" width={22} />
        <Typography variant="subtitle1" fontWeight={600}>
          Conectar Novasis Pay
        </Typography>
        {cfg && (
          <Chip
            size="small"
            color={cfg.activo ? "success" : "default"}
            label={cfg.activo ? "Conectado" : "Sin conectar"}
            icon={<Icon icon={cfg.activo ? "mdi:check-circle" : "mdi:close-circle"} width={14} />}
          />
        )}
        {cfg?.mode && (
          <Chip
            size="small"
            variant="outlined"
            label={cfg.mode === "live" ? "Producción" : "Pruebas"}
          />
        )}
      </Stack>

      <Alert
        severity="info"
        sx={{ mb: 2.5 }}
        action={
          <Button color="info" size="small" onClick={() => setShowAyudaClaves(true)}>
            ¿Cómo las consigo?
          </Button>
        }
      >
        <AlertTitle sx={{ mb: 0.5 }}>¿De dónde sacás las claves?</AlertTitle>
        Las claves las emite el equipo de <strong>Novasis Pay</strong> cuando se da de alta tu
        comercio. Pegalas acá tal como te las pasaron. Las guardamos cifradas — nunca volvemos a
        mostrarlas en pantalla.
      </Alert>

      <Dialog open={showAyudaClaves} onClose={() => setShowAyudaClaves(false)} maxWidth="sm" fullWidth>
        <DialogTitle>¿Cómo obtengo las claves de Novasis Pay?</DialogTitle>
        <DialogContent dividers>
          <Stack spacing={2}>
            <Typography variant="body2">
              Las claves de tu comercio las genera el equipo de Novasis Pay. Vos no las creás desde
              el ERP — las recibís y las pegás acá.
            </Typography>
            <Box>
              <Typography variant="subtitle2" gutterBottom>
                Si todavía no tenés cuenta
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Escribí a <Link href="mailto:soporte@novasis.pay">soporte@novasis.pay</Link> pidiendo
                el alta de tu comercio. Te van a pedir nombre, email de facturación y país, y te
                devuelven la <strong>clave pública</strong> y la <strong>clave privada</strong>.
              </Typography>
            </Box>
            <Box>
              <Typography variant="subtitle2" gutterBottom>
                Si ya te dieron de alta pero perdiste las claves
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Pediles que te <strong>generen unas nuevas</strong>. Por seguridad la clave privada
                no se puede volver a mostrar — siempre se emite una nueva y la anterior queda
                anulada.
              </Typography>
            </Box>
            <Box>
              <Typography variant="subtitle2" gutterBottom>
                Recomendado para arrancar
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Pedí primero las claves de <strong>Pruebas</strong>. Probás el flujo completo sin
                mover dinero real y, cuando esté funcionando, pedís las de <strong>Producción</strong>.
              </Typography>
            </Box>
            <Box>
              <Typography variant="subtitle2" gutterBottom>
                Clave de notificaciones (webhook)
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Es la que confirma el pago <strong>en tiempo real</strong>: cuando el cliente paga,
                Novasis Pay avisa al ERP y el pedido se confirma solo (crea el pedido y reserva
                stock). Va en <strong>Configuración avanzada</strong>. Tiene que ser <strong>la misma
                </strong> que figura en tu panel de Novasis Pay — si no coincide, las notificaciones
                se rechazan por seguridad. Sin ella el pago igual funciona, pero se confirma por
                consulta manual, no al instante.
              </Typography>
            </Box>
          </Stack>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setShowAyudaClaves(false)} variant="contained">
            Entendido
          </Button>
        </DialogActions>
      </Dialog>

      <Grid container spacing={2}>
        <Grid item xs={12} sm={6}>
          <FieldHint
            fullWidth
            label="Identificador del comercio"
            value={form.merchant_id}
            onChange={(e) => set("merchant_id", e.target.value)}
            hint="Te lo entrega Novasis Pay. Empieza con mer_…"
            placeholder="mer_…"
            disabled={disabled}
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <FieldHint
            select
            fullWidth
            label="Ambiente"
            value={form.mode}
            onChange={(e) => set("mode", e.target.value)}
            hint={
              form.mode === "test"
                ? "Pruebas: integrá sin mover dinero real."
                : "Producción: los cobros mueven dinero real del cliente."
            }
            disabled={disabled}
          >
            <MenuItem value="test">
              <ListItemText primary="Pruebas" secondary="Sin dinero real" />
            </MenuItem>
            <MenuItem value="live">
              <ListItemText primary="Producción" secondary="Cobros reales" />
            </MenuItem>
          </FieldHint>
        </Grid>

        <Grid item xs={12} sm={6}>
          <FieldHint
            fullWidth
            label="Clave pública"
            value={form.publishable_key}
            onChange={(e) => set("publishable_key", e.target.value)}
            hint={
              pkMismatch
                ? `Esta clave no empieza con ${pkPrefix} — revisá si no pegaste la privada por error.`
                : `Empieza con ${pkPrefix} La usa la página de pago. Es segura para mostrar al cliente.`
            }
            error={pkMismatch}
            placeholder={`${pkPrefix}…`}
            disabled={disabled}
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <FieldHint
            fullWidth
            type="password"
            label={`Clave privada${cfg?.tiene_secret_key ? " (ya guardada)" : ""}`}
            value={form.secret_key}
            onChange={(e) => set("secret_key", e.target.value)}
            hint={
              skMismatch
                ? `Esta clave no empieza con ${skPrefix} — revisá si no pegaste la pública por error.`
                : cfg?.tiene_secret_key
                ? "Ya está guardada. Dejá vacío para no cambiarla."
                : `Empieza con ${skPrefix} Es la clave secreta de tu comercio. No la compartas.`
            }
            error={skMismatch}
            placeholder={cfg?.secret_key_masked ?? `${skPrefix}…`}
            disabled={disabled}
          />
        </Grid>

        <Grid item xs={12} sm={6}>
          <FieldHint
            select
            fullWidth
            label="País principal"
            value={form.default_country}
            onChange={(e) => set("default_country", e.target.value)}
            hint="Define la moneda y los métodos de pago disponibles por defecto."
            disabled={disabled}
            SelectProps={{
              renderValue: () =>
                paisActual ? `${paisActual.flag}  ${paisActual.name}` : form.default_country,
            }}
          >
            {PAISES.map((p) => (
              <MenuItem key={p.code} value={p.code}>
                <Box component="span" sx={{ mr: 1.5, fontSize: 20 }}>
                  {p.flag}
                </Box>
                <ListItemText primary={p.name} secondary={p.code} />
              </MenuItem>
            ))}
          </FieldHint>
        </Grid>
        <Grid item xs={12} sm={6}>
          <FieldHint
            select
            fullWidth
            label="Pasarela preferida"
            value={form.default_provider}
            onChange={(e) => set("default_provider", e.target.value)}
            hint="Por qué pasarela enrutamos los cobros por defecto."
            disabled={disabled || providers.length === 0}
          >
            <MenuItem value="">— Sin preferencia —</MenuItem>
            {providers.map((p) => (
              <MenuItem key={p.id} value={p.id} disabled={!p.available}>
                {p.displayName} {!p.available && "(próximamente)"}
              </MenuItem>
            ))}
          </FieldHint>
        </Grid>

        <Grid item xs={12}>
          <FormControlLabel
            control={
              <Switch
                checked={form.activo}
                onChange={(e) => set("activo", e.target.checked)}
                disabled={disabled}
              />
            }
            label={
              <Stack>
                <Typography variant="body2" fontWeight={600}>
                  Activar Novasis Pay para esta empresa
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  Mientras esté apagado, las pantallas de cobro no van a ofrecer esta pasarela.
                </Typography>
              </Stack>
            }
          />
        </Grid>

        <Grid item xs={12}>
          <Accordion variant="outlined" sx={{ mt: 1 }}>
            <AccordionSummary
              expandIcon={<Icon icon="mdi:chevron-down" width={20} />}
            >
              <Stack direction="row" alignItems="center" spacing={1}>
                <Icon icon="mdi:tune-variant" width={18} />
                <Typography variant="body2" fontWeight={600}>
                  Configuración avanzada
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  · solo si te lo pidió soporte
                </Typography>
              </Stack>
            </AccordionSummary>
            <AccordionDetails>
              <Grid container spacing={2}>
                <Grid item xs={12} sm={6}>
                  <FieldHint
                    fullWidth
                    type="password"
                    label={`Clave de notificaciones${cfg?.tiene_webhook_secret ? " (ya guardada)" : ""}`}
                    value={form.webhook_secret}
                    onChange={(e) => set("webhook_secret", e.target.value)}
                    hint="Confirma el pago en tiempo real. Debe coincidir con la del panel de Novasis Pay; sin ella el pago se confirma por consulta manual."
                    placeholder="whsec_…"
                    disabled={disabled}
                  />
                  <Button
                    size="small"
                    variant="text"
                    startIcon={<Icon icon="mdi:webhook" width={16} />}
                    disabled={disabled || !cfg?.tiene_secret_key || !cfg?.activo || registerWebhook.isPending}
                    onClick={() => registerWebhook.mutate()}
                    sx={{ mt: 0.5 }}
                  >
                    {registerWebhook.isPending
                      ? "Registrando…"
                      : cfg?.tiene_webhook_secret
                        ? "Volver a registrar webhook"
                        : "Registrar webhook automáticamente"}
                  </Button>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <FieldHint
                    fullWidth
                    label="Dirección del servidor de Novasis Pay"
                    value={form.api_base_url}
                    onChange={(e) => set("api_base_url", e.target.value)}
                    hint="Cambialo solo si soporte te indica usar otro servidor."
                    disabled={disabled}
                  />
                </Grid>
                <Grid item xs={12} sm={6}>
                  <FieldHint
                    fullWidth
                    label="Dirección de la página de pago"
                    value={form.checkout_base_url}
                    onChange={(e) => set("checkout_base_url", e.target.value)}
                    hint="A dónde se redirige al cliente para completar el pago."
                    disabled={disabled}
                  />
                </Grid>
                <Grid item xs={12}>
                  <FormControlLabel
                    control={
                      <Switch
                        checked={form.qr_embebido}
                        onChange={(e) => set("qr_embebido", e.target.checked)}
                        disabled={disabled}
                      />
                    }
                    label={
                      <Stack>
                        <Typography variant="body2" fontWeight={600}>
                          Mostrar el QR embebido en la pantalla de cobro
                        </Typography>
                        <Typography variant="caption" color="text.secondary">
                          Al pagar con QR, dibujamos el código dentro de nuestra pantalla en lugar de
                          abrir la página del proveedor. Útil para caja y para la app de cobradores.
                          Requiere provider con QR directo (ej. Dpago en producción).
                        </Typography>
                      </Stack>
                    }
                  />
                </Grid>
              </Grid>
            </AccordionDetails>
          </Accordion>
        </Grid>
      </Grid>

      <Stack direction="row" spacing={1.5} justifyContent="flex-end" mt={3}>
        <Button
          variant="outlined"
          startIcon={<Icon icon="mdi:lan-connect" width={18} />}
          disabled={disabled || !cfg?.tiene_secret_key || !cfg?.activo || testConn.isPending}
          onClick={() => testConn.mutate()}
        >
          {testConn.isPending ? "Probando…" : "Probar conexión"}
        </Button>
        <Button
          variant="contained"
          startIcon={<Icon icon="mdi:content-save" width={18} />}
          disabled={disabled || upsert.isPending}
          onClick={handleSave}
        >
          {upsert.isPending ? "Guardando…" : "Guardar"}
        </Button>
      </Stack>
    </Paper>
  );
}