import { Icon } from "@iconify/react";
import { Autocomplete, CircularProgress, Dialog, DialogContent, FormControl, IconButton, InputLabel, MenuItem, Select, TextField, Tooltip } from "@mui/material";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import { usePermission } from "../../hooks/usePermission";
import {
  getBalanceComprobacionExcel,
  getBalanceComprobacionPdf,
  getBalanceGeneralExcel,
  getBalanceGeneralPdf,
  getEstadoResultadosExcel,
  getEstadoResultadosPdf,
  getLibroDiarioExcel,
  getLibroDiarioPdf,
  getLibroMayorExcel,
  getLibroMayorPdf,
} from "../../api/contabilidad.service";
import {
  useBalanceComprobacionQuery,
  useBalanceGeneralQuery,
  useCentrosCostoQuery,
  useEjerciciosQuery,
  useEstadoResultadosQuery,
  usePeriodosQuery,
  usePlanCuentasQuery,
} from "../../tanstack/ContabilidadStack";

const MESES = ["", "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
const fmtGs = (v) => `Gs. ${Number(v || 0).toLocaleString("es-PY", { maximumFractionDigits: 0 })}`;
const fmtDate = (d) => {
  if (!d) return "—";
  const s = (typeof d === "string" ? d : new Date(d).toISOString()).substring(0, 10);
  const [y, m, day] = s.split("-");
  return `${+day}/${+m}/${y}`;
};

function ReportCard({ icon, title, description, help, children }) {
  return (
    <Card>
      <CardHeader>
        <CardIcon>
          <Icon icon={icon} />
        </CardIcon>
        <div>
          <CardTitle>{title}</CardTitle>
          <CardDesc>{description}</CardDesc>
        </div>
      </CardHeader>
      {help && (
        <HelpNote>
          <Icon icon="lucide:lightbulb" />
          {help}
        </HelpNote>
      )}
      {children}
    </Card>
  );
}

function PdfExcelBtns({ onPdf, onExcel, loading, pdfLoading, excelLoading }) {
  return (
    <BtnRow>
      <ExportBtn onClick={onPdf} disabled={loading || pdfLoading}>
        {pdfLoading ? <CircularProgress size={13} /> : <Icon icon="lucide:file-text" />}
        PDF
      </ExportBtn>
      {onExcel && (
        <ExportBtn $excel onClick={onExcel} disabled={loading || excelLoading}>
          {excelLoading ? <CircularProgress size={13} /> : <Icon icon="lucide:table-2" />}
          Excel
        </ExportBtn>
      )}
    </BtnRow>
  );
}

export function ReportesContablesTab() {
  const { can } = usePermission("CONTABILIDAD");
  const { data: ejercicios = [] } = useEjerciciosQuery();
  const [ejId, setEjId] = useState("");
  const [perId, setPerId] = useState("");
  const [desde, setDesde] = useState("");
  const [hasta, setHasta] = useState("");
  const [loading, setLoading] = useState({});
  const [pdfModal, setPdfModal] = useState({ open: false, url: null, title: "" });
  const [cuentaLM, setCuentaLM] = useState(null);
  const [ccId, setCcId] = useState("");

  const { data: periodos = [] } = usePeriodosQuery(ejId || undefined);

  const autoInitDone = useRef(false);
  const anioActual = new Date().getFullYear();
  const mesActual = new Date().getMonth() + 1;

  useEffect(() => {
    if (autoInitDone.current || ejercicios.length === 0) return;
    const ejActual = ejercicios.find((e) => e.anio === anioActual);
    if (ejActual) setEjId(ejActual.id);
  }, [ejercicios]);

  useEffect(() => {
    if (autoInitDone.current || periodos.length === 0) return;
    const perActual = periodos.find((p) => p.mes === mesActual);
    if (perActual) {
      setPerId(perActual.id);
      autoInitDone.current = true;
    }
  }, [periodos]);

  const { data: planCuentasRaw = [] } = usePlanCuentasQuery();
  const cuentasOpciones = Array.isArray(planCuentasRaw) ? planCuentasRaw : [];
  const { data: centrosCosto = [] } = useCentrosCostoQuery();
  const centrosActivos = centrosCosto.filter((c) => c.activo !== false);

  const filters = { ejercicioId: ejId || undefined, periodoId: perId || undefined };
  const erFilters = { ...filters, centroCostoId: ccId || undefined };
  const { data: balance, isLoading: loadBalance } = useBalanceComprobacionQuery(filters);
  const { data: resultados, isLoading: loadResultados } = useEstadoResultadosQuery(erFilters);
  const { data: balGen, isLoading: loadBalGen } = useBalanceGeneralQuery(filters);

  const periodoLabel = perId
    ? periodos.find((p) => p.id === perId)
      ? `${MESES[periodos.find((p) => p.id === perId).mes]} ${periodos.find((p) => p.id === perId).anio}`
      : ""
    : ejId
      ? `Ejercicio ${ejercicios.find((e) => e.id === ejId)?.anio || ""}`
      : "Seleccionado";

  const doAction = async (key, fn, title = "Reporte") => {
    setLoading((l) => ({ ...l, [key]: true }));
    try {
      const result = await fn();
      if (typeof result === "string" && result.startsWith("blob:")) {
        setPdfModal({ open: true, url: result, title });
      }
    } catch (e) {
      toast.error("Error al generar el reporte");
    } finally {
      setLoading((l) => ({ ...l, [key]: false }));
    }
  };

  const closePdf = () => {
    if (pdfModal.url) URL.revokeObjectURL(pdfModal.url);
    setPdfModal({ open: false, url: null, title: "" });
  };

  const commonFilters = { ejercicioId: ejId || undefined, periodoId: perId || undefined, titulo: undefined, periodo: periodoLabel };
  const erPdfFilters = { ...commonFilters, centroCostoId: ccId || undefined };
  const libroFilters = { periodoId: perId || undefined, desde: desde || undefined, hasta: hasta || undefined, periodo: periodoLabel, centroCostoId: ccId || undefined };

  if (!can("CONT_REP_REPORTE_VER"))
    return (
      <Wrapper style={{ display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 12, color: "#64748b", padding: 48 }}>
        <Icon icon="lucide:shield-off" style={{ fontSize: 40 }} />
        <span>No tenés permiso para ver reportes contables.</span>
      </Wrapper>
    );

  return (
    <Wrapper>
      <TopBar>
        <PageTitle>
          <Icon icon="lucide:chart-bar" /> Reportes Contables
        </PageTitle>
      </TopBar>

      {/* Filtros globales */}
      <FiltersPanel>
        <FilterTitle>
          <Icon icon="lucide:filter" /> Período a reportar
        </FilterTitle>
        <FiltersRow>
          <FormControl size="small" sx={{ minWidth: 130 }}>
            <InputLabel>Ejercicio</InputLabel>
            <Select
              label="Ejercicio"
              value={ejId}
              onChange={(e) => {
                setEjId(e.target.value);
                setPerId("");
              }}
            >
              <MenuItem value="">Todos</MenuItem>
              {ejercicios.map((e) => (
                <MenuItem key={e.id} value={e.id}>
                  {e.anio}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 180 }} disabled={!ejId}>
            <InputLabel>Período</InputLabel>
            <Select label="Período" value={perId} onChange={(e) => setPerId(e.target.value)}>
              <MenuItem value="">Todo el ejercicio</MenuItem>
              {periodos.map((p) => (
                <MenuItem key={p.id} value={p.id}>
                  {MESES[p.mes]} {p.anio}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <Separator>ó rango manual</Separator>
          <TextField size="small" label="Desde" type="date" value={desde} onChange={(e) => setDesde(e.target.value)} InputLabelProps={{ shrink: true }} />
          <TextField size="small" label="Hasta" type="date" value={hasta} onChange={(e) => setHasta(e.target.value)} InputLabelProps={{ shrink: true }} />
          {centrosActivos.length > 0 && (
            <>
              <Separator>· C. Costo</Separator>
              <FormControl size="small" sx={{ minWidth: 180 }}>
                <InputLabel>Centro de Costo</InputLabel>
                <Select label="Centro de Costo" value={ccId} onChange={(e) => setCcId(e.target.value)}>
                  <MenuItem value="">Todos los centros</MenuItem>
                  {centrosActivos.map((c) => (
                    <MenuItem key={c.id} value={c.id}>
                      {c.codigo} — {c.descripcion}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </>
          )}
        </FiltersRow>
        {!ejId && !perId && !desde && !hasta && (
          <FilterHint>
            <Icon icon="lucide:info" /> Seleccioná un ejercicio o período para ver datos en los reportes.
          </FilterHint>
        )}
      </FiltersPanel>

      <Grid>
        {/* Libro Diario */}
        <ReportCard
          icon="lucide:scroll-text"
          title="Libro Diario"
          description="Todos los asientos confirmados del período en orden cronológico"
          help="Es el registro cronológico de todas las operaciones contables. Cada fila es un asiento con sus líneas de Debe y Haber."
        >
          <PdfExcelBtns
            loading={!ejId && !perId && !desde && !hasta}
            pdfLoading={loading.ldPdf}
            excelLoading={loading.ldXls}
            onPdf={() => doAction("ldPdf", () => getLibroDiarioPdf(libroFilters), "Libro Diario")}
            onExcel={() => doAction("ldXls", () => getLibroDiarioExcel(libroFilters))}
          />
        </ReportCard>

        {/* Balance de Comprobación */}
        <ReportCard
          icon="lucide:scale"
          title="Balance de Comprobación"
          description="Sumas y saldos por cuenta — Debe = Haber"
          help="Verifica la integridad matemática: la suma total de Debe tiene que ser igual al Haber. Si no cuadra, hay asientos mal cargados."
        >
          {ccId && (
            <CcIgnoredBadge>
              <Icon icon="lucide:info" /> Centro de costo no aplica a este reporte
            </CcIgnoredBadge>
          )}
          {loadBalance && <Skeleton />}
          {balance && (
            <MiniTable>
              <MiniRow $header>
                <span>Total Debe</span>
                <span>Total Haber</span>
                <span>¿Cuadra?</span>
              </MiniRow>
              <MiniRow>
                <Deb>{fmtGs(balance.totales?.total_debe)}</Deb>
                <Hab>{fmtGs(balance.totales?.total_haber)}</Hab>
                <Ok $ok={balance.totales?.saldo_deudor === balance.totales?.saldo_acreedor}>
                  <Icon icon={Math.abs((balance.totales?.saldo_deudor || 0) - (balance.totales?.saldo_acreedor || 0)) <= 1 ? "lucide:check-circle-2" : "lucide:alert-circle"} />
                </Ok>
              </MiniRow>
            </MiniTable>
          )}
          <PdfExcelBtns
            loading={!ejId && !perId}
            pdfLoading={loading.bcPdf}
            excelLoading={loading.bcXls}
            onPdf={() => doAction("bcPdf", () => getBalanceComprobacionPdf(commonFilters), "Balance de Comprobación")}
            onExcel={() => doAction("bcXls", () => getBalanceComprobacionExcel(commonFilters))}
          />
        </ReportCard>

        {/* Estado de Resultados */}
        <ReportCard
          icon="lucide:trending-up"
          title="Estado de Resultados"
          description="Ingresos, costos, gastos y utilidad del período"
          help="Muestra si la empresa ganó o perdió: Ingresos − Costos − Gastos = Utilidad Neta. Al cerrar el ejercicio, esa utilidad pasa automáticamente a Patrimonio."
        >
          {loadResultados && <Skeleton />}
          {resultados && (
            <MiniTable>
              <MiniRow>
                <span>Ingresos</span>
                <Hab>{fmtGs(resultados.ingresos?.total)}</Hab>
              </MiniRow>
              <MiniRow>
                <span>Costos</span>
                <Deb>−{fmtGs(resultados.costos?.total)}</Deb>
              </MiniRow>
              <MiniRow>
                <span>Gastos</span>
                <Deb>−{fmtGs(resultados.gastos?.total)}</Deb>
              </MiniRow>
              <MiniRow $bold>
                <span>Utilidad Neta</span>
                <span style={{ color: (resultados.utilidad_neta || 0) >= 0 ? "#4ade80" : "#f87171", fontWeight: 700 }}>{fmtGs(resultados.utilidad_neta)}</span>
              </MiniRow>
            </MiniTable>
          )}
          <PdfExcelBtns
            loading={!ejId && !perId}
            pdfLoading={loading.erPdf}
            excelLoading={loading.erXls}
            onPdf={() => doAction("erPdf", () => getEstadoResultadosPdf(erPdfFilters), "Estado de Resultados")}
            onExcel={() => doAction("erXls", () => getEstadoResultadosExcel(erPdfFilters))}
          />
        </ReportCard>

        {/* Balance General */}
        <ReportCard
          icon="lucide:building-2"
          title="Balance General"
          description="Activos, pasivos y patrimonio — ecuación contable"
          help={
            balGen && !balGen.ejercicio_cerrado && Math.abs(balGen.utilidad_neta || 0) > 0
              ? `La Utilidad Neta del período (${fmtGs(balGen.utilidad_neta)}) se incluye automáticamente en Patrimonio. Al cerrar el ejercicio se generará el asiento de cierre contable.`
              : "Foto del estado patrimonial: Activos = Pasivos + Patrimonio. Si no cuadra, revisá los asientos del período."
          }
        >
          {ccId && (
            <CcIgnoredBadge>
              <Icon icon="lucide:info" /> Centro de costo no aplica a este reporte
            </CcIgnoredBadge>
          )}
          {loadBalGen && <Skeleton />}
          {balGen && (
            <MiniTable>
              <MiniRow>
                <span>Total Activos</span>
                <Hab>{fmtGs(balGen.activos?.total)}</Hab>
              </MiniRow>
              <MiniRow>
                <span>Total Pasivos</span>
                <Deb>{fmtGs(balGen.pasivos?.total)}</Deb>
              </MiniRow>
              <MiniRow>
                <span>Patrimonio</span>
                <span>{fmtGs(balGen.patrimonio?.total)}</span>
              </MiniRow>
              {!balGen.ejercicio_cerrado && Math.abs(balGen.utilidad_neta || 0) > 0 && (
                <MiniRow>
                  <span style={{ color: "#94a3b8", fontSize: 11 }}>
                    ↳ incl. utilidad del período
                  </span>
                  <span style={{ color: (balGen.utilidad_neta || 0) >= 0 ? "#4ade80" : "#f87171", fontSize: 11 }}>
                    {fmtGs(balGen.utilidad_neta)}
                  </span>
                </MiniRow>
              )}
              <MiniRow $bold>
                <span>¿Cuadra?</span>
                <Ok $ok={balGen.cuadra}>
                  <Icon icon={balGen.cuadra ? "lucide:check-circle-2" : "lucide:alert-circle"} />
                  {balGen.cuadra ? "Sí" : "No cuadra"}
                </Ok>
              </MiniRow>
            </MiniTable>
          )}
          <PdfExcelBtns
            loading={!ejId && !perId}
            pdfLoading={loading.bgPdf}
            excelLoading={loading.bgXls}
            onPdf={() => doAction("bgPdf", () => getBalanceGeneralPdf(commonFilters), "Balance General")}
            onExcel={() => doAction("bgXls", () => getBalanceGeneralExcel(commonFilters))}
          />
        </ReportCard>

        {/* Libro Mayor */}
        <ReportCard
          icon="lucide:book-open"
          title="Libro Mayor"
          description="Movimientos de una cuenta con saldo acumulado"
          help="Muestra el detalle de todos los débitos y créditos de una sola cuenta, con el saldo acumulado después de cada movimiento."
        >
          <Autocomplete
            size="small"
            options={cuentasOpciones}
            value={cuentaLM}
            onChange={(_, v) => setCuentaLM(v)}
            getOptionLabel={(o) => `${o.codigo} — ${o.descripcion}`}
            isOptionEqualToValue={(a, b) => a.id === b.id}
            renderInput={(params) => <TextField {...params} label="Cuenta" placeholder="Buscar cuenta..." />}
            noOptionsText="Sin cuentas en el plan"
          />
          <PdfExcelBtns
            loading={!cuentaLM || (!ejId && !perId && !desde && !hasta)}
            pdfLoading={loading.lmPdf}
            excelLoading={loading.lmXls}
            onPdf={() => doAction("lmPdf", () => getLibroMayorPdf(cuentaLM.id, libroFilters), "Libro Mayor")}
            onExcel={() => doAction("lmXls", () => getLibroMayorExcel(cuentaLM.id, libroFilters))}
          />
        </ReportCard>
      </Grid>

      {/* Modal visor PDF */}
      <Dialog
        open={pdfModal.open}
        onClose={closePdf}
        maxWidth={false}
        fullWidth
        PaperProps={{ sx: { width: "90vw", height: "92vh", maxWidth: "none", borderRadius: "12px", display: "flex", flexDirection: "column", overflow: "hidden" } }}
      >
        <PdfModalHeader>
          <PdfModalTitle>
            <Icon icon="lucide:file-text" />
            {pdfModal.title}
          </PdfModalTitle>
          <PdfModalActions>
            <Tooltip title="Descargar PDF">
              <DownloadBtn href={pdfModal.url} download={`${pdfModal.title}.pdf`}>
                <Icon icon="lucide:download" />
                Descargar
              </DownloadBtn>
            </Tooltip>
            <IconButton onClick={closePdf} size="small" sx={{ color: "inherit" }}>
              <Icon icon="lucide:x" style={{ width: 20, height: 20 }} />
            </IconButton>
          </PdfModalActions>
        </PdfModalHeader>
        <DialogContent sx={{ p: 0, flex: 1, overflow: "hidden" }}>
          {pdfModal.url && <iframe src={pdfModal.url} title={pdfModal.title} style={{ width: "100%", height: "100%", border: "none", display: "block" }} />}
        </DialogContent>
      </Dialog>
    </Wrapper>
  );
}

// ── Styles ──────────────────────────────────────────────────────────────────────
const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;
const TopBar = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;
const PageTitle = styled.h2`
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  display: flex;
  align-items: center;
  gap: 10px;
  svg {
    width: 22px;
    height: 22px;
    color: #f88533;
  }
`;
const FiltersPanel = styled.div`
  padding: 16px;
  background: ${({ theme }) => theme.bg2};
  border-radius: 10px;
  border: 1px solid ${({ theme }) => theme.color2};
`;
const FilterTitle = styled.div`
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: ${({ theme }) => theme.text}88;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  svg {
    width: 14px;
    height: 14px;
  }
`;
const FiltersRow = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
`;
const Separator = styled.span`
  font-size: 11px;
  color: ${({ theme }) => theme.text}55;
  padding: 0 4px;
`;
const FilterHint = styled.div`
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #3b82f6;
  svg {
    width: 14px;
    height: 14px;
  }
`;
const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
`;
const Card = styled.div`
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.color2};
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
`;
const CardHeader = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 14px;
`;
const CardIcon = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f8853315;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  svg {
    width: 22px;
    height: 22px;
    color: #f88533;
  }
`;
const CardTitle = styled.div`
  font-size: 15px;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
`;
const CardDesc = styled.div`
  font-size: 12px;
  color: ${({ theme }) => theme.text}88;
  margin-top: 2px;
`;
const BtnRow = styled.div`
  display: flex;
  gap: 8px;
`;
const ExportBtn = styled.button`
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid ${({ $excel }) => ($excel ? "#22c55e44" : "#f8853344")};
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: ${({ $excel }) => ($excel ? "#22c55e" : "#f88533")};
  transition: background 0.15s;
  &:hover:not(:disabled) {
    background: ${({ $excel }) => ($excel ? "#22c55e12" : "#f8853312")};
  }
  &:disabled {
    opacity: 0.4;
    cursor: default;
  }
  svg {
    width: 14px;
    height: 14px;
  }
`;
const MiniTable = styled.div`
  border: 1px solid ${({ theme }) => theme.color2};
  border-radius: 8px;
  overflow: hidden;
`;
const MiniRow = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: ${({ $bold }) => ($bold ? 700 : 400)};
  background: ${({ $header, theme }) => ($header ? theme.bg1 : "transparent")};
  color: ${({ theme }) => theme.text};
  border-bottom: 1px solid ${({ theme }) => theme.color2}30;
  &:last-child {
    border-bottom: none;
  }
  span:first-child {
    color: ${({ $header, theme }) => ($header ? `${theme.text}88` : theme.text)};
    font-size: ${({ $header }) => ($header ? "11px" : "13px")};
    font-weight: ${({ $header }) => ($header ? 700 : "inherit")};
    text-transform: ${({ $header }) => ($header ? "uppercase" : "none")};
  }
`;
const Deb = styled.span`
  color: #f87171;
  font-weight: 600;
`;
const Hab = styled.span`
  color: #4ade80;
  font-weight: 600;
`;
const Ok = styled.span`
  display: flex;
  align-items: center;
  gap: 4px;
  color: ${({ $ok }) => ($ok ? "#4ade80" : "#f87171")};
  font-weight: 700;
  svg {
    width: 16px;
    height: 16px;
  }
`;
const HelpNote = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #f8853308;
  border: 1px solid #f8853325;
  font-size: 11.5px;
  line-height: 1.5;
  color: ${({ theme }) => theme.text}99;
  svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #f88533;
  }
`;
const CcIgnoredBadge = styled.div`
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #3b82f615;
  border: 1px solid #3b82f640;
  font-size: 11px;
  color: #60a5fa;
  font-weight: 500;
  svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
`;
const Skeleton = styled.div`
  height: 80px;
  border-radius: 8px;
  background: linear-gradient(90deg, ${({ theme }) => theme.bg3} 25%, ${({ theme }) => theme.bg4} 50%, ${({ theme }) => theme.bg3} 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  @keyframes shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
`;

// Modal PDF
const PdfModalHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid ${({ theme }) => theme.color2};
  background: ${({ theme }) => theme.bg2};
  flex-shrink: 0;
`;
const PdfModalTitle = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  svg {
    width: 18px;
    height: 18px;
    color: #f88533;
  }
`;
const PdfModalActions = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
`;
const DownloadBtn = styled.a`
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid ${({ theme }) => theme.color2};
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: ${({ theme }) => theme.text}99;
  transition: background 0.15s;
  text-decoration: none;
  &:hover {
    background: ${({ theme }) => theme.bg3};
    color: ${({ theme }) => theme.text};
  }
  svg {
    width: 14px;
    height: 14px;
  }
`;