"use client";

import Link from "next/link";
import { useEffect, useMemo, useState, type ReactNode } from "react";
import { supabase } from "@/lib/supabase";
import PageLayout from "@/components/layout/PageLayout";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";

type Guia = {
  id?: string | number;
  estado?: string;
  fecha?: string;
  created_at?: string;
  [key: string]: any;
};

type DashboardStats = {
  guiasHoy: number;
  guiasMes: number;
  totalGuias: number;
  totalCajas: number;
  recibidas: number;
  entregadas: number;
};

const ESTADO_RECIBIDA = [
  "Recibida",
  "Recibida en bodega",
];

function obtenerFechaGuia(guia: Guia) {
  return guia.created_at || guia.fecha || "";
}

function esMismaFechaHoy(fechaTexto: string) {
  if (!fechaTexto) return false;

  const fecha = new Date(fechaTexto);
  if (Number.isNaN(fecha.getTime())) return false;

  const ahora = new Date();
  return (
    fecha.getFullYear() === ahora.getFullYear() &&
    fecha.getMonth() === ahora.getMonth() &&
    fecha.getDate() === ahora.getDate()
  );
}

function esMismoMes(fechaTexto: string) {
  if (!fechaTexto) return false;

  const fecha = new Date(fechaTexto);
  if (Number.isNaN(fecha.getTime())) return false;

  const ahora = new Date();
  return (
    fecha.getFullYear() === ahora.getFullYear() &&
    fecha.getMonth() === ahora.getMonth()
  );
}

function esEstadoRecibida(estado?: string) {
  const estadoNormalizado = (estado || "").trim().toLowerCase();
  return ESTADO_RECIBIDA.some(
    (item) => item.toLowerCase() === estadoNormalizado
  );
}

function esEstadoEntregada(estado?: string) {
  return (estado || "").trim().toLowerCase() === "entregada";
}

