'use client';
/* eslint-disable */
import LogosProduct from '@/assets/product.png';
import { BASE_URL } from '@/shared/config/api/URLs';
import { useCartId } from '@/shared/hooks/cartId';
import formatDate from '@/shared/lib/formatDate';
import formatPrice from '@/shared/lib/formatPrice';
import { cn } from '@/shared/lib/utils';
import { Button } from '@/shared/ui/button';
import { Calendar } from '@/shared/ui/calendar';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from '@/shared/ui/form';
import { Input } from '@/shared/ui/input';
import { Label } from '@/shared/ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '@/shared/ui/popover';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/shared/ui/select';
import { Textarea } from '@/shared/ui/textarea';
import { userStore } from '@/widgets/welcome/lib/hook';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  Map,
  Placemark,
  Polygon,
  YMaps,
  ZoomControl,
} from '@pbe/react-yandex-maps';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { format } from 'date-fns';
import { uz } from 'date-fns/locale';
import {
  Calendar as CalIcon,
  CheckCircle2,
  Clock,
  Loader2,
  LocateFixed,
  MapPin,
} from 'lucide-react';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import z from 'zod';
import { cart_api, OrderCreateBody } from '../lib/api';
import { orderForm } from '../lib/form';

interface CoordsData {
  lat: number;
  lon: number;
  polygon: [number, number][][];
}

// Yetkazib berish vaqt oraliqlar
const deliveryTimeSlots = [
  { id: 1, label: '09:00 - 11:00', start: '09:00', end: '11:00' },
  { id: 2, label: '11:00 - 13:00', start: '11:00', end: '13:00' },
  { id: 3, label: '13:00 - 15:00', start: '13:00', end: '15:00' },
  { id: 4, label: '15:00 - 17:00', start: '15:00', end: '17:00' },
  { id: 5, label: '17:00 - 19:00', start: '17:00', end: '19:00' },
  { id: 6, label: '19:00 - 21:00', start: '19:00', end: '21:00' },
];

