import { Icon } from "@iconify/react";
import { Skeleton } from "@mui/material";
import { useState } from "react";
import styled from "styled-components";
import { usePermission } from "../../../hooks/usePermission";
import {
    useSetSucursalDefaultMutation,
    useSucursalesQuery,
    useToggleSucursalMutation,
    useUnsetSucursalDefaultMutation,
} from "../../../tanstack/SucursalesStack";
import { AccesoRestringido } from "../../common/AccesoRestringido";
import { EmptyState, ScreenGuia } from "../../_standards";
import { SucursalFormDialog } from "./SucursalFormDialog";

const GUIA_PASOS = [
  {
    icon: "lucide:building-2",
    color: "#3b82f6",
    titulo: "1. Crear sucursal",
    desc: "Registra el establecimiento físico donde se emiten documentos. El código debe coincidir con el habilitado en SET.",
  },
  {
    icon: "lucide:star",
    color: "#f59e0b",
    titulo: "2. Marcar predeterminada",
    desc: "La sucursal default se preselecciona automáticamente en facturas, NC, recibos y demás documentos de emisión.",
  },
  {
    icon: "lucide:settings",
    color: "#22c55e",
    titulo: "3. Configurar PE y numeraciones",
    desc: "Entra al detalle para gestionar puntos de expedición y numeraciones por tipo de documento.",
  },
  {
    icon: "lucide:power",
    color: "#ef4444",
    titulo: "4. Activar / Desactivar",
    desc: "Una sucursal inactiva no aparece en los selectores de emisión, pero conserva su historial.",
  },
];
const GUIA_NOTAS = [
  { icon: "lucide:info", text: "Solo puede haber una sucursal predeterminada activa por empresa." },
  { icon: "lucide:info", text: "Al cambiar la default, la anterior se desmarca automáticamente." },
];

// ── Styled ────────────────────────────────────────────────────────
const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
`;
const SectionBar = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  .title-block {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    .title {
      font-size: 1.05rem;
      font-weight: 700;
      color: ${(p) => p.theme.text};
      line-height: 1.2;
    }
    .subtitle {
      font-size: 0.78rem;
      color: ${(p) => p.theme.textSecondary};
    }
  }
`;
const PrimaryBtn = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: ${(p) => p.theme.primary};
  color: #fff;
  white-space: nowrap;
  &:hover { opacity: 0.88; }
