---
import { ServiceVisibility, VerificationStatus, type Prisma } from '@prisma/client'
import { z } from 'astro/zod'
import { Icon } from 'astro-icon/components'

import MyPicture from '../../../components/MyPicture.astro'
import SortArrowIcon from '../../../components/SortArrowIcon.astro'
import { getKycLevelInfo } from '../../../constants/kycLevels'
import { getVerificationStatusInfo } from '../../../constants/verificationStatus'
import BaseLayout from '../../../layouts/BaseLayout.astro'
import { cn } from '../../../lib/cn'
import { zodParseQueryParamsStoringErrors } from '../../../lib/parseUrlFilters'
import { prisma } from '../../../lib/prisma'

const { data: filters } = zodParseQueryParamsStoringErrors(
  {
    search: z.string().optional(),
    verificationStatus: z.nativeEnum(VerificationStatus).optional(),
    visibility: z.nativeEnum(ServiceVisibility).optional(),
    sort: z.enum(['name', 'createdAt', 'overallScore', 'verificationRequests']).default('name'),
    order: z.enum(['asc', 'desc']).default('asc'),
    page: z.coerce.number().int().positive().optional().default(1),
  },
  Astro
)

const itemsPerPage = 20

const sortProperty = filters.sort
const sortDirection = filters.order

let orderBy: Prisma.ServiceOrderByWithRelationInput

switch (sortProperty) {
  case 'verificationRequests':
    orderBy = { verificationRequests: { _count: sortDirection } }
    break
  case 'createdAt': // createdAt can be ambiguous without a specific direction
  case 'name':
  case 'overallScore':
    orderBy = { [sortProperty]: sortDirection }
    break
  default:
    orderBy = { name: 'asc' } // Default sort
}

const whereClause: Prisma.ServiceWhereInput = {
  ...(filters.search
    ? {
        OR: [
          { name: { contains: filters.search, mode: 'insensitive' } },
          { description: { contains: filters.search, mode: 'insensitive' } },
          { serviceUrls: { has: filters.search } },
          { tosUrls: { has: filters.search } },
          { onionUrls: { has: filters.search } },
          { i2pUrls: { has: filters.search } },
        ],
      }
    : {}),
  verificationStatus: filters.verificationStatus ?? undefined,
  serviceVisibility: filters.visibility ?? undefined,
}

const totalServicesCount = await Astro.locals.banners.try(
  'Error counting services',
  async () => prisma.service.count({ where: whereClause }),
  0
)

const totalPages = Math.ceil(totalServicesCount / itemsPerPage)
const validPage = Math.max(1, Math.min(filters.page, totalPages || 1))
const skip = (validPage - 1) * itemsPerPage

const services = await Astro.locals.banners.try(
  'Error fetching services',
  async () =>
    prisma.service.findMany({
      where: whereClause,
      select: {
        id: true,
        name: true,
        slug: true,
        description: true,
        kycLevel: true,
        overallScore: true,
        privacyScore: true,
        trustScore: true,
        verificationStatus: true,
        imageUrl: true,
        serviceUrls: true,
        tosUrls: true,
        onionUrls: true,
        i2pUrls: true,
        serviceVisibility: true,
        createdAt: true,
        categories: {
          select: {
            id: true,
            name: true,
            icon: true,
          },
        },
        attributes: {
          include: {
            attribute: true,
          },
        },
        _count: {
          select: {
            verificationRequests: true,
          },
        },
      },
      orderBy,
      take: itemsPerPage,
      skip,
    }),
  []
)

const servicesWithInfo = services.map((service) => {
  const verificationStatusInfo = getVerificationStatusInfo(service.verificationStatus)
  const kycLevelInfo = getKycLevelInfo(String(service.kycLevel))

  return {
    ...service,
    verificationStatusInfo,
    kycLevelInfo,
    kycColor:
      service.kycLevel === 0
        ? '22, 163, 74' // green-600
        : service.kycLevel === 1
          ? '180, 83, 9' // amber-700
          : service.kycLevel === 2
            ? '220, 38, 38' // red-600
            : service.kycLevel === 3
              ? '185, 28, 28' // red-700
              : service.kycLevel === 4
                ? '153, 27, 27' // red-800
                : '107, 114, 128', // gray-500 fallback
    formattedDate: new Date(service.createdAt).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    }),
  }
})