const OrderPage = () => {
  const t = useTranslations();
  const { user } = userStore();
  const form = useForm<z.infer<typeof orderForm>>({
    resolver: zodResolver(orderForm),
    defaultValues: {
      comment: '',
      lat: '41.311081',
      long: '69.240562',
    },
  });
  const [cart, setCart] = useState<number | string | null>(null);
  const { cart_id } = useCartId();
  const [orderSuccess, setOrderSuccess] = useState(false);
  const queryClinet = useQueryClient();

  const { data } = useQuery({
    queryKey: ['clear_cart', cart],
    queryFn: () => cart_api.clear_cart(cart!),
    enabled: !!cart,
  });

  console.log(data);

  const { mutate, isPending } = useMutation({
    mutationFn: (body: OrderCreateBody) => cart_api.createOrder(body),
    onSuccess: (res) => {
      const message = JSON.parse(res.data.response);
      if (message.successes.length > 0) {
        setOrderSuccess(true);
        setCart(cart_id);

        queryClinet.refetchQueries({ queryKey: ['cart_items'] });
      } else {
        toast.error(t('Xatolik yuz berdi'), {
          richColors: true,
          position: 'top-center',
        });
      }
    },
    onError: (error: AxiosError) => {
      (
        error.response?.data as { items: { non_field_errors: string[] }[] }
      ).items
        ?.flatMap((i) => i.non_field_errors || [])
        .forEach((msg: string) =>
          toast.error(msg, { richColors: true, position: 'top-center' }),
        );
    },
  });

  const { data: cartItems } = useQuery({
    queryKey: ['cart_items', cart_id],
    queryFn: () => cart_api.get_cart_items(cart_id!),
    enabled: !!cart_id,
    select: (data) => data.data.cart_item,
  });

  // Yetkazib berish vaqti uchun state
  const [deliveryDate, setDeliveryDate] = useState<Date>();
  const [selectedTimeSlot, setSelectedTimeSlot] = useState<string>('');

  const subtotal =
    cartItems?.reduce((sum, item) => {
      if (item.product.prices.length === 0) return sum; // narx yo'q bo'lsa qo'shmaymiz

      // Eng yuqori narxni olish
      const maxPrice = Math.max(
        ...item.product.prices.map((p) => Number(p.price)),
      );

      return sum + maxPrice * item.quantity;
    }, 0) || 0; // cartItems bo'sh bo'lsa 0 qaytaradi

  const [coords, setCoords] = useState({
    latitude: 41.311081,
    longitude: 69.240562,
    zoom: 12,
  });

  const [polygonCoords, setPolygonCoords] = useState<
    [number, number][][] | null
  >(null);

  const getCoords = async (name: string): Promise<CoordsData | null> => {
    const res = await fetch(
      `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(name)}&format=json&polygon_geojson=1&limit=1`,
    );
    const data = await res.json();

    if (data.length > 0 && data[0].geojson) {
      const lat = parseFloat(data[0].lat);
      const lon = parseFloat(data[0].lon);

      let polygon: [number, number][][] = [];

      if (data[0].geojson.type === 'Polygon') {
        polygon = data[0].geojson.coordinates.map((ring: [number, number][]) =>
          ring.map((coord: [number, number]) => [coord[1], coord[0]]),
        );
      } else if (data[0].geojson.type === 'MultiPolygon') {
        polygon = data[0].geojson.coordinates.map(
          (poly: [number, number][][]) =>
            poly[0].map((coord: [number, number]) => [coord[1], coord[0]]),
        );
      }

      return { lat, lon, polygon };
    }

    return null;
  };

  const handleMapClick = (
    e: ymaps.IEvent<MouseEvent, { coords: [number, number] }>,
  ) => {
    const [lat, lon] = e.get('coords');

    setCoords({ latitude: lat, longitude: lon, zoom: 18 });

    form.setValue('lat', lat.toString(), { shouldDirty: true });
    form.setValue('long', lon.toString(), { shouldDirty: true });
  };

  const handleShowMyLocation = () => {
    if (!navigator.geolocation) {
      alert("Sizning brauzeringiz geolokatsiyani qo'llab-quvvatlamaydi");
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        setCoords({ latitude: lat, longitude: lon, zoom: 14 });
        form.setValue('lat', lat.toString());
        form.setValue('long', lon.toString());
      },
      (error) => {
        alert('Joylashuv aniqlanmadi: ' + error.message);
      },
    );
  };

  const cityValue = form.watch('city');

  useEffect(() => {
    if (!cityValue || cityValue.length < 3) return;

    const timeout = setTimeout(async () => {
      const result = await getCoords(cityValue);

      if (!result) return;

      setCoords({
        latitude: result.lat,
        longitude: result.lon,
        zoom: 12,
      });

      setPolygonCoords(result.polygon);

      form.setValue('lat', result.lat.toString(), { shouldDirty: true });
      form.setValue('long', result.lon.toString(), { shouldDirty: true });
    }, 700);

    return () => clearTimeout(timeout);
  }, [cityValue]);

  function onSubmit(value: z.infer<typeof orderForm>) {
    if (!cartItems || cartItems.length === 0) {
      toast.error(t("Savatcha bo'sh"), {
        richColors: true,
        position: 'top-center',
      });
      return;
    }

    // Yetkazib berish vaqtini tekshirish
    if (!deliveryDate) {
      toast.error(t('Yetkazib berish sanasini tanlang'), {
        richColors: true,
        position: 'top-center',
      });
      return;
    }

    if (!selectedTimeSlot) {
      toast.error(t('Yetkazib berish vaqtini tanlang'), {
        richColors: true,
        position: 'top-center',
      });
      return;
    }

    const order_products = cartItems
      .filter(
        (item) =>
          item.product.prices &&
          item.product.prices.length > 0 &&
          item.product.prices[0].price_type?.code &&
          item.product.prices[0].price,
      )
      .map((item) => ({
        inventory_kind: 'G',
        product_code: item.product.code,
        on_balance: 'Y',
        order_quant: item.quantity,
        price_type_code: item.product.prices![0].price_type.code,
        product_price: item.product.prices![0].price,
        warehouse_code: 'wh1',
      }));
    if (user) {
      mutate({
        order: [
          {
            filial_code: process.env.NEXT_FILIAL_CODE!,
            delivery_date: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
            room_code: process.env.NEXT_ROOM_CODE!,
            deal_time: formatDate.format(deliveryDate, 'DD.MM.YYYY'),
            robot_code: process.env.NEXT_ROBOT_CODE!,
            status: 'B#N',
            sales_manager_code: process.env.NEXT_SALES_MANAGER_CODE!,
            person_code: user?.username,
            currency_code: '860',
            owner_person_code: user?.username,
            note: value.comment,
            order_products: order_products,
          },
        ],
      });
    } else {
      toast.error(t('Xatolik yuz berdi'), {
        richColors: true,
        position: 'top-center',
      });
    }
  }

  if (orderSuccess) {
    return (
      <div className="flex justify-center items-center h-screen">
        <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
          <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <CheckCircle2 className="w-12 h-12 text-green-600" />
          </div>
          <h2 className="text-2xl font-bold text-gray-800 mb-2">
            {t('Buyurtma qabul qilindi!')}
          </h2>
          <p className="text-gray-500 mb-6">
            {t('Buyurtmangiz muvaffaqiyatli qabul qilindi')}
          </p>
          <button
            onClick={() => (window.location.href = '/')}
            className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
          >
            {t('Bosh sahifaga qaytish')}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="custom-container mb-5">
      <div>
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">
            {t('Buyurtmani rasmiylashtirish')}
          </h1>
          <p className="text-gray-600">{t("Ma'lumotlaringizni to'ldiring")}</p>
        </div>
        <Form {...form}>
          <div onSubmit={form.handleSubmit(onSubmit)} className="contents">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div className="lg:col-span-2 space-y-6">
                {/* Contact Information */}
                <div className="bg-white rounded-lg shadow-md p-6">
                  <FormField
                    control={form.control}
                    name="comment"
                    render={({ field }) => (
                      <FormItem>
                        <Label className="block mt-3 text-sm font-medium text-gray-700">
                          {t('Izoh')}
                        </Label>
                        <FormControl>
                          <Textarea
                            {...field}
                            className="w-full min-h-42 max-h-64 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
                            placeholder={t('Izoh')}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                {/* Delivery Address */}
                <div className="bg-white rounded-lg shadow-md p-6">
                  <div className="flex items-center gap-2 mb-4">
                    <MapPin className="w-5 h-5 text-blue-600" />
                    <h2 className="text-xl font-semibold">
                      {t('Yetkazib berish manzili')}
                    </h2>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="city"
                      render={({ field }) => (
                        <FormItem>
                          <Label className="block text-sm font-medium text-gray-700">
                            {t('Manzilni qidirish')}
                          </Label>
                          <FormControl>
                            <Input
                              {...field}
                              type="text"
                              className="w-full border h-12 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
                              placeholder={t('Toshkent')}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <div className="md:col-span-2">
                      <div className="relative h-80 border rounded-lg overflow-hidden">
                        <YMaps query={{ lang: 'en_RU' }}>
                          <Map
                            key={`${coords.latitude}-${coords.longitude}`}
                            state={{
                              center: [coords.latitude, coords.longitude],
                              zoom: coords.zoom,
                            }}
                            width="100%"
                            height="100%"
                            onClick={handleMapClick}
                          >
                            <ZoomControl
                              options={{
                                position: { right: '10px', bottom: '70px' },
                              }}
                            />
                            <Placemark
                              geometry={[coords.latitude, coords.longitude]}
                            />
                            {polygonCoords && (
                              <Polygon
                                geometry={polygonCoords}
                                options={{
                                  fillColor: 'rgba(0, 150, 255, 0.2)',
                                  strokeColor: 'rgba(0, 150, 255, 0.8)',
                                  strokeWidth: 2,
                                  interactivityModel: 'default#transparent',
                                }}
                              />
                            )}
                          </Map>
                        </YMaps>
                        <Button
                          type="button"
                          size="sm"
                          onClick={handleShowMyLocation}
                          className="absolute bottom-3 right-2.5 shadow-md bg-white text-black hover:bg-gray-100"
                        >
                          <LocateFixed className="w-4 h-4 mr-1" />
                          {t('Mening joylashuvim')}
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Yetkazib berish vaqti - Yangilangan versiya */}
                <div className="bg-white rounded-lg shadow-md p-6">
                  <div className="flex items-center gap-2 mb-4">
                    <Clock className="w-5 h-5 text-blue-600" />
                    <h2 className="text-xl font-semibold">
                      {t('Yetkazib berish vaqti')}
                    </h2>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* Sana tanlash */}
                    <div className="space-y-2">
                      <Label className="block text-sm font-medium text-gray-700">
                        {t('Yetkazib berish sanasi')}
                      </Label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button
                            type="button"
                            variant="outline"
                            className={cn(
                              'w-full h-12 justify-start text-left font-normal',
                              !deliveryDate && 'text-muted-foreground',
                            )}
                          >
                            <CalIcon className="mr-2 h-4 w-4" />
                            {deliveryDate ? (
                              format(deliveryDate, 'dd MMMM yyyy', {
                                locale: uz,
                              })
                            ) : (
                              <span>{t('Sanani tanlang')}</span>
                            )}
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                          <Calendar
                            mode="single"
                            selected={deliveryDate}
                            captionLayout="dropdown"
                            toYear={new Date().getFullYear() + 10}
                            onSelect={setDeliveryDate}
                            disabled={(date) =>
                              date < new Date() ||
                              date < new Date(new Date().setHours(0, 0, 0, 0))
                            }
                            initialFocus
                          />
                        </PopoverContent>
                      </Popover>
                    </div>

                    {/* Vaqt tanlash */}
                    <div className="space-y-2">
                      <Label className="block text-sm font-medium text-gray-700">
                        {t("Vaqt oralig'i")}
                      </Label>
                      <Select
                        value={selectedTimeSlot}
                        onValueChange={setSelectedTimeSlot}
                      >
                        <SelectTrigger className="w-full !h-12">
                          <SelectValue placeholder={t('Vaqtni tanlang')} />
                        </SelectTrigger>
                        <SelectContent>
                          {deliveryTimeSlots.map((slot) => (
                            <SelectItem key={slot.id} value={slot.label}>
                              <div className="flex items-center gap-2">
                                <Clock className="w-4 h-4 text-gray-500" />
                                {slot.label}
                              </div>
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  {/* Tanlangan vaqt ko'rinishi */}
                  {deliveryDate && selectedTimeSlot && (
                    <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                      <div className="flex items-start gap-3">
                        <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                          <CalIcon className="w-5 h-5 text-blue-600" />
                        </div>
                        <div>
                          <p className="font-semibold text-gray-800">
                            {t('Tanlangan yetkazib berish vaqti')}
                          </p>
                          <p className="text-sm text-gray-600 mt-1">
                            {format(deliveryDate, 'dd MMMM yyyy', {
                              locale: uz,
                            })}{' '}
                            | {selectedTimeSlot}
                          </p>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* Right Column - Order Summary */}
              <div className="lg:col-span-1">
                <div className="bg-white rounded-lg shadow-md p-6 sticky top-4">
                  <h3 className="text-xl font-bold mb-4">{t('Mahsulotlar')}</h3>

                  {/* Cart Items */}
                  <div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
                    {cartItems?.map((item) => (
                      <div key={item.id} className="flex gap-3 pb-3 border-b">
                        <Image
                          width={500}
                          height={500}
                          unoptimized
                          src={
                            item.product.images.length !== 0
                              ? BASE_URL + item.product.images[0].image
                              : LogosProduct
                          }
                          alt={item.product.name}
                          className="w-16 h-16 object-contain bg-gray-100 rounded"
                        />
                        <div className="flex-1">
                          <h4 className="font-medium text-sm">
                            {item.product.name}
                          </h4>
                          <p className="text-sm text-gray-500">
                            {item.quantity} x{' '}
                            {formatPrice(
                              item.product.prices.length !== 0
                                ? Math.max(
                                    ...item.product.prices.map((p) =>
                                      Number(p.price),
                                    ),
                                  )
                                : 0,
                              true,
                            )}
                          </p>
                          <p className="font-semibold text-sm">
                            {formatPrice(
                              item.product.prices.length !== 0
                                ? Math.max(
                                    ...item.product.prices.map((p) =>
                                      Number(p.price),
                                    ),
                                  ) * item.quantity
                                : 0 * item.quantity,
                              true,
                            )}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Pricing */}
                  <div className="space-y-2 mb-4 pt-4 border-t">
                    <div className="flex justify-between text-gray-600">
                      <span>{t('Mahsulotlar')}:</span>
                      <span>{subtotal && formatPrice(subtotal, true)}</span>
                    </div>
                  </div>

                  <div className="border-t pt-4 mb-6">
                    <div className="flex justify-between items-center">
                      <span className="text-lg font-semibold">
                        {t('Jami')}:
                      </span>
                      <span className="text-2xl font-bold text-blue-600">
                        {subtotal && formatPrice(subtotal, true)}
                      </span>
                    </div>
                  </div>

                  <button
                    type="submit"
                    disabled={isPending}
                    onClick={form.handleSubmit(onSubmit)}
                    className="w-full bg-blue-600 text-white py-4 rounded-lg font-semibold hover:bg-blue-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed"
                  >
                    {isPending ? (
                      <span className="flex items-center justify-center gap-2">
                        <Loader2 className="animate-spin" />
                      </span>
                    ) : (
                      t('Buyurtmani tasdiqlash')
                    )}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default OrderPage;