export default function DashboardPage() {
  const [stats, setStats] = useState<DashboardStats>({
    guiasHoy: 0,
    guiasMes: 0,
    totalGuias: 0,
    totalCajas: 0,
    recibidas: 0,
    entregadas: 0,
  });

  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    cargarDashboard();
  }, []);

  async function cargarDashboard() {
    try {
      setLoading(true);
      setError("");

      const { data: guias, error: errorGuias } = await supabase
        .from("hce_guias")
        .select("*");

      if (errorGuias) {
        console.error("ERROR CARGANDO HCE_GUIAS:", errorGuias);
        throw new Error(errorGuias.message || "No se pudieron cargar las guías.");
      }

      const listaGuias = (guias || []) as Guia[];

      const { data: cajas, error: errorCajas } = await supabase
        .from("hce_cajas")
        .select("id");

      if (errorCajas) {
        console.error("ERROR CARGANDO HCE_CAJAS:", errorCajas);
        throw new Error(errorCajas.message || "No se pudieron cargar las cajas.");
      }

      const guiasHoy = listaGuias.filter((guia) =>
        esMismaFechaHoy(obtenerFechaGuia(guia))
      ).length;

      const guiasMes = listaGuias.filter((guia) =>
        esMismoMes(obtenerFechaGuia(guia))
      ).length;

      const recibidas = listaGuias.filter((guia) =>
        esEstadoRecibida(guia.estado)
      ).length;

      const entregadas = listaGuias.filter((guia) =>
        esEstadoEntregada(guia.estado)
      ).length;

      setStats({
        guiasHoy,
        guiasMes,
        totalGuias: listaGuias.length,
        totalCajas: (cajas || []).length,
        recibidas,
        entregadas,
      });
    } catch (error: any) {
      console.error("ERROR GENERAL DASHBOARD:", error);
      setError(error?.message || "No fue posible cargar el Dashboard.");
    } finally {
      setLoading(false);
    }
  }

  const saludo = useMemo(() => {
    const hora = new Date().getHours();
    if (hora < 12) return "Buenos días";
    if (hora < 18) return "Buenas tardes";
    return "Buenas noches";
  }, []);

  return (
    <PageLayout>
      {error && (
        <div className="mb-6 rounded-2xl border border-red-500/40 bg-red-500/10 p-4 text-sm font-medium text-red-400">
          ❌ {error}
        </div>
      )}

      {/* Hero */}
      <section className="relative mb-4 overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--bg-secondary)] p-4 md:p-5 lg:mb-5 lg:p-6">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.12),transparent_50%)] dark:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.18),transparent_50%)]" />

        <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div className="max-w-xl">
            <Badge variant="success" size="sm" className="mb-3">
              Sistema activo
              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M9 5l7 7-7 7" />
              </svg>
            </Badge>

            <h1 className="text-lg font-black leading-tight text-[var(--text-primary)] md:text-xl lg:text-2xl">
              {saludo}, Administrador
            </h1>

            <p className="mt-1.5 text-sm text-[var(--text-secondary)]">
              Resumen general de Honduras Cargo Express
            </p>
          </div>

          <div className="relative hidden flex-1 items-center justify-end lg:flex">
            <div className="absolute right-0 top-1/2 w-full max-w-sm -translate-y-1/2">
              <HeroIlustracion />
            </div>
          </div>

          <div className="flex flex-wrap gap-2 self-start">
            <Link href="/clientes">
              <Button variant="secondary" size="sm" leftIcon={<IconPlus />}>
                Nuevo cliente
              </Button>
            </Link>
            <Link href="/guias/nueva">
              <Button size="sm" leftIcon={<IconPlus />}>Nueva guía</Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Estadísticas */}
      <section className="mb-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-4 lg:mb-5">
        <StatCard
          href="/guias?filtro=hoy"
          titulo="Guías hoy"
          numero={loading ? "..." : stats.guiasHoy}
          descripcion="Registradas durante el día"
          icono={<IconCalendario />}
          theme="blue"
        />
        <StatCard
          href="/guias?filtro=mes"
          titulo="Guías del mes"
          numero={loading ? "..." : stats.guiasMes}
          descripcion="Registradas este mes"
          icono={<IconCaja3d />}
          theme="purple"
        />
        <StatCard
          href="/guias?filtro=total"
          titulo="Total de guías"
          numero={loading ? "..." : stats.totalGuias}
          descripcion="Guías registradas"
          icono={<IconDocumentoGrueso />}
          theme="green"
        />
        <StatCard
          href="/contenedores?filtro=cajas"
          titulo="Total de cajas"
          numero={loading ? "..." : stats.totalCajas}
          descripcion="Cajas registradas"
          icono={<IconCajasApiladas />}
          theme="orange"
        />
      </section>

      {/* Estados */}
      <section className="mb-4 grid gap-3 sm:grid-cols-2 lg:mb-5">
        <StatusCard
          href="/guias?estado=recibida"
          titulo="Guías recibidas"
          numero={loading ? "..." : stats.recibidas}
          descripcion="Pendientes de entrega"
          icono={<IconFlechaAbajo />}
          color="red"
        />
        <StatusCard
          href="/guias?estado=entregada"
          titulo="Guías entregadas"
          numero={loading ? "..." : stats.entregadas}
          descripcion="Entregas completadas"
          icono={<IconCheck />}
          color="green"
        />
      </section>

      {/* Banner */}
      <section className="relative overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--bg-secondary)]">
        <div className="absolute inset-0">
          <div className="absolute inset-0 bg-gradient-to-r from-[var(--bg-secondary)] via-[var(--bg-secondary)]/95 to-transparent" />
          <div className="absolute right-0 top-0 h-full w-full opacity-20 md:w-2/3">
            <BannerIlustracion />
          </div>
        </div>

        <div className="relative p-4 md:p-5 lg:p-6">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div className="max-w-2xl">
              <div className="mb-2 inline-flex items-center gap-1.5 text-[10px] font-black uppercase tracking-[0.15em] text-blue-500">
                <IconDiamante />
                Honduras Cargo Express
              </div>

              <h2 className="text-lg font-black text-[var(--text-primary)] md:text-xl">
                Sistema de gestión
              </h2>

              <p className="mt-1.5 max-w-xl text-sm leading-relaxed text-[var(--text-secondary)]">
                Administra guías, clientes, recolectores, rastreo, contenedores, pagos y reportes desde un solo lugar.
              </p>

              <div className="mt-4 flex flex-wrap gap-2">
                <BadgeInline icon={<IconEscudo />} titulo="Seguro" subtitulo="Tus datos protegidos" />
                <BadgeInline icon={<IconRayo />} titulo="Rápido" subtitulo="Operaciones más eficientes" />
                <BadgeInline icon={<IconMundo />} titulo="Conectando" subtitulo="Honduras con el mundo" />
              </div>
            </div>

            <div className="flex shrink-0 flex-col items-start gap-3 lg:items-end">
              <Link href="/guias">
                <Button variant="secondary" size="sm" rightIcon={<IconArrowRight />}>
                  Ver guías
                </Button>
              </Link>

              <p className="hidden max-w-[180px] text-right text-xs italic text-[var(--text-muted)] lg:block">
                “Tu carga, nuestro compromiso”
              </p>
            </div>
          </div>
        </div>
      </section>
    </PageLayout>
  );
}

