import { Badge } from '@baguspay/ui/components/ui/badge'
import { Button } from '@baguspay/ui/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@baguspay/ui/components/ui/tabs'
import { cn } from '@baguspay/ui/lib/utils'
import { zodResolver } from '@hookform/resolvers/zod'
import { useAtomValue } from 'jotai'
import {
  CheckIcon,
  ContactIcon,
  KeyRoundIcon,
  LoaderCircleIcon,
  PackageIcon,
  ShieldCheckIcon,
  TrendingDownIcon,
  ZapIcon,
} from 'lucide-react'
import { useEffect, useState } from 'react'
import { useFieldArray, useForm } from 'react-hook-form'
import { useParams } from 'react-router'
import BreadcrumbBasic from '~/components/breadcrumb-basic'
import { UnderlinedInput, UnderlinedSelect } from '~/components/form-fields'
import Image from '~/components/image'
import VoucherInput from '~/components/voucher-input'
import { userAtom } from '~/store/user'
import { formatPrice } from '~/utils/format'
import { useInquiry } from '../../hooks/use-inquiry'
import CheckoutModal from './checkout-modal'
import PaymentSection from './payment-section'
import {
  type InquiryForm,
  inquirySchema,
  type LoaderData,
  type OrderProducts,
  type ProductCategoryData,
} from './slug'