const makeSortUrl = (slug: NonNullable<(typeof filters)['sort']>) => {
  const newOrder = filters.sort === slug && filters.order === 'asc' ? 'desc' : 'asc'
  const searchParams = new URLSearchParams(Astro.url.search)
  searchParams.set('sort', slug)
  searchParams.set('order', newOrder)
  return `/admin/services?${searchParams.toString()}`
}

const getPaginationUrl = (pageNum: number) => {
  const url = new URL(Astro.url)
  url.searchParams.set('page', pageNum.toString())
  return url.toString()
}

const truncate = (text: string, length: number) => {
  if (text.length <= length) return text
  return text.substring(0, length) + '...'
}
---

<BaseLayout pageTitle="Services Admin" widthClassName="max-w-screen-xl">
  <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
    <h1 class="font-title text-2xl font-bold text-white">Service Management</h1>
    <div class="mt-2 flex items-center gap-4 sm:mt-0">
      <span class="text-sm text-zinc-400">{totalServicesCount} services</span>
      <a
        href="/admin/services/new"
        class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none"
      >
        <Icon name="ri:add-line" class="size-4" />
        <span>New Service</span>
      </a>
    </div>
  </div>

  <!-- Search and Filters -->
  <div class="mb-6 rounded-lg border border-zinc-700 bg-zinc-800/50 p-4 shadow-lg">
    <form method="GET" class="grid gap-3 md:grid-cols-2 lg:grid-cols-5" autocomplete="off">
      <div class="lg:col-span-2">
        <label for="search" class="block text-xs font-medium text-zinc-400">Search</label>
        <div class="mt-1 flex rounded-md shadow-sm">
          <input
            type="text"
            name="search"
            id="search"
            value={filters.search}
            placeholder="Search by name, description, URL..."
            class="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 placeholder-zinc-500 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
          />
        </div>
      </div>

      <div>
        <label for="visibility" class="block text-xs font-medium text-zinc-400">Visibility</label>
        <select
          name="visibility"
          id="visibility"
          class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
        >
          <option value="">All Visibilities</option>
          {
            Object.values(ServiceVisibility).map((status) => (
              <option value={status} selected={filters.visibility === status}>
                {status}
              </option>
            ))
          }
        </select>
      </div>

      <div>
        <label for="verificationStatus" class="block text-xs font-medium text-zinc-400">Status</label>
        <select
          name="verificationStatus"
          id="verificationStatus"
          class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
        >
          <option value="">All Statuses</option>
          {
            Object.values(VerificationStatus).map((status) => (
              <option value={status} selected={filters.verificationStatus === status}>
                {status}
              </option>
            ))
          }
        </select>
      </div>

      <div>
        <label for="sort" class="block text-xs font-medium text-zinc-400">Sort By</label>
        <div class="mt-1 flex rounded-md shadow-sm">
          <select
            name="sort"
            id="sort"
            class="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
          >
            {
              ['name', 'createdAt', 'overallScore', 'verificationRequests'].map((option) => (
                <option value={option} selected={filters.sort === option}>
                  {option}
                </option>
              ))
            }
          </select>
          <button
            type="submit"
            class="ml-2 inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
          >
            <Icon name="ri:search-2-line" class="h-4 w-4" />
          </button>
        </div>
      </div>
    </form>
  </div>

  <!-- Services Table -->
  <div class="rounded-lg border border-zinc-700 bg-zinc-800/50 shadow-lg">
    <div class="sticky top-0 z-10 border-b border-zinc-700 bg-zinc-800/90 px-4 py-3 backdrop-blur-sm">
      <h2 class="font-title font-semibold text-blue-400">Services List</h2>
      <div class="mt-1 text-xs text-zinc-400 md:hidden">
        <span>Scroll horizontally to see more →</span>
      </div>
    </div>

    <div class="scrollbar-thin max-w-full overflow-x-auto">
      <div class="min-w-[750px]">
        <table class="w-full divide-y divide-zinc-700">
          <thead class="bg-zinc-900/30">
            <tr>
              <th
                scope="col"
                class="w-[30%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a href={makeSortUrl('name')} class="flex items-center hover:text-zinc-200">
                  Service <SortArrowIcon active={filters.sort === 'name'} sortOrder={filters.order} />
                </a>
              </th>
              <th
                scope="col"
                class="w-[8%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
                >KYC</th
              >
              <th
                scope="col"
                class="w-[8%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a
                  href={makeSortUrl('overallScore')}
                  class="flex items-center justify-center hover:text-zinc-200"
                >
                  Score <SortArrowIcon active={filters.sort === 'overallScore'} sortOrder={filters.order} />
                </a>
              </th>
              <th
                scope="col"
                class="w-[14%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
                >Status</th
              >
              <th
                scope="col"
                class="w-[10%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a
                  href={makeSortUrl('verificationRequests')}
                  class="flex items-center justify-center hover:text-zinc-200"
                >
                  <span class="hidden sm:inline">Requests</span>
                  <span class="sm:hidden">Reqs</span>
                  <SortArrowIcon active={filters.sort === 'verificationRequests'} sortOrder={filters.order} />
                </a>
              </th>
              <th
                scope="col"
                class="w-[14%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a
                  href={makeSortUrl('createdAt')}
                  class="flex items-center justify-center hover:text-zinc-200"
                >
                  Date <SortArrowIcon active={filters.sort === 'createdAt'} sortOrder={filters.order} />
                </a>
              </th>
              <th
                scope="col"
                class="w-[12%] px-4 py-3 text-right text-xs font-medium tracking-wider text-zinc-400 uppercase"
                >Actions</th
              >
            </tr>
          </thead>
          <tbody class="divide-y divide-zinc-700 bg-zinc-800/10">
            {
              servicesWithInfo.map((service) => (
                <tr id={`service-${service.id}`} class="group hover:bg-zinc-700/30">
                  <td class="px-4 py-3">
                    <div class="flex items-center space-x-3">
                      <div class="h-10 w-10 flex-shrink-0">
                        <MyPicture
                          src={service.imageUrl}
                          fallback="service"
                          alt={service.name}
                          width={40}
                          height={40}
                          class="h-10 w-10 rounded-md object-cover"
                        />
                      </div>
                      <div class="min-w-0 flex-1">
                        <div class="text-sm font-medium text-zinc-200">{service.name}</div>
                        <div class="truncate text-xs text-zinc-400" title={service.description}>
                          {truncate(service.description, 45)}
                        </div>
                        <div class="mt-1 flex flex-wrap gap-1">
                          {service.categories.slice(0, 2).map((category) => (
                            <span class="text-2xs inline-flex items-center rounded-sm bg-zinc-700/60 px-1.5 py-0.5 text-zinc-300">
                              <Icon name={category.icon} class="mr-0.5 size-2.5" />
                              {category.name}
                            </span>
                          ))}
                          {service.categories.length > 2 && (
                            <span class="text-2xs inline-flex items-center rounded-sm bg-zinc-700/60 px-1.5 py-0.5 text-zinc-300">
                              +{service.categories.length - 2}
                            </span>
                          )}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-3 text-center">
                    <span
                      class="inline-flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold"
                      style={`background-color: rgba(${service.kycColor}, 0.3); color: rgb(${service.kycColor})`}
                      title={service.kycLevelInfo.name}
                    >
                      {service.kycLevel}
                    </span>
                  </td>
                  <td class="px-4 py-3 text-center">
                    <div class="flex flex-col items-center">
                      <span
                        class={cn('text-sm font-medium', {
                          'text-green-400': service.overallScore >= 7,
                          'text-yellow-400': service.overallScore >= 4 && service.overallScore < 7,
                          'text-red-400': service.overallScore < 4,
                        })}
                      >
                        {service.overallScore}
                      </span>
                      <div class="mt-0.5 grid grid-cols-2 gap-0.5">
                        <span title="Privacy Score" class="text-2xs font-medium text-blue-400">
                          {service.privacyScore}
                        </span>
                        <span title="Trust Score" class="text-2xs font-medium text-yellow-400">
                          {service.trustScore}
                        </span>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-3 text-center">
                    <span
                      class={cn('inline-flex items-center rounded-md px-2 py-1 text-xs font-medium', {
                        'bg-green-500/20 text-green-400':
                          service.verificationStatus === 'VERIFICATION_SUCCESS',
                        'bg-red-500/20 text-red-400': service.verificationStatus === 'VERIFICATION_FAILED',
                        'bg-blue-500/20 text-blue-400': service.verificationStatus === 'APPROVED',
                        'bg-gray-500/20 text-gray-400':
                          service.verificationStatus === 'COMMUNITY_CONTRIBUTED',
                      })}
                    >
                      <Icon name={service.verificationStatusInfo.icon} class="mr-1 size-3" />
                      <span class="hidden sm:inline">{service.verificationStatus}</span>
                      <span class="sm:hidden">{service.verificationStatus.substring(0, 4)}</span>
                    </span>
                    <div class="text-2xs mt-1 font-medium text-zinc-500">
                      <span
                        class={cn('text-2xs inline-flex items-center rounded-sm px-1.5 py-0.5', {
                          'bg-green-900/30 text-green-300': service.serviceVisibility === 'PUBLIC',
                          'bg-yellow-900/30 text-yellow-300': service.serviceVisibility === 'UNLISTED',
                          'bg-red-900/30 text-red-300': service.serviceVisibility === 'HIDDEN',
                        })}
                      >
                        {service.serviceVisibility}
                      </span>
                    </div>
                  </td>
                  <td class="px-4 py-3 text-center">
                    <span class="inline-flex items-center rounded-full bg-orange-900/30 px-2.5 py-0.5 text-xs text-orange-400">
                      {service._count.verificationRequests}
                    </span>
                  </td>
                  <td class="px-4 py-3 text-center text-xs text-zinc-400">{service.formattedDate}</td>
                  <td class="px-4 py-3 text-right">
                    <div class="flex justify-end space-x-2">
                      <a
                        href={`/service/${service.slug}`}
                        target="_blank"
                        class="inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-2 py-1 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
                        title="View on site"
                      >
                        <Icon name="ri:external-link-line" class="size-3.5" />
                      </a>
                      <a
                        href={`/admin/services/${service.slug}/edit`}
                        class="inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
                      >
                        Edit
                      </a>
                    </div>
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {/* Pagination controls */}
  {
    totalPages > 1 && (
      <div class="mt-6 flex flex-wrap items-center justify-between gap-4">
        <div class="text-sm text-zinc-500">
          Showing {services.length > 0 ? skip + 1 : 0} to {Math.min(skip + itemsPerPage, totalServicesCount)}{' '}
          of {totalServicesCount} services
        </div>

        <nav class="inline-flex rounded-md shadow-sm" aria-label="Pagination">
          {validPage > 1 && (
            <a
              href={getPaginationUrl(validPage - 1)}
              class="inline-flex items-center rounded-l-md border border-zinc-700 bg-zinc-800 px-2 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
            >
              <Icon name="ri:arrow-left-s-line" class="size-5" />
              <span class="sr-only">Previous</span>
            </a>
          )}

          {validPage > 3 && (
            <a
              href={getPaginationUrl(1)}
              class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
            >
              1
            </a>
          )}

          {validPage > 4 && (
            <span class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-500">
              ...
            </span>
          )}

          {validPage > 2 && (
            <a
              href={getPaginationUrl(validPage - 2)}
              class="hidden items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700 md:inline-flex"
            >
              {validPage - 2}
            </a>
          )}

          {validPage > 1 && (
            <a
              href={getPaginationUrl(validPage - 1)}
              class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
            >
              {validPage - 1}
            </a>
          )}

          <a
            href={getPaginationUrl(validPage)}
            class="inline-flex items-center border border-blue-500 bg-blue-500/20 px-3 py-1 text-sm font-medium text-blue-400"
            aria-current="page"
          >
            {validPage}
          </a>

          {validPage < totalPages && (
            <a
              href={getPaginationUrl(validPage + 1)}
              class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
            >
              {validPage + 1}
            </a>
          )}

          {validPage < totalPages - 1 && (
            <a
              href={getPaginationUrl(validPage + 2)}
              class="hidden items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700 md:inline-flex"
            >
              {validPage + 2}
            </a>
          )}

          {validPage < totalPages - 3 && (
            <span class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-500">
              ...
            </span>
          )}

          {validPage < totalPages - 2 && (
            <a
              href={getPaginationUrl(totalPages)}
              class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
            >
              {totalPages}
            </a>
          )}

          {validPage < totalPages && (
            <a
              href={getPaginationUrl(validPage + 1)}
              class="inline-flex items-center rounded-r-md border border-zinc-700 bg-zinc-800 px-2 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
            >
              <Icon name="ri:arrow-right-s-line" class="size-5" />
              <span class="sr-only">Next</span>
            </a>
          )}
        </nav>
      </div>
    )
  }
</BaseLayout>

<style>
  /* Base CSS text size utility for super small text */
  .text-2xs {
    font-size: 0.6875rem;
    line-height: 1rem;
  }

  /* Scrollbar styling for better mobile experience */
  .scrollbar-thin::-webkit-scrollbar {
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.2);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.6);
  }

  @media (max-width: 768px) {
    .scrollbar-thin {
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
  }
</style>