/* =============================================================
   COMPONENTES LOCALES DEL DASHBOARD
============================================================= */

function StatCard({
  href,
  titulo,
  numero,
  descripcion,
  icono,
  theme,
}: {
  href: string;
  titulo: string;
  numero: number | string;
  descripcion: string;
  icono: ReactNode;
  theme: "blue" | "purple" | "green" | "orange";
}) {
  const vars: Record<string, { bg: string; border: string; icon: string; text: string }> = {
    blue: {
      bg: "bg-[var(--stat-blue-bg)]",
      border: "border-[var(--stat-blue-border)]",
      icon: "from-[var(--stat-blue-icon-from)] to-[var(--stat-blue-icon-to)]",
      text: "text-[var(--stat-blue-text)]",
    },
    purple: {
      bg: "bg-[var(--stat-purple-bg)]",
      border: "border-[var(--stat-purple-border)]",
      icon: "from-[var(--stat-purple-icon-from)] to-[var(--stat-purple-icon-to)]",
      text: "text-[var(--stat-purple-text)]",
    },
    green: {
      bg: "bg-[var(--stat-green-bg)]",
      border: "border-[var(--stat-green-border)]",
      icon: "from-[var(--stat-green-icon-from)] to-[var(--stat-green-icon-to)]",
      text: "text-[var(--stat-green-text)]",
    },
    orange: {
      bg: "bg-[var(--stat-orange-bg)]",
      border: "border-[var(--stat-orange-border)]",
      icon: "from-[var(--stat-orange-icon-from)] to-[var(--stat-orange-icon-to)]",
      text: "text-[var(--stat-orange-text)]",
    },
  };

  const s = vars[theme];

  return (
    <Link href={href} className={`group relative block overflow-hidden rounded-xl border ${s.border} ${s.bg} p-4 transition hover:-translate-y-0.5 md:p-5`}>
      <div className="absolute -right-6 -top-6 h-20 w-20 rounded-full bg-black/5 transition group-hover:bg-black/10 dark:bg-white/5 dark:group-hover:bg-white/10" />

      <div className="relative flex items-start justify-between gap-3">
        <div className="flex items-center gap-2.5">
          <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${s.icon} shadow-md`}>
            {icono}
          </div>
          <p className="text-xs font-semibold text-[var(--text-secondary)]">{titulo}</p>
        </div>

        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--bg-primary)] text-[var(--text-muted)] transition group-hover:bg-[var(--card-bg)] group-hover:text-[var(--text-primary)]">
          <IconArrowRight className="h-3.5 w-3.5" />
        </div>
      </div>

      <div className="relative mt-3">
        <p className="text-3xl font-black text-[var(--text-primary)] md:text-4xl">{numero}</p>
        <p className="mt-0.5 text-[11px] text-[var(--text-muted)]">{descripcion}</p>
        <p className={`mt-2 text-[10px] font-black uppercase tracking-wider ${s.text}`}>
          Ver información →
        </p>
      </div>
    </Link>
  );
}

function StatusCard({
  href,
  titulo,
  numero,
  descripcion,
  icono,
  color,
}: {
  href: string;
  titulo: string;
  numero: number | string;
  descripcion: string;
  icono: ReactNode;
  color: "red" | "green";
}) {
  const isRed = color === "red";
  const bg = isRed ? "bg-[var(--status-red-bg)]" : "bg-[var(--status-green-bg)]";
  const border = isRed ? "border-[var(--status-red-border)]" : "border-[var(--status-green-border)]";
  const icon = isRed ? "from-[var(--status-red-icon-from)] to-[var(--status-red-icon-to)]" : "from-[var(--status-green-icon-from)] to-[var(--status-green-icon-to)]";
  const text = isRed ? "text-[var(--status-red-text)]" : "text-[var(--status-green-text)]";

  return (
    <Link href={href} className={`group flex items-center justify-between gap-3 rounded-xl border ${border} ${bg} p-4 transition hover:-translate-y-0.5 md:p-5`}>
      <div className="flex min-w-0 items-center gap-3">
        <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br ${icon} shadow-md`}>
          {icono}
        </div>

        <div className="min-w-0">
          <p className="text-sm font-black text-[var(--text-primary)]">{titulo}</p>
          <p className="text-[11px] text-[var(--text-muted)]">{descripcion}</p>
        </div>
      </div>

      <div className="flex items-center gap-3">
        <div className={`hidden h-8 w-px sm:block ${isRed ? "bg-[var(--status-red-border)]" : "bg-[var(--status-green-border)]"}`} />
        <div className="shrink-0 text-right">
          <p className="text-2xl font-black text-[var(--text-primary)]">{numero}</p>
          <p className={`text-[10px] font-bold ${text}`}>Ver →</p>
        </div>
      </div>
    </Link>
  );
}

