'use client'

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/shadcn/ui/card'
import { Order } from '@/lib/types/order'
import React, { useState, useRef } from 'react'
import SearchForm from './SearchForm'
import BoatRouteDialog from '@/components/modal/BoatRouteDialog'
import FastboatOrderItem from '@/components/order/FastboatOrder'
import { Separator } from '@/components/shadcn/ui/separator'
import {
  CalendarDays,
  ChevronDownIcon,
  Info,
  MessageCircle,
  SearchX,
} from 'lucide-react'
import TourPackageOrderItem from '@/components/order/TourPackageOrder'
import ActivityOrderItem from '@/components/order/ActivityOrder'
import { Alert, AlertDescription } from '@/components/shadcn/ui/alert'
import CustomerDetail from '../payments/CustomerDetail'
import PaymentInfo from '@/components/payments/PaymentInfo'
import Currency from '@/components/Currency'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@radix-ui/react-collapsible'
import { parseKualaLumpurDate } from '@/lib/utils/date'
import { formatDate } from 'date-fns'
import { useAppSelector } from '@/lib/redux-hooks'
import { useCurrency } from '@/lib/hooks/useCurrency'
import { Badge } from '@/components/shadcn/ui/badge'

const CheckReservation: React.FC = () => {
  const { format } = useCurrency()
  const [searching, setSearching] = useState(false)
  const [orders, setOrders] = useState<Order[] | null>(null)
  const orderDetailsRef = useRef<HTMLDivElement>(null)
  const merchant = useAppSelector((state) => state.merchant)
  const [openOrderId, setOpenOrderId] = useState<number | null>(null)

  const hasSearched = orders !== null
  const hasResults = hasSearched && orders.length > 0

  const handleOrdersFound = (result: Order[]) => {
    setOrders(result)
    setOpenOrderId(result[0]?.id ?? null)
  }

  return (
    <section className="max-w-7xl w-full px-4 sm:px-8 py-12 mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-slate-900 mb-1">
          Check Your Reservation
        </h1>
        <p className="text-slate-500 text-sm max-w-md">
          Enter the billing name and email address used at checkout to retrieve
          your confirmed reservation.
        </p>
      </div>

      <Card className="shadow-none border border-slate-100 rounded-2xl p-6 sm:p-8 mb-10">
        <SearchForm
          searching={searching}
          handleOrdersFound={handleOrdersFound}
          setSearching={setSearching}
        />
      </Card>

      {/* ── Not-found empty state ── */}
      {hasSearched && !hasResults && (
        <div className="flex flex-col items-center justify-center py-20 text-center">
          <div className="rounded-full bg-slate-100 p-5 mb-5">
            <SearchX className="h-7 w-7 text-slate-400" />
          </div>
          <h2 className="text-base font-semibold text-slate-700 mb-1">
            No reservation found
          </h2>
          <p className="text-sm text-slate-400 max-w-xs leading-relaxed">
            We couldn&apos;t find a reservation matching your details. Please
            double-check the billing name and email, then try again.
          </p>
        </div>
      )}

      {/* ── Order list ── */}
      {hasResults && (
        <div className="space-y-4">
          {orders.map((order) => (
            <Card
              key={order.id}
              className="shadow-none border border-slate-100 rounded-2xl overflow-hidden"
            >
              <Collapsible
                open={openOrderId === order.id}
                onOpenChange={(isOpen) =>
                  setOpenOrderId(isOpen ? order.id : null)
                }
              >
                {/* Trigger row */}
                <CollapsibleTrigger asChild>
                  <button className="group w-full flex items-center justify-between px-6 py-5 hover:bg-slate-50 transition-colors duration-150 text-left">
                    <div className="flex items-center gap-4">
                      {/* Accent stripe */}
                      <div className="h-10 w-1 rounded-full bg-slate-200 group-data-[state=open]:bg-blue-500 transition-colors duration-200 shrink-0" />
                      <div>
                        <p className="text-sm font-semibold text-slate-800 leading-tight">
                          INVOICE: {order.invoice_number}
                        </p>
                        {order.transaction_date && (
                          <span className="flex items-center gap-1 text-xs text-slate-400 mt-0.5">
                            <CalendarDays className="h-3 w-3 shrink-0" />
                            {formatDate(
                              parseKualaLumpurDate(order.transaction_date),
                              'dd MMM yyyy',
                            )}
                          </span>
                        )}
                      </div>
                    </div>

                    <div className="flex items-center gap-3">
                      <span className="hidden sm:inline-flex text-xs font-medium text-slate-500 bg-slate-100 rounded-full px-3 py-1">
                        <Currency price={order.total_amount} />
                      </span>
                      <ChevronDownIcon className="h-4 w-4 text-slate-400 group-data-[state=open]:rotate-180 transition-transform duration-200" />
                    </div>
                  </button>
                </CollapsibleTrigger>

                {/* Expanded content */}
                <CollapsibleContent>
                  <div
                    className="p-6 grid grid-cols-12 gap-y-8 sm:gap-8"
                    ref={orderDetailsRef}
                  >
                    {/* ── Left: customer + payment ── */}
                    <div className="col-span-12 lg:col-span-4 space-y-6">
                      <CustomerDetail
                        billingName={order.billing_name}
                        billingEmail={order.billing_email}
                        billingPhone={order.billing_phone}
                      />

                      <Card className="w-full shadow-none mt-8">
                        <CardHeader className="pb-3">
                          <CardTitle className="text-xl font-bold">
                            Payment Details
                          </CardTitle>
                          <p className="text-sm text-gray-500">
                            Invoice Number: {order.invoice_number}
                          </p>
                        </CardHeader>

                        <CardContent className="space-y-6">
                          <div className="space-y-2">
                            <div className="text-sm text-gray-500">
                              Total Payment
                            </div>
                            <h2 className="text-3xl font-bold">
                              <Currency price={order.total_amount} />
                            </h2>

                            {order.payment_status === 'PENDING' && (
                              <Alert className="bg-blue-100 border border-blue-300 text-blue-500 rounded mt-3">
                                <Info />
                                <AlertDescription className="text-blue-500">
                                  Your payment will be processed in{' '}
                                  <b>{format(order.total_amount, 'IDR')}</b>
                                </AlertDescription>
                              </Alert>
                            )}
                          </div>

                          <Separator className="my-4" />

                          <PaymentInfo
                            paymentMethod={order.payment_method}
                            paymentStatus={order.payment_status}
                            paymentChannel={order.payment_channel}
                          />
                        </CardContent>
                      </Card>
                    </div>

                    {/* ── Right: order items + notice ── */}
                    <div className="col-span-12 lg:col-span-8 space-y-6">
                      <section className="space-y-6">
                        {/* Fast Boat */}
                        <BoatRouteDialog>
                          {order.fastboat_orders?.map((fastboatOrder) => (
                            <FastboatOrderItem
                              key={fastboatOrder.id}
                              fastboatOrder={fastboatOrder}
                            >
                              <BookingCodeBadge
                                code={fastboatOrder.booking_code}
                              />
                            </FastboatOrderItem>
                          ))}
                        </BoatRouteDialog>

                        {/* Activities */}
                        {order.activity_orders?.map((activityOrder) => (
                          <ActivityOrderItem
                            key={activityOrder.id}
                            activityOrder={activityOrder}
                          >
                            <BookingCodeBadge
                              code={activityOrder.booking_code}
                            />
                          </ActivityOrderItem>
                        ))}

                        {/* Tour Packages */}
                        {order.tour_package_orders?.map((tourPackageOrder) => (
                          <TourPackageOrderItem
                            key={tourPackageOrder.id}
                            tourPackageOrder={tourPackageOrder}
                          >
                            <BookingCodeBadge
                              code={tourPackageOrder.booking_code}
                            />
                          </TourPackageOrderItem>
                        ))}
                      </section>

                      {/* WhatsApp notice */}
                      {merchant?.business_profile?.last_booking_phone && (
                        <Alert className="bg-blue-50 border-blue-100 rounded-xl">
                          <MessageCircle className="h-4 w-4 !text-blue-500 shrink-0" />
                          <AlertDescription className="text-blue-700 text-sm leading-relaxed">
                            <p>
                              Please contact us on WhatsApp at{' '}
                              <a
                                className="font-semibold underline"
                                href={`https://wa.me/${merchant.business_profile.last_booking_phone}?text=${encodeURIComponent(`Hi ${merchant?.name}, I'd like to request my e-ticket for invoice #${order.invoice_number}. Please send it to me. Thank you!`)}`}
                                target="_blank"
                                rel="noreferrer noopener"
                              >
                                {merchant.business_profile.last_booking_phone}
                              </a>{' '}
                              with your invoice number to get your e-ticket.
                            </p>
                          </AlertDescription>
                        </Alert>
                      )}
                    </div>
                  </div>
                </CollapsibleContent>
              </Collapsible>
            </Card>
          ))}
        </div>
      )}
    </section>
  )
}

const BookingCodeBadge: React.FC<{ code: string }> = ({ code }) => (
  <div className="flex items-center gap-2 mb-5">
    <span className="text-xs text-slate-500 font-medium">Booking Code</span>
    <Badge variant="success">{code}</Badge>
  </div>
)

export default CheckReservation