<script lang="ts">
  type HighlightVariant = "solid" | "outline";
  type FeatureIcon =
    | "control"
    | "support"
    | "shieldCheck"
    | "envelope"
    | "users"
    | "bell"
    | "monitor"
    | "document"
    | "teams"
    | "userPlus";
  type PaletteKey = "primary" | "success" | "secondary" | "accent" | "info" | "error" | "warning";

  type FeatureCard = {
    title: string;
    description: string;
    ctaLabel: string;
    href?: string;
    disabled?: boolean;
    palette: PaletteKey;
    icon: FeatureIcon;
    highlightBadges?: Array<{ label: string; variant: HighlightVariant }>;
  };

  type IconPath = {
    d: string;
    strokeLinecap?: "butt" | "round" | "square";
    strokeLinejoin?: "miter" | "round" | "bevel";
    strokeWidth?: number;
  };

  const paletteStyles: Record<
    PaletteKey,
    {
      cardBorder: string;
      iconBg: string;
      iconRing: string;
      iconColor: string;
      button: string;
      badgeSolid: string;
      badgeOutline: string;
    }
  > = {
    primary: {
      cardBorder: "border-primary/25",
      iconBg: "bg-primary/15",
      iconRing: "ring-1 ring-primary/30",
      iconColor: "text-primary",
      button: "btn-primary",
      badgeSolid: "badge-primary text-primary-content",
      badgeOutline: "badge-outline border-primary/30",
    },
    success: {
      cardBorder: "border-success/25",
      iconBg: "bg-success/15",
      iconRing: "ring-1 ring-success/25",
      iconColor: "text-success",
      button: "btn-success",
      badgeSolid: "badge-success text-success-content",
      badgeOutline: "badge-outline border-success/30",
    },
    secondary: {
      cardBorder: "border-secondary/25",
      iconBg: "bg-secondary/15",
      iconRing: "ring-1 ring-secondary/25",
      iconColor: "text-secondary",
      button: "btn-secondary",
      badgeSolid: "badge-secondary text-secondary-content",
      badgeOutline: "badge-outline border-secondary/30",
    },
    accent: {
      cardBorder: "border-accent/25",
      iconBg: "bg-accent/15",
      iconRing: "ring-1 ring-accent/20",
      iconColor: "text-accent",
      button: "btn-accent",
      badgeSolid: "badge-accent text-accent-content",
      badgeOutline: "badge-outline border-accent/30",
    },
    info: {
      cardBorder: "border-info/25",
      iconBg: "bg-info/15",
      iconRing: "ring-1 ring-info/25",
      iconColor: "text-info",
      button: "btn-info",
      badgeSolid: "badge-info text-info-content",
      badgeOutline: "badge-outline border-info/30",
    },
    error: {
      cardBorder: "border-error/20",
      iconBg: "bg-error/15",
      iconRing: "ring-1 ring-error/25",
      iconColor: "text-error",
      button: "btn-error",
      badgeSolid: "badge-error text-error-content",
      badgeOutline: "badge-outline border-error/30",
    },
    warning: {
      cardBorder: "border-warning/25",
      iconBg: "bg-warning/15",
      iconRing: "ring-1 ring-warning/25",
      iconColor: "text-warning",
      button: "btn-warning",
      badgeSolid: "badge-warning text-warning-content",
      badgeOutline: "badge-outline border-warning/30",
    },
  };

  const iconPaths = {
    control: [
      {
        d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    support: [
      {
        d: "M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    shieldCheck: [
      {
        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",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    envelope: [
      {
        d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    users: [
      {
        d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    bell: [
      {
        d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    monitor: [
      {
        d: "M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    document: [
      {
        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",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    teams: [
      {
        d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
    userPlus: [
      {
        d: "M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z",
        strokeLinecap: "round",
        strokeLinejoin: "round",
      },
    ],
  } satisfies Record<FeatureIcon, IconPath[]>;

  const featureCards: Array<FeatureCard> = [
    {
      title: "Painel Administrativo",
      description:
        "Acesso restrito para gerenciamento de solicitações de acesso ao sistema e outras configurações administrativas.",
      ctaLabel: "Acessar Painel",
      href: "/ti/painel-administrativo",
      palette: "primary",
      icon: "control",
    },
    {
      title: "Suporte Técnico",
      description:
        "Central de atendimento para resolução de problemas técnicos e dúvidas sobre o sistema.",
      ctaLabel: "Em breve",
      palette: "info",
      icon: "support",
      disabled: true,
    },
    {
      title: "Gerenciar Permissões",
      description:
        "Configure as permissões de acesso aos menus do sistema por função. Controle quem pode acessar, consultar e gravar dados.",
      ctaLabel: "Configurar Permissões",
      href: "/ti/painel-permissoes",
      palette: "success",
      icon: "shieldCheck",
    },
    {
      title: "Configuração de Email",
      description:
        "Configure o servidor SMTP para envio automático de notificações e emails do sistema.",
      ctaLabel: "Configurar SMTP",
      href: "/ti/configuracoes-email",
      palette: "secondary",
      icon: "envelope",
    },
    {
      title: "Monitoramento de Emails",
      description:
        "Acompanhe o status da fila de emails, identifique problemas de envio e processe manualmente quando necessário.",
      ctaLabel: "Monitorar Emails",
      href: "/ti/monitoramento-emails",
      palette: "info",
      icon: "envelope",
      highlightBadges: [
        { label: "Tempo Real", variant: "solid" },
        { label: "Debug", variant: "outline" },
      ],
    },
    {
      title: "Gerenciar Usuários",
      description:
        "Criar, editar, bloquear e gerenciar usuários do sistema. Controle total sobre contas de acesso.",
      ctaLabel: "Gerenciar Usuários",
      href: "/ti/usuarios",
      palette: "accent",
      icon: "users",
    },
    {
      title: "Solicitações de Acesso",
      description:
        "Gerencie e analise solicitações de acesso ao sistema. Aprove ou rejeite novas solicitações de forma eficiente.",
      ctaLabel: "Gerenciar Solicitações",
      href: "/ti/solicitacoes-acesso",
      palette: "warning",
      icon: "userPlus",
    },
    {
      title: "Gestão de Times",
      description:
        "Organize funcionários em equipes e defina gestores. Gerencie membros e estrutura organizacional do sistema.",
      ctaLabel: "Gerenciar Times",
      href: "/ti/times",
      palette: "success",
      icon: "teams",
    },
    {
      title: "Notificações e Mensagens",
      description:
        "Envie notificações para usuários do sistema via chat ou email. Configure templates de mensagens reutilizáveis.",
      ctaLabel: "Acessar Painel",
      href: "/ti/notificacoes",
      palette: "info",
      icon: "bell",
    },
    {
      title: "Monitorar SGSE",
      description:
        "Monitore em tempo real as métricas técnicas do sistema e configure alertas inteligentes para a equipe de TI.",
      ctaLabel: "Monitorar Sistema",
      href: "/ti/monitoramento",
      palette: "error",
      icon: "monitor",
      highlightBadges: [
        { label: "Tempo Real", variant: "solid" },
        { label: "Alertas", variant: "outline" },
        { label: "Relatórios", variant: "outline" },
      ],
    },
    {
      title: "Documentação",
      description:
        "Manuais, guias e documentação técnica do sistema para usuários e administradores.",
      ctaLabel: "Em breve",
      palette: "primary",
      icon: "document",
      disabled: true,
    },
  ];
</script>

<main class="mx-auto w-full max-w-7xl space-y-12 px-4 py-10">
  <section class="relative overflow-hidden rounded-3xl border border-primary/25 bg-gradient-to-br from-primary/10 via-base-100 to-secondary/20 p-8 shadow-2xl">
    <div class="absolute -left-10 top-10 h-40 w-40 rounded-full bg-primary/20 blur-3xl"></div>
    <div class="absolute -bottom-16 right-0 h-56 w-56 rounded-full bg-secondary/20 blur-3xl"></div>
    <div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
      <div class="max-w-3xl space-y-4">
        <span class="inline-flex w-fit items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.28em] text-primary">
          Tecnologia da Informação
        </span>
        <h1 class="text-4xl font-black leading-tight text-base-content sm:text-5xl">
          Sistemas de Informação
        </h1>
        <p class="text-base leading-relaxed text-base-content/70 sm:text-lg">
          Acesso restrito para gerenciamento de solicitações de acesso ao sistema, configuração de permissões e monitoramento técnico das operações do SGSE.
        </p>
      </div>
      <div class="grid grid-cols-2 gap-4 rounded-2xl border border-base-200/60 bg-base-100/70 p-6 shadow-lg backdrop-blur sm:max-w-sm">
        <div>
          <p class="text-sm font-semibold text-base-content/60">Status</p>
          <p class="mt-2 text-2xl font-bold text-base-content">Operacional</p>
    </div>
        <div class="text-right">
          <p class="text-sm font-semibold text-base-content/60">Última atualização</p>
          <p class="mt-2 text-xl font-bold text-base-content">Agora mesmo</p>
        </div>
        <div class="col-span-2 h-px bg-gradient-to-r from-transparent via-base-300 to-transparent"></div>
        <div class="col-span-2 flex items-center justify-between text-sm text-base-content/70">
          <span>Monitoramento em tempo real.</span>
          <span class="badge badge-primary badge-sm">SGSE</span>
        </div>
      </div>
    </div>
  </section>

  <section class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
    {#each featureCards as card (card.title)}
      <article
        class={`card-hover group relative overflow-hidden rounded-2xl border ${paletteStyles[card.palette].cardBorder} bg-base-100/90 p-6 shadow-lg transition-all duration-300`}
      >
        <div class="absolute inset-x-6 top-0 h-24 rounded-b-full bg-gradient-to-b from-base-200/40 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
        <div class="relative flex items-start gap-4">
          <div
            class={`flex h-14 w-14 items-center justify-center rounded-2xl ${paletteStyles[card.palette].iconBg} ${paletteStyles[card.palette].iconRing}`}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              class={`h-7 w-7 ${paletteStyles[card.palette].iconColor}`}
            >
              {#each iconPaths[card.icon] as path (path.d)}
              <path
                  d={path.d}
                  stroke-linecap={path.strokeLinecap ?? "round"}
                  stroke-linejoin={path.strokeLinejoin ?? "round"}
                  stroke-width={path.strokeWidth ?? 2}
                />
              {/each}
            </svg>
          </div>
          <div class="relative flex-1">
            <h2 class="text-xl font-semibold text-base-content">{card.title}</h2>
            <p class="mt-2 text-sm leading-relaxed text-base-content/70">{card.description}</p>
      </div>
    </div>

        {#if card.highlightBadges}
          <div class="mt-4 flex flex-wrap gap-2">
            {#each card.highlightBadges as badge (badge.label)}
              {#if badge.variant === "solid"}
                <span class={`badge ${paletteStyles[card.palette].badgeSolid}`}>{badge.label}</span>
              {:else}
                <span
                  class={`badge ${paletteStyles[card.palette].badgeOutline} ${paletteStyles[card.palette].iconColor}`}
                >
                  {badge.label}
                </span>
              {/if}
            {/each}
          </div>
        {/if}

        <div class="mt-6 flex justify-end">
          {#if card.href && !card.disabled}
            <a
              class={`btn ${paletteStyles[card.palette].button} btn-sm sm:btn-md shadow-md transition-all duration-200 hover:shadow-lg`}
              href={card.href}
            >
              {card.ctaLabel}
            </a>
          {:else}
            <button
              type="button"
              class={`btn ${paletteStyles[card.palette].button} btn-sm sm:btn-md shadow-md`}
              disabled
            >
              {card.ctaLabel}
          </button>
          {/if}
        </div>
      </article>
    {/each}
  </section>

  <section class="relative overflow-hidden rounded-2xl border border-warning/30 bg-gradient-to-br from-warning/15 via-warning/10 to-warning/5 p-6 shadow-lg">
    <div class="absolute -top-10 right-0 h-32 w-32 rounded-full bg-warning/30 blur-3xl"></div>
    <div class="relative z-10 flex items-start gap-4">
      <div class="flex h-12 w-12 items-center justify-center rounded-full bg-warning/25 text-warning">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 stroke-current">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
    </svg>
      </div>
    <div>
        <h3 class="text-lg font-bold text-base-content">Área Restrita</h3>
        <p class="mt-2 text-sm leading-relaxed text-base-content/70">
          Esta área é exclusiva da equipe de Tecnologia da Informação. Garanta que apenas usuários autorizados acessem o Painel Administrativo e mantenha suas credenciais em segurança.
        </p>
      </div>
    </div>
  </section>
</main>

