---
import { AttributeCategory, Currency, VerificationStatus } from '@prisma/client'
import { Icon } from 'astro-icon/components'
import { actions, isInputError } from 'astro:actions'

import BaseLayout from '../../../layouts/BaseLayout.astro'
import { cn } from '../../../lib/cn'
import { prisma } from '../../../lib/prisma'

const categories = await Astro.locals.banners.try('Failed to fetch categories', () =>
  prisma.category.findMany({
    orderBy: { name: 'asc' },
  })
)

const attributes = await Astro.locals.banners.try('Failed to fetch attributes', () =>
  prisma.attribute.findMany({
    orderBy: { category: 'asc' },
  })
)

const result = Astro.getActionResult(actions.admin.service.create)
Astro.locals.banners.addIfSuccess(result, 'Service created successfully')
if (result && !result.error) {
  return Astro.redirect(`/admin/services/${result.data.service.slug}/edit`)
}
const inputErrors = isInputError(result?.error) ? result.error.fields : {}
---

<BaseLayout pageTitle="Create Service" widthClassName="max-w-screen-sm">
  <section class="mb-8">
    <div class="font-title mb-4">
      <span class="text-sm text-green-500">service.create</span>
    </div>

    <form
      method="POST"
      action={actions.admin.service.create}
      class="space-y-4 rounded-lg border border-green-500/30 bg-black/40 p-6 shadow-[0_0_15px_rgba(34,197,94,0.2)] backdrop-blur-xs"
      enctype="multipart/form-data"
    >
      <div>
        <label for="name" class="font-title mb-2 block text-sm text-green-500">name</label>
        <input
          transition:persist
          type="text"
          name="name"
          id="name"
          required
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
        />
        {
          inputErrors.name && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.name.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label for="description" class="font-title mb-2 block text-sm text-green-500">description</label>
        <textarea
          transition:persist
          name="description"
          id="description"
          required
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
        ></textarea>
        {
          inputErrors.description && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.description.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label for="serviceUrls" class="font-title mb-2 block text-sm text-green-500">serviceUrls</label>
        <textarea
          transition:persist
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          name="serviceUrls"
          id="serviceUrls"
          rows={3}
          placeholder="https://example1.com https://example2.com"></textarea>
        {
          inputErrors.serviceUrls && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.serviceUrls.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label for="tosUrls" class="font-title mb-2 block text-sm text-green-500">tosUrls</label>
        <textarea
          transition:persist
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          name="tosUrls"
          id="tosUrls"
          rows={3}
          placeholder="https://example1.com/tos https://example2.com/tos"></textarea>
        {
          inputErrors.tosUrls && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.tosUrls.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label for="onionUrls" class="font-title mb-2 block text-sm text-green-500">onionUrls</label>
        <textarea
          transition:persist
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          name="onionUrls"
          id="onionUrls"
          rows={3}
          placeholder="http://example.onion"></textarea>
        {
          inputErrors.onionUrls && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.onionUrls.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label for="imageFile" class="font-title mb-2 block text-sm text-green-500">serviceImage</label>
        <div class="space-y-2">
          <input
            transition:persist
            type="file"
            name="imageFile"
            id="imageFile"
            accept="image/*"
            required
            class="font-title file:font-title block w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 file:mr-3 file:rounded-md file:border-0 file:bg-green-500/30 file:px-3 file:py-1 file:text-gray-300 focus:border-green-500 focus:ring-green-500"
          />
          <p class="font-title text-xs text-gray-400">
            Upload a square image for best results. Supported formats: JPG, PNG, WebP, SVG.
          </p>
        </div>
        {
          inputErrors.imageFile && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.imageFile.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label class="font-title mb-2 block text-sm text-green-500" for="categories">categories</label>
        <div class="mt-2 grid grid-cols-2 gap-2">
          {
            categories?.map((category) => (
              <label class="inline-flex items-center">
                <input
                  transition:persist
                  type="checkbox"
                  name="categories"
                  value={category.id}
                  class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
                />
                <span class="font-title ml-2 flex items-center gap-2 text-gray-300">
                  <Icon class="h-3 w-3 text-green-500" name={category.icon} />
                  {category.name}
                </span>
              </label>
            ))
          }
        </div>
        {
          inputErrors.categories && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.categories.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label for="kycLevel" class="font-title mb-2 block text-sm text-green-500">kycLevel</label>
        <input
          transition:persist
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          type="number"
          name="kycLevel"
          id="kycLevel"
          min={0}
          max={4}
          value={4}
          required
        />
        {
          inputErrors.kycLevel && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.kycLevel.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label class="font-title mb-2 block text-sm text-green-500" for="attributes">attributes</label>
        <div class="space-y-4">
          {
            Object.values(AttributeCategory).map((category) => (
              <div class="rounded-md border border-green-500/20 bg-black/30 p-4">
                <h4 class="font-title mb-3 text-green-400">{category}</h4>
                <div class="grid grid-cols-1 gap-2">
                  {attributes
                    ?.filter((attr) => attr.category === category)
                    .map((attr) => (
                      <label class="inline-flex items-center">
                        <input
                          transition:persist
                          type="checkbox"
                          name="attributes"
                          value={attr.id}
                          class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
                        />
                        <span class="font-title ml-2 flex items-center gap-2 text-gray-300">
                          {attr.title}
                          <span
                            class={cn('font-title rounded-sm px-1.5 py-0.5 text-xs', {
                              'border border-green-500/50 bg-green-500/20 text-green-400':
                                attr.type === 'GOOD',
                              'border border-red-500/50 bg-red-500/20 text-red-400': attr.type === 'BAD',
                              'border border-yellow-500/50 bg-yellow-500/20 text-yellow-400':
                                attr.type === 'WARNING',
                              'border border-blue-500/50 bg-blue-500/20 text-blue-400': attr.type === 'INFO',
                            })}
                          >
                            {attr.type}
                          </span>
                        </span>
                      </label>
                    ))}
                </div>
                {inputErrors.attributes && (
                  <p class="font-title mt-1 text-sm text-red-500">{inputErrors.attributes.join(', ')}</p>
                )}
              </div>
            ))
          }
        </div>
      </div>

      <div>
        <label class="font-title mb-2 block text-sm text-green-500" for="verificationStatus"
          >verificationStatus</label
        >
        <select
          transition:persist
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 focus:border-green-500 focus:ring-green-500"
          name="verificationStatus"
          id="verificationStatus"
          required
        >
          {Object.values(VerificationStatus).map((status) => <option value={status}>{status}</option>)}
        </select>
        {
          inputErrors.verificationStatus && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.verificationStatus.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label class="font-title mb-2 block text-sm text-green-500" for="verificationSummary"
          >verificationSummary</label
        >
        <textarea
          transition:persist
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          name="verificationSummary"
          id="verificationSummary"
          rows={3}></textarea>
        {
          inputErrors.verificationSummary && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.verificationSummary.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label class="font-title mb-2 block text-sm text-green-500" for="verificationProofMd"
          >verificationProofMd</label
        >
        <textarea
          transition:persist
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
          name="verificationProofMd"
          id="verificationProofMd"
          rows={10}></textarea>
        {
          inputErrors.verificationProofMd && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.verificationProofMd.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label class="font-title mb-2 block text-sm text-green-500" for="acceptedCurrencies"
          >acceptedCurrencies</label
        >
        <div class="mt-2 grid grid-cols-2 gap-2">
          {
            Object.values(Currency).map((currency) => (
              <label class="inline-flex items-center">
                <input
                  transition:persist
                  type="checkbox"
                  name="acceptedCurrencies"
                  value={currency}
                  class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
                />
                <span class="font-title ml-2 text-gray-300">{currency}</span>
              </label>
            ))
          }
        </div>
        {
          inputErrors.acceptedCurrencies && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.acceptedCurrencies.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label class="font-title mb-2 block text-sm text-green-500" for="overallScore">overallScore</label>
        <input
          transition:persist
          type="number"
          name="overallScore"
          id="overallScore"
          value={0}
          min={0}
          max={10}
          required
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 focus:border-green-500 focus:ring-green-500"
        />
        {
          inputErrors.overallScore && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.overallScore.join(', ')}</p>
          )
        }
      </div>

      <div>
        <label class="font-title mb-2 block text-sm text-green-500" for="referral">referral</label>
        <input
          transition:persist
          type="text"
          name="referral"
          id="referral"
          placeholder="Optional referral code/link"
          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
        />
        {
          inputErrors.referral && (
            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.referral.join(', ')}</p>
          )
        }
      </div>

      <button
        type="submit"
        class="font-title inline-flex justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
      >
        Create Service
      </button>
    </form>
  </section>
</BaseLayout>