function BadgeInline({
  icon,
  titulo,
  subtitulo,
}: {
  icon: ReactNode;
  titulo: string;
  subtitulo: string;
}) {
  return (
    <div className="flex items-center gap-2.5 rounded-lg border border-[var(--border)] bg-[var(--card-bg)] px-3 py-2">
      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-600 to-blue-800 text-white">
        {icon}
      </div>
      <div>
        <p className="text-xs font-bold text-[var(--text-primary)]">{titulo}</p>
        <p className="text-[10px] text-[var(--text-muted)]">{subtitulo}</p>
      </div>
    </div>
  );
}

/* =============================================================
   ICONOS
============================================================= */

function IconPlus({ className = "h-5 w-5" }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M12 4v16m8-8H4" />
    </svg>
  );
}

function IconArrowRight({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
    </svg>
  );
}

function IconCalendario() {
  return (
    <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
    </svg>
  );
}

function IconCaja3d() {
  return (
    <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
    </svg>
  );
}

function IconDocumentoGrueso() {
  return (
    <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
    </svg>
  );
}

function IconCajasApiladas() {
  return (
    <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
    </svg>
  );
}

function IconFlechaAbajo() {
  return (
    <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
    </svg>
  );
}

function IconCheck() {
  return (
    <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
    </svg>
  );
}

function IconDiamante() {
  return (
    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
    </svg>
  );
}

function IconEscudo() {
  return (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
    </svg>
  );
}

function IconRayo() {
  return (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
  );
}

function IconMundo() {
  return (
    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  );
}

/* =============================================================
   ILUSTRACIONES
============================================================= */