export default function OrderSlugPrepaidPage({
  data,
  loaderData,
}: {
  data: ProductCategoryData
  loaderData: LoaderData
}) {
  const user = useAtomValue(userAtom)
  const params = useParams()

  const form = useForm<InquiryForm>({
    defaultValues: {
      product_id: data.product_sub_categories[0]?.products[0]?.id || '',
      phone_number: user?.data?.phone || '',
      email: user?.data?.email || '',
      payment_method_id: '',
      input_fields:
        data.input_fields?.map((field: any) => ({
          name: field.name,
          value: '',
        })) || [],
    },
    resolver: zodResolver(inquirySchema),
    mode: 'onChange',
  })

  const { inquiry, handleInquiry } = useInquiry({
    form,
    mutationKey: ['inquiry', data.product_sub_categories[0]?.products[0]?.id],
  })

  const [selectedItem, setSelectedItem] = useState<OrderProducts | null>(
    data.product_sub_categories[0]?.products[0] || null,
  )

  const { update } = useFieldArray({
    control: form.control,
    name: 'input_fields',
  })

  // Update form when selectedItem changes
  useEffect(() => {
    if (selectedItem) {
      form.setValue('product_id', selectedItem.id)
    }
  }, [selectedItem, form])

  const onSubmit = handleInquiry

  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <div className="w-full md:max-w-7xl mx-auto space-y-4">
        <BreadcrumbBasic
          items={[
            {
              label: 'Home',
              href: '/',
            },
            {
              label: data.name,
              href: `/order/${params.slug}`,
            },
          ]}
        />
        <div className="grid md:grid-cols-5 gap-6">
          <div className="md:col-span-3 space-y-4">
            <div className="flex flex-col md:flex-row items-center md:items-start text-center md:text-start gap-4 rounded-xl shadow-xs border border-border/70 p-4 dark:bg-secondary text-secondary-foreground">
              <div className="w-32 rounded-lg overflow-hidden">
                <Image
                  src={loaderData.data?.image_url}
                  alt=""
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="flex-1">
                <h2 className="text-lg font-semibold">{data.name}</h2>
                <p className="text-sm text-muted-foreground mt-1 text-ellipsis line-clamp-2">
                  {data.description || 'No description available.'}
                </p>
                <div className="flex flex-wrap gap-2 mt-4">
                  <Badge className="rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800/30 dark:text-blue-500">
                    <ZapIcon className="w-3 h-3" />
                    Cepat
                  </Badge>
                  <Badge className="rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-800/30 dark:text-pink-500">
                    <PackageIcon className="w-3 h-3" />
                    Instant
                  </Badge>
                  <Badge className="rounded-full text-xs font-medium bg-teal-100 text-teal-800 dark:bg-teal-800/30 dark:text-teal-500">
                    <ShieldCheckIcon className="w-3 h-3" />
                    Aman
                  </Badge>
                  <Badge className="rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-800/30 dark:text-orange-500">
                    <TrendingDownIcon className="w-3 h-3" />
                    Murah
                  </Badge>
                </div>
              </div>
            </div>
            {/* Input Detail Akun */}
            <div className="w-full h-fit rounded-xl shadow-xs border border-border/70 p-6 dark:bg-secondary text-secondary-foreground relative overflow-hidden">
              <div className="inline-flex gap-3 items-center mb-6">
                <div className="rounded-xl p-2.5 bg-linear-to-br from-primary to-primary/80 shadow-lg shadow-primary/20 text-primary-foreground">
                  <KeyRoundIcon className="w-5 h-5 text-background" />
                </div>
                <div>
                  <h2 className="text-lg font-bold">Detail Akun</h2>
                </div>
              </div>

              <div
                className={cn('grid grid-cols-1 gap-x-6 gap-y-6', {
                  'md:grid-cols-2': data.input_fields.length > 1,
                })}
              >
                {data.input_fields.map((input: any, index: number) => {
                  const isSelect = input.type === 'select'

                  if (isSelect) {
                    return (
                      <UnderlinedSelect
                        key={input.name}
                        id={`input_fields.${index}.value`}
                        label={input.title}
                        value={form.watch(`input_fields.${index}.value`)}
                        onValueChange={(value) => {
                          update(index, { name: input.name, value })
                        }}
                        options={input.options}
                        placeholder={input.placeholder}
                        error={form.formState.errors.input_fields?.[index]?.value?.message}
                      />
                    )
                  }

                  return (
                    <UnderlinedInput
                      key={input.name}
                      id={`input_fields.${index}.value`}
                      label={input.title}
                      {...form.register(`input_fields.${index}.value`)}
                      type={input.type}
                      placeholder={input.placeholder}
                      error={form.formState.errors.input_fields?.[index]?.value?.message}
                    />
                  )
                })}
              </div>

              <div className="mt-8 pt-4 border-t border-border/50 flex justify-between items-center">
                <p className="text-xs text-muted-foreground">Butuh bantuan?</p>
                <button
                  type="button"
                  className="text-xs font-semibold text-primary hover:text-primary/80 hover:underline transition-all flex items-center gap-1"
                >
                  Bagaimana Menemukan ID?
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-external-link"
                  >
                    <path d="M15 3h6v6" />
                    <path d="M10 14 21 3" />
                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                  </svg>
                </button>
              </div>
            </div>

            {/* Product Section */}
            <div className="rounded-xl shadow-xs border border-border/70 p-4 dark:bg-secondary text-secondary-foreground">
              <Tabs defaultValue={data.product_sub_categories[0]?.name ?? ''} className="w-full">
                <TabsList>
                  {data.product_sub_categories.map((subCategory: any) => (
                    <TabsTrigger key={subCategory.name} value={subCategory.name}>
                      {subCategory.name}
                    </TabsTrigger>
                  ))}
                </TabsList>
                {data.product_sub_categories.map((subCategory: any) => (
                  <TabsContent key={subCategory.name} value={subCategory.name}>
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                      {subCategory.products.map((item: any) => (
                        <div key={item.id} className="relative pt-4 h-full">
                          {/* Label Text - Positioned above the card */}
                          {item.label_text && (
                            <div className="absolute top-0 left-0 z-20 bg-linear-to-r from-green-500 to-emerald-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
                              {item.label_text}
                            </div>
                          )}

                          <div
                            onClick={() => item.is_available && setSelectedItem(item)}
                            className={`
                      h-full group relative rounded-xl border transition-all duration-300 cursor-pointer flex flex-col
                      ${
                        selectedItem?.id === item.id
                          ? 'border-primary/40 shadow-lg shadow-primary/20 ring-1 ring-primary/15 scale-[1.02]'
                          : 'border-border/70 hover:border-primary/30'
                      }
                      ${
                        !item.is_available
                          ? 'opacity-60 cursor-not-allowed grayscale'
                          : 'hover:scale-[1.02] hover:shadow-md'
                      }
                    `}
                          >
                            {/* Selection Indicator */}
                            {selectedItem === item.id && (
                              <div className="absolute top-2 right-2 z-20 w-6 h-6 bg-primary rounded-full flex items-center justify-center animate-in fade-in zoom-in duration-200">
                                <CheckIcon className="w-4 h-4 text-primary-foreground" />
                              </div>
                            )}

                            {/* Unavailable Overlay */}
                            {!item.is_available && (
                              <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10 rounded-xl">
                                <span className="text-white font-semibold text-sm bg-gray-800 px-3 py-1 rounded-full">
                                  Stok Habis
                                </span>
                              </div>
                            )}

                            {/* Hover Glow Effect */}
                            <div className="absolute inset-0 bg-linear-to-r from-primary/5 via-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" />

                            <div className="p-3">
                              <div className="flex items-center gap-2 mb-2">
                                <Image
                                  src={item.image_url}
                                  alt={item.name}
                                  className="w-8 h-8 transition-transform duration-300 group-hover:scale-110"
                                />
                                <div className="flex-1 min-w-0">
                                  <p className="text-sm font-semibold text-foreground truncate">
                                    {item.name}
                                  </p>
                                  <p className="text-xs text-muted-foreground">{item.sub_name}</p>
                                </div>
                              </div>

                              {/* Stock indicator */}
                              {item.stock < 200 && item.is_available && (
                                <div className="mb-2">
                                  <span className="text-xs text-orange-600 border-warning/40">
                                    <TrendingDownIcon className="inline w-3 h-3 mr-1" />
                                    Stok Menipis
                                  </span>
                                </div>
                              )}
                            </div>

                            <div className="bg-secondary/50 dark:bg-card/50 p-3 mt-auto">
                              {/* Price Section */}
                              <div className="space-y-1">
                                {item.discount > 0 && (
                                  <div className="flex items-center gap-2">
                                    <Badge variant="destructive" className="text-xs px-1 py-0">
                                      {Math.round((item.discount / item.price) * 100)}%
                                    </Badge>
                                    <p className="text-xs line-through text-muted-foreground">
                                      {formatPrice(item.price)}
                                    </p>
                                  </div>
                                )}
                                <p className="font-bold text-foreground">
                                  {formatPrice(item.total_price)}
                                </p>
                              </div>
                            </div>

                            {/* Ripple Effect on Click */}
                            <div className="absolute inset-0 bg-primary/10 opacity-0 group-active:opacity-100 transition-opacity duration-150 rounded-xl" />
                          </div>
                        </div>
                      ))}
                    </div>
                  </TabsContent>
                ))}
              </Tabs>
            </div>
          </div>
          <div className="md:col-span-2">
            <div className="space-y-4 md:sticky md:top-24 ">
              <div className="w-full h-fit rounded-xl shadow-xs border border-border/70 p-4 dark:bg-secondary text-secondary-foreground">
                <div className="inline-flex gap-3 items-center mb-2">
                  <div className="rounded-xl p-2.5 bg-linear-to-br from-primary to-primary/80 shadow-lg shadow-primary/20 text-primary-foreground">
                    <ContactIcon className="w-5 h-5 text-background" />
                  </div>
                  <div>
                    <h2 className="text-lg font-bold">Kontak</h2>
                  </div>
                </div>
                <div className="w-full mt-4 mb-2">
                  <UnderlinedInput
                    label="Masukkan Email"
                    id="email"
                    type="text"
                    placeholder="user@tld.com"
                    {...form.register('email')}
                    error={form.formState.errors.email?.message}
                  />
                </div>

                <div className="w-full mb-2">
                  <UnderlinedInput
                    label="Nomor Telepon"
                    id="phone_number"
                    type="text"
                    placeholder="628123456789"
                    {...form.register('phone_number')}
                    error={form.formState.errors.phone_number?.message}
                  />
                </div>

                {/* Conditional payment phone number field */}
                {/* {form.watch('payment_method_id') && (
                  <div className="w-full mb-2">
                    <Label htmlFor="payment_phone_number" className="text-xs">
                      Nomor Telepon Pembayaran (WhatsApp)
                    </Label>
                    <Input
                      {...form.register('payment_phone_number')}
                      type="text"
                      id="payment_phone_number"
                      className="w-full mt-2 rounded-full"
                      placeholder="628123456789"
                    />
                    {form.formState.errors.payment_phone_number && (
                      <p className="text-red-500 text-xs mt-1">
                        {form.formState.errors.payment_phone_number.message}
                      </p>
                    )}
                  </div>
                )} */}

                <span className="text-xs italic font-medium">
                  * Pastikan email aktif untuk menerima notifikasi
                </span>
              </div>

              <VoucherInput
                form={form}
                productId={selectedItem?.id || ''}
                productPrice={selectedItem?.total_price}
              />

              <PaymentSection products={selectedItem} form={form} />

              <Button
                type="submit"
                className="w-full mt-4"
                size="lg"
                disabled={inquiry.isPending || !form.formState.isValid || !selectedItem}
              >
                <span className="flex items-center gap-2">
                  {inquiry.isPending ? (
                    <LoaderCircleIcon className="w-4 h-4 animate-spin" />
                  ) : (
                    <ZapIcon className="w-4 h-4" />
                  )}
                  Pesan Sekarang
                </span>
              </Button>
            </div>
          </div>
        </div>
      </div>
      {inquiry.isSuccess && <CheckoutModal data={inquiry.data.data} />}
    </form>
  )
}