<script setup lang="ts">
usePageTitle('Settings')

const { isSuperAdmin } = useSuperAdmin()
const sidebarFeatures = useSidebarFeatures()

const cards = computed(() => {
  const base: { to: string; title: string; description: string; icon: string }[] = []

  if (isSuperAdmin.value) {
    base.push({
      to: '/settings/organization',
      title: 'Organization',
      description: 'Company legal name, logo in the chrome, and PDF report headers — tenant-wide (superadmin only).',
      icon: 'i-heroicons-building-library'
    })
  }

  base.push(
    {
      to: '/settings/agents',
      title: 'Agents & commissions',
      description: 'Manage producer credentials, commission schedules, and cashflow-based compensation.',
      icon: 'i-heroicons-user-group'
    },
    {
      to: '/settings/referral-channels',
      title: 'Referral channels',
      description: 'Manage referral sources — people, companies, digital campaigns, events, and partnerships that generate leads.',
      icon: 'i-heroicons-link'
    },
    {
      to: '/settings/providers',
      title: 'Providers & carriers',
      description: 'Carrier directory, templates, and status.',
      icon: 'i-heroicons-building-office-2'
    },
    {
      to: '/settings/permissions',
      title: 'Permissions',
      description: 'Roles and SEGUROS permission matrix (seed data until API).',
      icon: 'i-heroicons-shield-check'
    },
    {
      to: '/settings/forms',
      title: 'Forms library',
      description: 'Master catalog of carrier PDFs and routing metadata.',
      icon: 'i-heroicons-document-duplicate'
    },
    {
      to: '/settings/quote-requests',
      title: 'Quote requests',
      description: 'Toggle whether quote flows describe outbound emails to carrier quoting addresses.',
      icon: 'i-heroicons-envelope'
    },
    {
      to: '/settings/customer-attention',
      title: 'Customer Attention',
      description: 'Service tiers and scoring rules to auto-classify customers by value and engagement.',
      icon: 'i-heroicons-star'
    },
    {
      to: '/settings/profile-layouts',
      title: 'Profile Layouts',
      description: 'Configure which customer profile sections appear and in what order based on your role.',
      icon: 'i-heroicons-rectangle-group'
    },
    {
      to: '/settings/alerts',
      title: 'Alerts & Notifications',
      description: 'Configure automated email alerts for renewals, cancellations, late payments, and custom triggers.',
      icon: 'i-heroicons-bell-alert'
    },
    {
      to: '/settings/support-routing',
      title: 'Support Routing',
      description: 'Configure 3-tier routing rules for incoming support requests — auto-routing, keyword classification, and open pool settings.',
      icon: 'i-heroicons-arrow-path-rounded-square'
    }
  )

  return base
})
</script>

<template>
  <div class="mx-auto max-w-4xl space-y-8">
    <div>
      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Software configuration</h1>
      <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
        Carriers, forms, permissions, and tenant organization (superadmin). Your personal theme and profile live under
        <NuxtLink to="/account" class="font-medium text-[var(--brand)] underline-offset-2 hover:underline">Account</NuxtLink>.
      </p>
    </div>

    <UAlert
      v-if="!isSuperAdmin"
      color="neutral"
      variant="soft"
      title="Organization settings are restricted"
      description="Company logo and legal name are changed by a tenant superadmin. In development, superadmin UI defaults on unless localStorage policy-ui.superadmin is set to 0."
    />

    <div class="grid gap-4 sm:grid-cols-2">
      <NuxtLink
        v-for="c in cards"
        :key="c.to"
        :to="c.to"
        class="app-card app-card-interactive group p-5"
      >
        <div class="flex items-start gap-4">
          <div class="inline-flex rounded-lg bg-[var(--brand-soft)] p-2 text-[var(--brand)] ring-1 ring-[var(--brand)]/10">
            <UIcon :name="c.icon" class="h-6 w-6" />
          </div>
          <div>
            <p class="font-semibold text-[var(--text-primary)] group-hover:text-[var(--brand)]">{{ c.title }}</p>
            <p class="mt-1 text-sm text-[var(--text-muted)]">{{ c.description }}</p>
          </div>
        </div>
      </NuxtLink>
    </div>

    <!-- Sidebar modules -->
    <div>
      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Sidebar modules</h2>
      <p class="mt-1 text-[13px] text-[var(--text-muted)]">Show or hide optional sections in the navigation sidebar.</p>
      <div class="mt-4 flex flex-col gap-3">
        <label class="app-card flex flex-col gap-3 p-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <UIcon name="i-heroicons-inbox-stack" class="h-5 w-5 text-[var(--text-muted)]" />
              <div>
                <p class="text-[14px] font-medium text-[var(--text-primary)]">Workstations</p>
                <p class="text-[12px] text-[var(--text-muted)]">Specialized task queues for collectivos, claims, renewals, collections, and billing.</p>
              </div>
            </div>
            <USwitch :model-value="sidebarFeatures.showWorkstations" @update:model-value="sidebarFeatures.showWorkstations = $event" />
          </div>
          <div class="flex items-center gap-2 pl-8 text-[11px] text-[var(--text-muted)]">
            <UIcon name="i-heroicons-eye" style="width: 12px; height: 12px;" />
            <span>Adds: Collectivos, Facturacion, Claims Queue, Renewals Queue, Collections Queue</span>
          </div>
        </label>
        <label class="app-card flex flex-col gap-3 p-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <UIcon name="i-heroicons-sparkles" class="h-5 w-5 text-[var(--text-muted)]" />
              <div>
                <p class="text-[14px] font-medium text-[var(--text-primary)]">AI Tools</p>
                <p class="text-[12px] text-[var(--text-muted)]">AI-powered assistants for sales, policy comparison, email drafting, and case support.</p>
              </div>
            </div>
            <USwitch :model-value="sidebarFeatures.showAiTools" @update:model-value="sidebarFeatures.showAiTools = $event" />
          </div>
          <div class="flex items-center gap-2 pl-8 text-[11px] text-[var(--text-muted)]">
            <UIcon name="i-heroicons-eye" style="width: 12px; height: 12px;" />
            <span>Adds: Sales Factory, Policy Advisor, Email Writer, Case Support</span>
          </div>
        </label>
        <label class="app-card flex flex-col gap-3 p-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <UIcon name="i-heroicons-signal" class="h-5 w-5 text-[var(--text-muted)]" />
              <div>
                <p class="text-[14px] font-medium text-[var(--text-primary)]">Leads Hub</p>
                <p class="text-[12px] text-[var(--text-muted)]">Centralized lead management with API integrations for Google, Facebook, Instagram, and custom campaigns.</p>
              </div>
            </div>
            <USwitch :model-value="sidebarFeatures.showLeadsHub" @update:model-value="sidebarFeatures.showLeadsHub = $event" />
          </div>
          <div class="flex items-center gap-2 pl-8 text-[11px] text-[var(--text-muted)]">
            <UIcon name="i-heroicons-eye" style="width: 12px; height: 12px;" />
            <span>Adds: Leads Hub under Customer Service sidebar group</span>
          </div>
        </label>
      </div>
    </div>
  </div>
</template>