`;
const DataTable = styled.div`
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 12px;
  /* Con overflow hidden se recortaba la columna de Acciones al angostar la ventana:
     la tabla no puede achicarse más allá de su ancho mínimo y lo que sobraba
     quedaba invisible e inalcanzable. Con scroll horizontal se llega siempre. */
  overflow-x: auto;
  overflow-y: hidden;
  background: ${(p) => p.theme.bg};
  table {
    width: 100%;
    /* Debajo de esto las celdas se apretujan hasta romper el renglón. */
    min-width: 780px;
    border-collapse: collapse;
    font-size: 0.82rem;
    th, td { padding: 0.65rem 0.85rem; text-align: left; }
    th {
      background: ${(p) => p.theme.bg6};
      font-weight: 700;
      color: ${(p) => p.theme.textSecondary};
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    tbody tr {
      border-bottom: 1px solid ${(p) => p.theme.borderColor};
      transition: background 0.12s;
      &:hover { background: ${(p) => p.theme.bgAlpha}; }
      &:last-child { border-bottom: none; }
    }
    .center { text-align: center; }
  }
`;
const Badge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: ${(p) => p.$color};
  background: ${(p) => p.$color}14;
  border: 1px solid ${(p) => p.$color}30;
  white-space: nowrap;
`;
const Chip = styled.span`
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: ${(p) => p.theme.primary};
  background: ${(p) => p.theme.primary}14;
  border: 1px solid ${(p) => p.theme.primary}40;
`;
const ActionIcon = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: ${(p) => p.$color || p.theme.textSecondary};
  font-size: 1.05rem;
  &:hover { background: ${(p) => p.theme.bgAlpha}; }
  &:disabled { opacity: 0.35; cursor: not-allowed; }
`;
const Card = styled.div`
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 12px;
  padding: 0.85rem;
  background: ${(p) => p.theme.bg};
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
`;
const MobileList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  @media (min-width: 768px) { display: none; }
`;
const DesktopWrap = styled.div`
  display: none;
  @media (min-width: 768px) { display: block; }
`;

export const SucursalesList = ({ onViewDetail }) => {
  const { can } = usePermission("ADMINISTRACION");
  const canRead = can("ADM_SUC_SUCURSAL_VER");
  const canCreate = can("ADM_SUC_SUCURSAL_CREAR");
  const canEdit = can("ADM_SUC_SUCURSAL_EDITAR");

  const { data: sucursalesData, isLoading } = useSucursalesQuery();
  const toggleMutation = useToggleSucursalMutation();
  const setDefaultMutation = useSetSucursalDefaultMutation();
  const unsetDefaultMutation = useUnsetSucursalDefaultMutation();

  const sucursales = Array.isArray(sucursalesData) ? sucursalesData : [];

  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingSucursal, setEditingSucursal] = useState(null);

  const handleAdd = () => {
    setEditingSucursal(null);
    setDialogOpen(true);
  };
  const handleEdit = (sucursal) => {
    setEditingSucursal(sucursal);
    setDialogOpen(true);
  };
  const handleToggle = (id) => toggleMutation.mutate(id);
  const handleToggleDefault = (s) => {
    if (s.es_default) unsetDefaultMutation.mutate(s.id);
    else setDefaultMutation.mutate(s.id);
  };
  const handleClose = () => {
    setDialogOpen(false);
    setEditingSucursal(null);
  };

  if (!canRead) {
    return (
      <AccesoRestringido mensaje="No tienes permisos para ver las sucursales." />
    );
  }

  const togglingDefault =
    setDefaultMutation.isPending || unsetDefaultMutation.isPending;

  return (
    <Wrapper>
      <ScreenGuia
        titulo="¿Cómo funciona Sucursales?"
        intro="Configura los establecimientos donde se emiten documentos. Marca una como predeterminada para acelerar la facturación."
        pasos={GUIA_PASOS}
        notas={GUIA_NOTAS}
      />

      <SectionBar>
        <div className="title-block">
          <Icon icon="lucide:building-2" width={22} />
          <div>
            <div className="title">Sucursales</div>
            <div className="subtitle">Gestiona los establecimientos de tu empresa</div>
          </div>
        </div>
        {canCreate && (
          <PrimaryBtn onClick={handleAdd}>
            <Icon icon="lucide:plus" /> Nueva Sucursal
          </PrimaryBtn>
        )}
      </SectionBar>

      {isLoading ? (
        <DataTable>
          <div style={{ padding: "0.75rem" }}>
            {[...Array(4)].map((_, i) => (
              <Skeleton
                key={i}
                variant="rectangular"
                height={42}
                sx={{ mb: 1, borderRadius: 1 }}
              />
            ))}
          </div>
        </DataTable>
      ) : sucursales.length === 0 ? (
        <EmptyState
          icon="lucide:building-2"
          title="Aún no hay sucursales registradas"
          description="Registra al menos una sucursal para poder emitir documentos."
          ctaLabel={canCreate ? "Nueva Sucursal" : undefined}
          ctaIcon="lucide:plus"
          onCta={canCreate ? handleAdd : undefined}
        />
      ) : (
        <>
          <MobileList>
            {sucursales.map((s) => (
              <Card key={s.id}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                  <Chip>{s.punto_establecimiento}</Chip>
                  {s.logo && (
                    <img
                      src={s.logo}
                      alt=""
                      title="Logo propio de la sucursal"
                      style={{ width: 22, height: 22, borderRadius: 4, objectFit: "contain" }}
                    />
                  )}
                  <div style={{ flex: 1, fontWeight: 600, minWidth: 0 }}>{s.descripcion}</div>
                  <Badge $color={s.active ? "#22c55e" : "#94a3b8"}>
                    <Icon icon={s.active ? "lucide:check-circle" : "lucide:circle-off"} style={{ fontSize: "0.75rem" }} />
                    {s.active ? "Activo" : "Inactivo"}
                  </Badge>
                  {s.es_default && (
                    <Badge $color="#f59e0b">
                      <Icon icon="lucide:star" style={{ fontSize: "0.75rem" }} /> Default
                    </Badge>
                  )}
                </div>
                <div style={{ fontSize: "0.78rem", opacity: 0.8 }}>
                  <Icon icon="lucide:map-pin" style={{ verticalAlign: "-2px", marginRight: 4 }} />
                  {s.direccion}
                  {s.numero_casa && s.numero_casa !== "0" ? ` N° ${s.numero_casa}` : ""}
                </div>
                {s.telefono && (
                  <div style={{ fontSize: "0.78rem", opacity: 0.8 }}>
                    <Icon icon="lucide:phone" style={{ verticalAlign: "-2px", marginRight: 4 }} />
                    {s.telefono}
                  </div>
                )}
                <div style={{ display: "flex", gap: 4, justifyContent: "flex-end", borderTop: "1px solid rgba(127,127,127,0.2)", paddingTop: 8 }}>
                  <ActionIcon $color="#3b82f6" title="Ver detalle" onClick={() => onViewDetail?.(s)}>
                    <Icon icon="lucide:eye" />
                  </ActionIcon>
                  <ActionIcon
                    title={s.active ? "Desactivar" : "Activar"}
                    $color={s.active ? "#22c55e" : "#94a3b8"}
                    onClick={() => handleToggle(s.id)}
                    disabled={toggleMutation.isPending}
                  >
                    <Icon icon="lucide:power" />
                  </ActionIcon>
                  {canEdit && (
                    <ActionIcon
                      $color="#f59e0b"
                      title={s.es_default ? "Quitar como predeterminada" : "Marcar como predeterminada"}
                      onClick={() => handleToggleDefault(s)}
                      disabled={!s.active || togglingDefault}
                    >
                      <Icon icon={s.es_default ? "lucide:star" : "lucide:star-off"} />
                    </ActionIcon>
                  )}
                  {canEdit && (
                    <ActionIcon title="Editar" onClick={() => handleEdit(s)}>
                      <Icon icon="lucide:edit-3" />
                    </ActionIcon>
                  )}
                </div>
              </Card>
            ))}
          </MobileList>

          <DesktopWrap>
            <DataTable>
              <table>
                <thead>
                  <tr>
                    <th>Establecimiento</th>
                    <th>Descripción</th>
                    <th>Dirección</th>
                    <th>Teléfono</th>
                    <th>Estado</th>
                    <th>Predet.</th>
                    <th className="center">Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {sucursales.map((s) => (
                    <tr key={s.id}>
                      <td><Chip>{s.punto_establecimiento}</Chip></td>
                      <td style={{ fontWeight: 600 }}>
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                          {/* Miniatura sólo si tiene logo propio: así se ve de un
                              vistazo cuáles no heredan el de la empresa. */}
                          {s.logo && (
                            <img
                              src={s.logo}
                              alt=""
                              title="Logo propio de la sucursal"
                              style={{
                                width: 22,
                                height: 22,
                                borderRadius: 4,
                                objectFit: "contain",
                                flexShrink: 0,
                              }}
                            />
                          )}
                          {s.descripcion}
                        </span>
                      </td>
                      <td>
                        {s.direccion}
                        {s.numero_casa && s.numero_casa !== "0" ? ` N° ${s.numero_casa}` : ""}
                      </td>
                      <td>{s.telefono || "—"}</td>
                      <td>
                        <Badge $color={s.active ? "#22c55e" : "#94a3b8"}>
                          <Icon icon={s.active ? "lucide:check-circle" : "lucide:circle-off"} style={{ fontSize: "0.72rem" }} />
                          {s.active ? "Activo" : "Inactivo"}
                        </Badge>
                      </td>
                      <td>
                        {s.es_default ? (
                          <Badge $color="#f59e0b">
                            <Icon icon="lucide:star" style={{ fontSize: "0.72rem" }} /> Default
                          </Badge>
                        ) : (
                          <span style={{ opacity: 0.4 }}>—</span>
                        )}
                      </td>
                      <td className="center">
                        <div style={{ display: "flex", gap: 4, justifyContent: "center" }}>
                          <ActionIcon $color="#3b82f6" title="Ver detalle" onClick={() => onViewDetail?.(s)}>
                            <Icon icon="lucide:eye" />
                          </ActionIcon>
                          <ActionIcon
                            title={s.active ? "Desactivar" : "Activar"}
                            $color={s.active ? "#22c55e" : "#94a3b8"}
                            onClick={() => handleToggle(s.id)}
                            disabled={toggleMutation.isPending}
                          >
                            <Icon icon="lucide:power" />
                          </ActionIcon>
                          {canEdit && (
                            <ActionIcon
                              $color="#f59e0b"
                              title={s.es_default ? "Quitar como predeterminada" : "Marcar como predeterminada"}
                              onClick={() => handleToggleDefault(s)}
                              disabled={!s.active || togglingDefault}
                            >
                              <Icon icon={s.es_default ? "lucide:star" : "lucide:star-off"} />
                            </ActionIcon>
                          )}
                          {canEdit && (
                            <ActionIcon title="Editar" onClick={() => handleEdit(s)}>
                              <Icon icon="lucide:edit-3" />
                            </ActionIcon>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </DataTable>
          </DesktopWrap>
        </>
      )}

      <SucursalFormDialog
        open={dialogOpen}
        onClose={handleClose}
        sucursal={editingSucursal}
      />
    </Wrapper>
  );
};