import { Icon } from "@iconify/react";
import {
  Alert,
  AlertTitle,
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  IconButton,
  InputAdornment,
  LinearProgress,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useRef, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import {
  fetchDocumentoComprobante,
  subirComprobante,
  suscripcionesQueries,
} from "../../../api/suscripciones.service";
import { usePermission } from "../../../hooks/usePermission";
import { AccesoRestringido } from "../../common/AccesoRestringido";
import { PlanUsageCard } from "../suscripciones/PlanUsageCard";

const estadoColor = {
  Activo: "success",
  EnGracia: "warning",
  Pausado: "info",
  Expirado: "error",
  Cancelado: "default",
};

const estadoPagoColor = {
  Pendiente: "warning",
  Aprobado: "success",
  Rechazado: "error",
};

const ACCEPTED_TYPES = ".jpg,.jpeg,.png,.pdf";
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB

export function SuscripcionConfig({ bypassPermissionCheck = false } = {}) {
  const queryClient = useQueryClient();
  const [showHistory, setShowHistory] = useState(false);
  const [uploadDialog, setUploadDialog] = useState(false);
  const [uploadFile, setUploadFile] = useState(null);
  const [uploadMonto, setUploadMonto] = useState("");
  const [uploadObs, setUploadObs] = useState("");
  const [previewDoc, setPreviewDoc] = useState(null);
  const [previewLoading, setPreviewLoading] = useState(false);
  const fileInputRef = useRef(null);

  const { can: canAdm } = usePermission("ADMINISTRACION");
  const canReadSuscripcion = bypassPermissionCheck || canAdm("ADM_SUSC_SUSCRIPCION_VER");
  const canProcessComprobante = bypassPermissionCheck || canAdm("ADM_SUSC_SUSCRIPCION_RENOVAR");

  const {
    data: suscData,
    isLoading,
    error,
  } = useQuery(suscripcionesQueries.miSuscripcion());

  const { data: pagosData, isLoading: loadingPagos } = useQuery({
    ...suscripcionesQueries.misPagos(10),
    enabled: showHistory && canReadSuscripcion,
  });

  const uploadMutation = useMutation({
    mutationFn: ({ suscripcionId, file, observacion, monto }) =>
      subirComprobante(suscripcionId, file, observacion, monto),
    onSuccess: () => {
      toast.success(
        "Comprobante enviado correctamente. Tu holding lo revisará pronto.",
      );
      closeUpload();
      queryClient.invalidateQueries({ queryKey: ["mis-pagos"] });
      queryClient.invalidateQueries({ queryKey: ["mi-suscripcion"] });
    },
    onError: (err) =>
      toast.error(err.response?.data?.message || "Error al enviar comprobante"),
  });

  const closeUpload = () => {
    setUploadDialog(false);
    setUploadFile(null);
    setUploadMonto("");
    setUploadObs("");
  };

  const handleFileSelect = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > MAX_FILE_SIZE) {
      toast.error("El archivo no puede superar 10MB");
      return;
    }
    setUploadFile(file);
  };

  const handleUpload = () => {
    if (!uploadFile) {
      toast.error("Seleccione un archivo");
      return;
    }
    uploadMutation.mutate({
      suscripcionId: suscData.suscripcion.id,
      file: uploadFile,
      observacion: uploadObs || undefined,
      monto: uploadMonto ? Number(uploadMonto) : undefined,
    });
  };

  if (!canReadSuscripcion && !bypassPermissionCheck) {
    return <AccesoRestringido modulo="SUSCRIPCIONES" />;
  }

  if (isLoading) {
    return (
      <Container>
        <Box display="flex" alignItems="center" justifyContent="center" py={6}>
          <CircularProgress size={32} sx={{ mr: 2 }} />
          <Typography color="text.secondary">
            Cargando suscripción...
          </Typography>
        </Box>
      </Container>
    );
  }

  if (error) {
    return (
      <Container>
        <Alert severity="error">
          Error al cargar la información de suscripción
        </Alert>
      </Container>
    );
  }

  if (!suscData?.tiene_suscripcion) {
    return (
      <Container>
        <Alert severity="info" sx={{ mb: 2 }}>
          <AlertTitle>Sin suscripción</AlertTitle>
          No tienes una suscripción activa. Contacta a tu proveedor para activar
          un plan.
        </Alert>
      </Container>
    );
  }

  const { suscripcion, vencida, en_gracia, dias_restantes, bloqueada } =
    suscData;

  const handleVerDocumento = async (comprobanteId) => {
    setPreviewLoading(true);
    try {
      const doc = await fetchDocumentoComprobante(comprobanteId);
      setPreviewDoc(doc);
    } catch {
      toast.error("Error al cargar el documento");
    } finally {
      setPreviewLoading(false);
    }
  };

  const closePreview = () => {
    if (previewDoc?.url) URL.revokeObjectURL(previewDoc.url);
    setPreviewDoc(null);
  };

  const openUploadWithDefaults = () => {
    const monto = suscripcion.costo_mensual || suscripcion.plan?.precio || "";
    setUploadMonto(monto ? String(monto) : "");
    setUploadDialog(true);
  };

  return (
    <Container>
      {/* Alertas */}
      {bloqueada && (
        <Alert severity="error" sx={{ mb: 2 }}>
          <AlertTitle>Suscripción bloqueada</AlertTitle>
          Tu suscripción ha vencido. No puedes realizar operaciones hasta
          renovar tu plan. Envía un comprobante de pago para reactivar.
        </Alert>
      )}
      {en_gracia && (
        <Alert severity="warning" sx={{ mb: 2 }}>
          <AlertTitle>Período de gracia</AlertTitle>
          Tu suscripción venció. Tienes {dias_restantes} día(s) de gracia
          restantes para renovar. Envía tu comprobante cuanto antes.
        </Alert>
      )}
      {!vencida && !en_gracia && dias_restantes <= 7 && dias_restantes > 0 && (
        <Alert severity="info" sx={{ mb: 2 }}>
          Tu suscripción vence en {dias_restantes} día(s). Recuerda renovar a
          tiempo.
        </Alert>
      )}

      {/* Card principal */}
      <Paper elevation={0} sx={{ border: 1, borderColor: "divider", mb: 3 }}>
        <Box p={3}>
          <Box
            display="flex"
            justifyContent="space-between"
            alignItems="center"
            mb={2}
          >
            <Typography variant="h6" fontWeight={600}>
              <Icon
                icon="lucide:credit-card"
                style={{ verticalAlign: "middle", marginRight: 8 }}
              />
              Mi Suscripción
            </Typography>
            <Box display="flex" gap={1} alignItems="center">
              <Chip
                label={suscripcion.estado}
                color={estadoColor[suscripcion.estado] || "default"}
                size="small"
              />
            </Box>
          </Box>

          <Divider sx={{ mb: 2 }} />

          {/* Plan info */}
          {suscripcion.plan && (
            <Box mb={2}>
              <Typography variant="subtitle2" color="text.secondary">
                Plan
              </Typography>
              <Typography variant="h6" fontWeight={600}>
                {suscripcion.plan.descripcion || suscripcion.plan.codigo}
              </Typography>
              {suscripcion.plan.precio && (
                <Typography variant="body2" color="text.secondary">
                  {Number(suscripcion.plan.precio).toLocaleString("es-PY")} Gs.
                  / {suscripcion.plan.tipo_ciclo || "mensual"}
                </Typography>
              )}
              {suscripcion.costo_mensual != null && (
                <Box
                  mt={1}
                  display="inline-flex"
                  alignItems="center"
                  gap={0.75}
                  sx={{
                    background: () =>
                      Number(suscripcion.costo_mensual) >
                      Number(suscripcion.plan?.precio ?? 0)
                        ? "rgba(245,158,11,0.1)"
                        : "rgba(34,197,94,0.1)",
                    border: "1px solid",
                    borderColor: () =>
                      Number(suscripcion.costo_mensual) >
                      Number(suscripcion.plan?.precio ?? 0)
                        ? "rgba(245,158,11,0.3)"
                        : "rgba(34,197,94,0.3)",
                    borderRadius: "8px",
                    px: 1.25,
                    py: 0.5,
                  }}
                >
                  <Icon
                    icon="lucide:wallet"
                    style={{
                      fontSize: 14,
                      color:
                        Number(suscripcion.costo_mensual) >
                        Number(suscripcion.plan?.precio ?? 0)
                          ? "#f59e0b"
                          : "#22c55e",
                    }}
                  />
                  <Typography
                    variant="body2"
                    fontWeight={700}
                    color={
                      Number(suscripcion.costo_mensual) >
                      Number(suscripcion.plan?.precio ?? 0)
                        ? "#f59e0b"
                        : "#22c55e"
                    }
                  >
                    Próximo pago:{" "}
                    {Number(suscripcion.costo_mensual).toLocaleString("es-PY")}{" "}
                    Gs.
                  </Typography>
                  {Number(suscripcion.costo_mensual) >
                    Number(suscripcion.plan?.precio ?? 0) && (
                    <Tooltip title="Incluye módulos adicionales contratados">
                      <Icon
                        icon="lucide:info"
                        style={{
                          fontSize: 13,
                          color: "#f59e0b",
                          cursor: "help",
                        }}
                      />
                    </Tooltip>
                  )}
                </Box>
              )}
            </Box>
          )}

          {/* Fechas */}
          <InfoGrid>
            <InfoItem>
              <Icon icon="lucide:calendar" />
              <div>
                <Typography variant="caption" color="text.secondary">
                  Inicio
                </Typography>
                <Typography variant="body2" fontWeight={500}>
                  {suscripcion.fecha_inicio || "-"}
                </Typography>
              </div>
            </InfoItem>
            <InfoItem>
              <Icon icon="lucide:calendar-check" />
              <div>
                <Typography variant="caption" color="text.secondary">
                  Vencimiento
                </Typography>
                <Typography variant="body2" fontWeight={500}>
                  {suscripcion.fecha_fin || "-"}
                </Typography>
              </div>
            </InfoItem>
            <InfoItem>
              <Icon icon="lucide:clock" />
              <div>
                <Typography variant="caption" color="text.secondary">
                  Próximo cobro
                </Typography>
                <Typography variant="body2" fontWeight={500}>
                  {suscripcion.fecha_prox_cobro || "-"}
                </Typography>
              </div>
            </InfoItem>
            <InfoItem>
              <Icon icon="lucide:timer" />
              <div>
                <Typography variant="caption" color="text.secondary">
                  Días restantes
                </Typography>
                <Typography
                  variant="body2"
                  fontWeight={600}
                  color={
                    dias_restantes <= 3
                      ? "error.main"
                      : dias_restantes <= 7
                        ? "warning.main"
                        : "text.primary"
                  }
                >
                  {dias_restantes}
                </Typography>
              </div>
            </InfoItem>
          </InfoGrid>

          {/* Módulos */}
          {suscripcion.modulos?.length > 0 && (
            <Box mt={2}>
              <Typography
                variant="subtitle2"
                color="text.secondary"
                gutterBottom
              >
                Módulos incluidos
              </Typography>
              <Box display="flex" flexWrap="wrap" gap={0.5}>
                {suscripcion.modulos.map((m) => (
                  <Chip
                    key={m?.id}
                    label={m?.descripcion || m?.codigo}
                    size="small"
                    variant="outlined"
                  />
                ))}
              </Box>
            </Box>
          )}
        </Box>
      </Paper>

      {/* Uso del plan */}
      <Paper
        elevation={0}
        sx={{ border: 1, borderColor: "divider", mb: 3, p: 3 }}
      >
        <PlanUsageCard />
      </Paper>

      {/* Enviar comprobante de pago */}
      <Paper elevation={0} sx={{ border: 1, borderColor: "divider", mb: 3 }}>
        <Box p={3}>
          <Box
            display="flex"
            justifyContent="space-between"
            alignItems="center"
          >
            <Box>
              <Typography variant="h6" fontWeight={600}>
                <Icon
                  icon="lucide:upload"
                  style={{ verticalAlign: "middle", marginRight: 8 }}
                />
                Enviar Comprobante de Pago
              </Typography>
              <Typography variant="body2" color="text.secondary" mt={0.5}>
                Adjuntá tu comprobante de transferencia o pago para que tu
                proveedor valide y renueve tu suscripción.
              </Typography>
            </Box>
            {canProcessComprobante && (
              <Button
                variant="contained"
                size="small"
                startIcon={<Icon icon="lucide:upload" />}
                onClick={openUploadWithDefaults}
                disabled={!suscripcion.id}
              >
                Enviar comprobante
              </Button>
            )}
          </Box>

          <Box mt={2}>
            <Typography variant="caption" color="text.secondary">
              <Icon
                icon="lucide:info"
                style={{
                  verticalAlign: "middle",
                  marginRight: 4,
                  fontSize: 14,
                }}
              />
              Formatos aceptados: JPG, PNG o PDF · Tamaño máximo: 10 MB
            </Typography>
          </Box>
        </Box>
      </Paper>

      {/* Historial de pagos */}
      <Paper elevation={0} sx={{ border: 1, borderColor: "divider" }}>
        <Box p={3}>
          <Box
            display="flex"
            justifyContent="space-between"
            alignItems="center"
            mb={showHistory ? 2 : 0}
          >
            <Typography variant="h6" fontWeight={600}>
              <Icon
                icon="lucide:receipt"
                style={{ verticalAlign: "middle", marginRight: 8 }}
              />
              Historial de Pagos
            </Typography>
            {canReadSuscripcion && (
              <Button
                size="small"
                variant="outlined"
                onClick={() => setShowHistory(!showHistory)}
                startIcon={
                  <Icon
                    icon={showHistory ? "lucide:chevron-up" : "lucide:eye"}
                  />
                }
              >
                {showHistory ? "Ocultar" : "Ver historial"}
              </Button>
            )}
          </Box>

          {showHistory && (
            <>
              <Divider sx={{ mb: 2 }} />
              {loadingPagos ? (
                <Box display="flex" justifyContent="center" py={3}>
                  <CircularProgress size={24} />
                </Box>
              ) : !pagosData?.length ? (
                <Box py={4} textAlign="center">
                  <Icon
                    icon="lucide:inbox"
                    style={{ fontSize: 36, opacity: 0.3, marginBottom: 4 }}
                  />
                  <Typography
                    variant="body2"
                    color="text.secondary"
                    display="block"
                  >
                    No hay pagos registrados aún
                  </Typography>
                  <Typography variant="caption" color="text.secondary">
                    Tus comprobantes enviados aparecerán aquí con su estado de
                    revisión
                  </Typography>
                </Box>
              ) : (
                <TableContainer>
                  <Table size="small">
                    <TableHead>
                      <TableRow>
                        <TableCell>Fecha</TableCell>
                        <TableCell>Estado</TableCell>
                        <TableCell>Monto</TableCell>
                        <TableCell>Observación</TableCell>
                        <TableCell>Revisado</TableCell>
                        <TableCell align="center">Doc</TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {pagosData.map((pago) => (
                        <TableRow key={pago.id} hover>
                          <TableCell>
                            <Typography variant="caption">
                              {pago.created_at}
                            </Typography>
                          </TableCell>
                          <TableCell>
                            <Chip
                              label={pago.estado}
                              color={estadoPagoColor[pago.estado] || "default"}
                              size="small"
                            />
                          </TableCell>
                          <TableCell>
                            {pago.monto
                              ? `${Number(pago.monto).toLocaleString("es-PY")} Gs.`
                              : "-"}
                          </TableCell>
                          <TableCell>
                            <Tooltip title={pago.observacion || ""} arrow>
                              <Typography
                                variant="caption"
                                sx={{
                                  maxWidth: 200,
                                  display: "block",
                                  overflow: "hidden",
                                  textOverflow: "ellipsis",
                                  whiteSpace: "nowrap",
                                }}
                              >
                                {pago.observacion || "-"}
                              </Typography>
                            </Tooltip>
                            {pago.motivo_rechazo && (
                              <Tooltip title={pago.motivo_rechazo} arrow>
                                <Typography
                                  variant="caption"
                                  color="error"
                                  display="block"
                                >
                                  Rechazo: {pago.motivo_rechazo}
                                </Typography>
                              </Tooltip>
                            )}
                          </TableCell>
                          <TableCell>
                            <Typography variant="caption">
                              {pago.fecha_revision || "-"}
                            </Typography>
                          </TableCell>
                          <TableCell align="center">
                            {pago.mime_type && canReadSuscripcion && (
                              <Tooltip title="Ver documento adjunto">
                                <Button
                                  size="small"
                                  onClick={() => handleVerDocumento(pago.id)}
                                >
                                  <Icon icon="lucide:file-search" />
                                </Button>
                              </Tooltip>
                            )}
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </TableContainer>
              )}
            </>
          )}
        </Box>
      </Paper>

      {/* Dialog Subir Comprobante */}
      <Dialog open={uploadDialog} onClose={closeUpload} maxWidth="sm" fullWidth>
        <DialogTitle>
          <Icon
            icon="lucide:upload"
            style={{ verticalAlign: "middle", marginRight: 8 }}
          />
          Enviar Comprobante de Pago
        </DialogTitle>
        <DialogContent>
          <Alert
            severity="info"
            sx={{ mb: 2, mt: 0.5 }}
            icon={<Icon icon="lucide:info" />}
          >
            Adjuntá una captura o PDF de tu transferencia bancaria o comprobante
            de pago. Tu proveedor lo revisará y renovará tu suscripción
            automáticamente.
          </Alert>

          {/* Drag & drop / file selector */}
          <input
            ref={fileInputRef}
            type="file"
            accept={ACCEPTED_TYPES}
            hidden
            onChange={handleFileSelect}
          />
          <UploadZone
            onClick={() => fileInputRef.current?.click()}
            $hasFile={!!uploadFile}
          >
            {uploadFile ? (
              <Box textAlign="center">
                <Icon
                  icon={
                    uploadFile.type === "application/pdf"
                      ? "lucide:file-text"
                      : "lucide:image"
                  }
                  style={{ fontSize: 36, color: "#10b981" }}
                />
                <Typography variant="body2" fontWeight={500} mt={0.5}>
                  {uploadFile.name}
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  {(uploadFile.size / 1024).toFixed(0)} KB · Click para cambiar
                </Typography>
              </Box>
            ) : (
              <Box textAlign="center">
                <Icon
                  icon="lucide:cloud-upload"
                  style={{ fontSize: 36, opacity: 0.5 }}
                />
                <Typography variant="body2" color="text.secondary" mt={0.5}>
                  Click para seleccionar archivo
                </Typography>
                <Typography variant="caption" color="text.secondary">
                  JPG, PNG o PDF · Máximo 10 MB
                </Typography>
              </Box>
            )}
          </UploadZone>

          <TextField
            fullWidth
            label="Monto del pago"
            type="number"
            value={uploadMonto}
            onChange={(e) => setUploadMonto(e.target.value)}
            sx={{ mb: 2 }}
            helperText="Monto que transferiste o pagaste"
            InputProps={{
              endAdornment: <InputAdornment position="end">Gs.</InputAdornment>,
            }}
          />

          <TextField
            fullWidth
            label="Observación (opcional)"
            placeholder="Ej: Transferencia bancaria #12345, Pago en ventanilla..."
            multiline
            rows={2}
            value={uploadObs}
            onChange={(e) => setUploadObs(e.target.value)}
            helperText="Agrega información adicional que ayude a tu proveedor a identificar el pago"
          />

          {uploadMutation.isPending && <LinearProgress sx={{ mt: 2 }} />}
        </DialogContent>
        <DialogActions>
          <Button onClick={closeUpload} disabled={uploadMutation.isPending}>
            Cancelar
          </Button>
          <Button
            variant="contained"
            onClick={handleUpload}
            disabled={uploadMutation.isPending || !uploadFile}
            startIcon={
              uploadMutation.isPending ? (
                <CircularProgress size={16} />
              ) : (
                <Icon icon="lucide:send" />
              )
            }
          >
            {uploadMutation.isPending ? "Enviando..." : "Enviar Comprobante"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Modal Preview Documento */}
      <Dialog
        open={!!previewDoc}
        onClose={closePreview}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Box display="flex" alignItems="center" gap={1}>
            <Icon icon="lucide:file-search" />
            Vista previa del documento
          </Box>
          <IconButton size="small" onClick={closePreview}>
            <Icon icon="lucide:x" />
          </IconButton>
        </DialogTitle>
        <DialogContent sx={{ p: 0, minHeight: 400 }}>
          {previewLoading ? (
            <Box
              display="flex"
              justifyContent="center"
              alignItems="center"
              py={8}
            >
              <CircularProgress />
            </Box>
          ) : previewDoc?.mimeType?.startsWith("image/") ? (
            <Box display="flex" justifyContent="center" p={2}>
              <img
                src={previewDoc.url}
                alt="Comprobante"
                style={{
                  maxWidth: "100%",
                  maxHeight: "70vh",
                  objectFit: "contain",
                }}
              />
            </Box>
          ) : previewDoc?.mimeType === "application/pdf" ? (
            <iframe
              src={previewDoc.url}
              title="Comprobante PDF"
              style={{ width: "100%", height: "70vh", border: "none" }}
            />
          ) : (
            <Box textAlign="center" py={4}>
              <Typography color="text.secondary">
                No se puede previsualizar este tipo de archivo
              </Typography>
              <Button
                sx={{ mt: 1 }}
                variant="outlined"
                onClick={() => window.open(previewDoc?.url, "_blank")}
              >
                Descargar archivo
              </Button>
            </Box>
          )}
        </DialogContent>
      </Dialog>
    </Container>
  );
}

const Container = styled.div`
  max-width: 900px;
  width: 100%;
`;

const InfoGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
`;

const InfoItem = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  svg {
    margin-top: 2px;
    color: ${({ theme }) => theme.palette?.primary?.main || "#1976d2"};
    font-size: 18px;
  }
`;

const UploadZone = styled.div`
  border: 2px dashed
    ${({ $hasFile }) => ($hasFile ? "#10b981" : "rgba(255, 255, 255, 0.2)")};
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  margin-bottom: 16px;
  background: ${({ $hasFile }) =>
    $hasFile ? "rgba(16, 185, 129, 0.05)" : "transparent"};

  &:hover {
    border-color: ${({ $hasFile }) => ($hasFile ? "#10b981" : "#1976d2")};
    background: rgba(25, 118, 210, 0.04);
  }
`;