function HeroIlustracion() {
  return (
    <svg viewBox="0 0 500 220" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-full w-full">
      <defs>
        <linearGradient id="heroGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#1d4ed8" stopOpacity="0.2" />
          <stop offset="100%" stopColor="#f97316" stopOpacity="0.1" />
        </linearGradient>
      </defs>

      <path
        d="M60 120c10-15 30-25 55-20 20 5 35 25 50 30 15 5 30-5 45-10 10-3 20 0 25 8 5 10-5 22-20 25-18 4-35-5-50-12-15-7-35-8-55-2-18 5-35-2-45-14-5-7-8-15-5-5z"
        fill="url(#heroGrad)"
        stroke="#3b82f6"
        strokeWidth="1"
        opacity="0.4"
      />

      <circle cx="90" cy="115" r="3" fill="#60a5fa" />
      <circle cx="150" cy="125" r="3" fill="#60a5fa" />
      <circle cx="210" cy="120" r="3" fill="#60a5fa" />
      <circle cx="280" cy="110" r="3" fill="#f97316" />

      <path d="M90 115c20-5 40 5 60 5s40-10 60-5 40 10 70 0" stroke="#60a5fa" strokeWidth="1" strokeDasharray="4 4" opacity="0.5" />

      <g transform="translate(320, 60) scale(0.8)">
        <path d="M10 50l40-20 80-5 30-15c5-3 12-2 15 2s2 10-2 14l-25 20-10 30c-2 5-7 8-12 7l-15-8-50 25c-6 3-13 1-16-5s0-13 6-16l50-25-35-5c-5-1-9-4-11-8l-5-11z" fill="#1e40af" opacity="0.8" />
        <path d="M60 28l70-3 25-14c3-2 7-1 9 2s1 6-2 8l-30 17-72 4z" fill="#3b82f6" />
      </g>

      <g transform="translate(360, 130)">
        <rect x="0" y="20" width="40" height="30" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
        <rect x="42" y="10" width="40" height="40" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
        <rect x="84" y="25" width="40" height="25" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
        <line x1="10" y1="20" x2="10" y2="50" stroke="#f97316" strokeWidth="0.5" opacity="0.5" />
        <line x1="20" y1="20" x2="20" y2="50" stroke="#f97316" strokeWidth="0.5" opacity="0.5" />
        <line x1="30" y1="20" x2="30" y2="50" stroke="#f97316" strokeWidth="0.5" opacity="0.5" />
      </g>

      <text x="340" y="190" fill="#f97316" fontSize="14" fontStyle="italic" opacity="0.9">
        Conectando
      </text>
      <text x="360" y="205" fill="#60a5fa" fontSize="14" fontStyle="italic" opacity="0.9">
        Honduras
      </text>
      <text x="340" y="220" fill="#94a3b8" fontSize="12" fontStyle="italic" opacity="0.8">
        con el mundo
      </text>
    </svg>
  );
}

function BannerIlustracion() {
  return (
    <svg viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-full w-full">
      <defs>
        <linearGradient id="bannerGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#020617" stopOpacity="0.95" />
          <stop offset="50%" stopColor="#0f172a" stopOpacity="0.6" />
          <stop offset="100%" stopColor="#1e3a8a" stopOpacity="0.3" />
        </linearGradient>
      </defs>

      <rect width="600" height="300" fill="url(#bannerGrad)" />

      <g transform="translate(280, 110)">
        <path d="M0 100c20-10 60-15 100-15s80 5 110 15v30c-30 10-70 15-110 15s-80-5-100-15V100z" fill="#0f172a" stroke="#334155" strokeWidth="1" />
        <rect x="40" y="40" width="120" height="60" rx="2" fill="#1e293b" stroke="#334155" strokeWidth="1" />
        <rect x="50" y="20" width="100" height="20" rx="2" fill="#334155" />
        <rect x="60" y="0" width="80" height="20" rx="2" fill="#334155" />
        <line x1="80" y1="40" x2="80" y2="100" stroke="#334155" strokeWidth="0.5" />
        <line x1="100" y1="40" x2="100" y2="100" stroke="#334155" strokeWidth="0.5" />
        <line x1="120" y1="40" x2="120" y2="100" stroke="#334155" strokeWidth="0.5" />
      </g>

      <g transform="translate(120, 130)">
        <rect x="0" y="50" width="45" height="35" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
        <rect x="47" y="35" width="45" height="50" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
        <rect x="94" y="55" width="45" height="30" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
        <rect x="0" y="0" width="45" height="35" rx="2" fill="#1e3a8a" stroke="#3b82f6" strokeWidth="1" />
        <rect x="47" y="0" width="45" height="35" rx="2" fill="#1e3a8a" stroke="#3b82f6" strokeWidth="1" />
      </g>

      <g transform="translate(450, 140)">
        <rect x="0" y="40" width="40" height="35" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
        <rect x="42" y="25" width="40" height="50" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
        <rect x="84" y="45" width="40" height="30" rx="2" fill="#7c2d12" stroke="#f97316" strokeWidth="1" />
      </g>

      <line x1="80" y1="40" x2="80" y2="160" stroke="#334155" strokeWidth="2" />
      <line x1="80" y1="40" x2="180" y2="40" stroke="#334155" strokeWidth="2" />
      <line x1="80" y1="40" x2="140" y2="100" stroke="#334155" strokeWidth="1" strokeDasharray="2 2" />

      <line x1="500" y1="50" x2="500" y2="170" stroke="#334155" strokeWidth="2" />
      <line x1="420" y1="50" x2="500" y2="50" stroke="#334155" strokeWidth="2" />
    </svg>
  );
}