"use client";

import { useContextElement } from "@/context/Context";
import React, { useState, useEffect } from "react";
import {
  fetchUserData,
  fetchCities,
  fetchDistricts,
  fetchCheckOutData,
  getCartProductsDB,
  removefromcart_db,
  fetchUserAddresses,
} from "@/services/Api";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";

export default function Checkout() {
  const { token, setCartProducts, removeFromCartEntireElement } =
    useContextElement();

  const [name, setName] = useState("");
  const [lastname, setLastname] = useState("");
  const [personalid, setPersonalid] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  //const [region, setRegion] = useState("");
  const [address, setAddress] = useState("");
  const [city, setCity] = useState("");
  const [district, setDistrict] = useState("");

  const [note, setNote] = useState("");
  const [addresses, setAddresses] = useState([]);
  const [selectedAddressId, setSelectedAddressId] = useState("");
  const [saveAddress, setSaveAddress] = useState(false);
  const [addressTitle, setAddressTitle] = useState("");

  const [cityList, setCityList] = useState([]);
  const [districtList, setDistrictList] = useState([]);

  const [cartProductstoken, setCartProductstoken] = useState([]);
  const [giftsProducts, setGiftsProducts] = useState([]);
  const [totalPrice, setTotalPrice] = useState(0);
  const [finalPrice, setFinalPrice] = useState(0);
  const [price, setPrice] = useState(0);
  const [vaucherDiscount, setVaucherDiscount] = useState(0);
  const [deliveryPrice, setDeliveryPrice] = useState(0);
  const [netWeight, setNetWeight] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [errors, setErrors] = useState({});
  const [checkoutShow, setCheckoutShow] = useState(null);

  const [paymentStatus, setPaymentStatus] = useState(1); // 1: ნაღდი, 2: ტერმინალი, 3: ბარათი

  const errorStyle = {
    color: "red",
    fontSize: "13px",
    marginTop: "5px",
  };

  useEffect(() => {
    if (!token) return;

    async function loadAddresses() {
      try {
        const res = await fetchUserAddresses(token);
        console.log("token:", token);
        console.log("fetchUserAddresses res:", res);
        console.log("res?.addresses:", res?.addresses);

        setAddresses(Array.isArray(res?.addresses) ? res.addresses : []);
      } catch (err) {
        console.error("fetchUserAddresses error:", err);
        setAddresses([]);
      }
    }

    loadAddresses();
  }, [token]);

  // Fetch checkout cart data
  useEffect(() => {
    if (!token) return;
    async function fetchData() {
      try {
        // const response = await fetch(
        // 	`https://backend.canshop.ge/!api/checkout/checkout?city=&token=${token}`
        // );
        // if (!response.ok) throw new Error("Network response was not ok");

        // const data = await response.json();

        // setCartProductstoken(
        // 	data?.cart.reduce((acc, product) => {
        // 		console.log("prd", product);
        // 		if (!acc[product.product_id]) {
        // 			acc[product.product_id] = { ...product, amount: 1 };
        // 		} else {
        // 			acc[product.product_id].amount += 1;
        // 		}
        // 		return acc;
        // 	}, {}) || []
        // );
        const data = await getCartProductsDB(token);

        setCartProductstoken(data?.cart);
        setGiftsProducts(data.gifts || []);
        setCheckoutShow(data.checkoutShow ?? 1);

        setTotalPrice(data.total_price || 0);
        setFinalPrice(data.final_price || 0);
        setVaucherDiscount(data.voucher_discount || 0);
        setPrice(data.price || 0);
        setDeliveryPrice(data.delivery_price || 0);
        setNetWeight(data.netweight || 0);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [token]);

  // Fetch cities
  useEffect(() => {
    async function loadCities() {
      const cities = await fetchCities();
      setCityList(cities);
    }
    loadCities();
  }, []);

  // Fetch districts
  useEffect(() => {
    async function loadDistricts() {
      const districts = await fetchDistricts();
      setDistrictList(districts);
    }
    loadDistricts();
  }, []);

  useEffect(() => {
    if (city !== "თბილისი" && !district) {
      setDistrict("");
    }
  }, [city, district]);

  // Fetch user profile and address info
  useEffect(() => {
    if (!token) return;

    async function fetchUserDetails() {
      const [checkoutUser, user] = await Promise.all([
        fetchCheckOutData(token),
        fetchUserData(token),
      ]);

      const combinedUser = { ...checkoutUser, ...user };

      if (combinedUser.name) setName(combinedUser.name);
      if (combinedUser.lastname) setLastname(combinedUser.lastname);
      if (combinedUser.personalid && combinedUser.personalid !== "0")
        setPersonalid(combinedUser.personalid);
      if (combinedUser.phone) setPhone(combinedUser.phone);
      // if (combinedUser.address) setAddress(combinedUser.address);
      // if (combinedUser.city) setCity(combinedUser.city);
      if (combinedUser.email) setEmail(combinedUser.email);
      //if (combinedUser.region) setRegion(combinedUser.region);
      if (combinedUser.note) setNote(combinedUser.note);
    }

    fetchUserDetails();
  }, [token]);

  const removeItem = (id) => {
    setCartProductstoken((pre) => [...pre.filter((elm) => elm.id != id)]);
    removeFromCartEntireElement(id);
    if (token) removefromcart_db(token, id);
  };

  return (
    <form
      noValidate
      action="https://backend.canshop.ge/sale"
      method="POST"
      onSubmit={(e) => {
        const newErrors = {};

        if (!name.trim()) {
          newErrors.name = "გთხოვთ შეავსოთ სახელი";
        }

        if (!lastname.trim()) {
          newErrors.lastname = "გთხოვთ შეავსოთ გვარი";
        }

        if (!personalid.trim()) {
          newErrors.personalid = "გთხოვთ შეავსოთ პირადი ნომერი";
        }

        if (!city.trim()) {
          newErrors.city = "გთხოვთ აირჩიოთ ქალაქი/სოფელი";
        }

        if (city === "თბილისი" && !district.trim()) {
          newErrors.district = "გთხოვთ აირჩიოთ უბანი";
        }

        if (!address.trim()) {
          newErrors.address = "გთხოვთ შეავსოთ მისამართი";
        }

        if (!phone.trim()) {
          newErrors.phone = "გთხოვთ შეავსოთ ტელეფონის ნომერი";
        }

        const agree = document.getElementById("check-agree");

        if (!agree?.checked) {
          newErrors.agree = "გთხოვთ დაეთანხმოთ წესებს და პირობებს";
        }

        setErrors(newErrors);

        // if (Object.keys(newErrors).length > 0) {
        //   e.preventDefault();
        // }
        if (Object.keys(newErrors).length > 0) {
          e.preventDefault();

          // პირველი შეცდომიანი ველის პოვნა
          const firstErrorField = Object.keys(newErrors)[0];

          // const field = document.getElementById(firstErrorField);
          const field = document.getElementById(
            firstErrorField === "agree" ? "check-agree" : firstErrorField,
          );

          if (field) {
            field.scrollIntoView({
              behavior: "smooth",
              block: "center",
            });

            setTimeout(() => {
              field.focus();
            }, 300);
          }
        }
      }}
    >
      <input type="hidden" name="token" value={token || ""} />
      <input type="hidden" name="paymentstatus" value={paymentStatus} />
      <section className="">
        <div className="container">
          <div className="tf-page-cart-wrap1 layout-2">
            <div className="tf-page-cart-item">
              <section className="flat-spacing-11">
                <div className="tf-page-cart-wrap layout-2">
                  <div className="tf-page-cart-item">
                    <h5 className="fw-5 mb_20 mainfont">მისამართი</h5>
                    <div className="form-checkout">
                      <div className="box grid-2">
                        <fieldset className="fieldset">
                          <label htmlFor="name" className="mainfont">
                            სახელი
                          </label>
                          <input
                            required
                            type="text"
                            id="name"
                            name="name"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                          />
                          {errors.name && (
                            <div className="mainfont" style={errorStyle}>
                              {errors.name}
                            </div>
                          )}
                        </fieldset>
                        <fieldset className="fieldset">
                          <label htmlFor="lastname" className="mainfont">
                            გვარი
                          </label>
                          <input
                            required
                            type="text"
                            id="lastname"
                            name="lastname"
                            value={lastname}
                            onChange={(e) => setLastname(e.target.value)}
                          />
                          {errors.lastname && (
                            <div className="mainfont" style={errorStyle}>
                              {errors.lastname}
                            </div>
                          )}
                        </fieldset>
                      </div>

                      <fieldset className="box fieldset">
                        <label htmlFor="personalid" className="mainfont">
                          პირადი ნომერი
                        </label>
                        <input
                          required
                          type="text"
                          id="personalid"
                          name="personalid"
                          value={personalid}
                          onChange={(e) => setPersonalid(e.target.value)}
                        />
                        {errors.personalid && (
                          <div className="mainfont" style={errorStyle}>
                            {errors.personalid}
                          </div>
                        )}
                      </fieldset>

                      <fieldset className="box fieldset">
                        <label htmlFor="savedAddress" className="mainfont">
                          მისამართები
                        </label>

                        <select
                          id="savedAddress"
                          name="address_id"
                          value={selectedAddressId}
                          onChange={(e) => {
                            const value = e.target.value;

                            setSelectedAddressId(value);

                            if (!value) {
                              setAddress("");
                              setCity("");
                              setDistrict("");
                              return;
                            }

                            const selected = addresses.find(
                              (a) => String(a.id) === value,
                            );

                            if (!selected) return;

                            setAddress(selected.address || "");
                            setCity(selected.city || "");
                            setDistrict(selected.district || "");
                          }}
                          className="tf-select w-100 mainfont"
                        >
                          <option value="">
                            აირჩიეთ დამატებული მისამართებიდან
                          </option>

                          {addresses.map((a) => (
                            <option key={a.id} value={String(a.id)}>
                              {a.title} - {a.city} - {a.address}
                            </option>
                          ))}
                        </select>
                      </fieldset>

                      <fieldset className="box fieldset">
                        <label htmlFor="city" className="mainfont">
                          გთხოვთ აირჩიოთ ქალაქი/სოფელი
                        </label>
                        <select
                          id="city"
                          name="city"
                          value={city}
                          onChange={(e) => setCity(e.target.value)}
                          className="tf-select w-100 mainfont"
                          required
                        >
                          <option value="">აირჩიეთ ქალაქი</option>
                          {cityList.map((cityItem) => (
                            <option key={cityItem.id} value={cityItem.value}>
                              {cityItem.value}
                            </option>
                          ))}
                        </select>
                        {errors.city && (
                          <div className="mainfont" style={errorStyle}>
                            {errors.city}
                          </div>
                        )}
                      </fieldset>

                      {(city === "თბილისი" || district) && (
                        <fieldset className="box fieldset">
                          <label htmlFor="city" className="mainfont">
                            გთხოვთ აირჩიოთ უბანი
                          </label>
                          <select
                            id="district"
                            name="district"
                            value={district}
                            onChange={(e) => setDistrict(e.target.value)}
                            className="tf-select w-100 mainfont"
                            required
                          >
                            <option value="">აირჩიეთ უბანი</option>
                            {districtList.map((districtItem) => (
                              <option
                                key={districtItem.id}
                                value={districtItem.value}
                              >
                                {districtItem.value}
                              </option>
                            ))}
                          </select>
                          {errors.district && (
                            <div className="mainfont" style={errorStyle}>
                              {errors.district}
                            </div>
                          )}
                        </fieldset>
                      )}

                      <fieldset className="box fieldset">
                        <label htmlFor="address" className="mainfont">
                          მისამართი
                        </label>
                        <input
                          type="text"
                          id="address"
                          name="address"
                          value={address}
                          required
                          onChange={(e) => setAddress(e.target.value)}
                        />
                        {errors.address && (
                          <div className="mainfont" style={errorStyle}>
                            {errors.address}
                          </div>
                        )}
                      </fieldset>

                      {!selectedAddressId && (
                        <>
                          <div className="box-checkbox fieldset-radio mb_20 mt_20">
                            <input
                              type="checkbox"
                              id="save-address"
                              name="save_address"
                              value="1"
                              className="tf-check"
                              checked={saveAddress}
                              onChange={(e) => setSaveAddress(e.target.checked)}
                            />

                            <label
                              htmlFor="save-address"
                              className="text_black-3 mainfont  ms-2"
                            >
                              გინდათ მისამართის შენახვა
                            </label>
                          </div>

                          {saveAddress && (
                            <fieldset className="box fieldset">
                              <label
                                htmlFor="addressTitle"
                                className="mainfont"
                              >
                                მისამართის სათაური
                              </label>

                              <input
                                type="text"
                                id="addressTitle"
                                name="address_title"
                                value={addressTitle}
                                onChange={(e) =>
                                  setAddressTitle(e.target.value)
                                }
                                placeholder=""
                              />
                            </fieldset>
                          )}
                        </>
                      )}
                      <fieldset className="box fieldset">
                        <label htmlFor="phone" className="mainfont">
                          ტელეფონის ნომერი
                        </label>
                        <input
                          required
                          type="text"
                          id="phone"
                          name="phone"
                          value={phone}
                          onChange={(e) => setPhone(e.target.value)}
                        />
                        {errors.phone && (
                          <div className="mainfont" style={errorStyle}>
                            {errors.phone}
                          </div>
                        )}
                      </fieldset>

                      <fieldset className="box fieldset">
                        <label htmlFor="email" className="mainfont">
                          ელექტრონული ფოსტა
                        </label>
                        <input
                          type="email"
                          id="email"
                          name="email"
                          value={email}
                          onChange={(e) => setEmail(e.target.value)}
                        />
                      </fieldset>

                      <fieldset className="box fieldset">
                        <label htmlFor="note" className="mainfont">
                          კომენტარი
                        </label>
                        <textarea
                          id="note"
                          name="note"
                          rows="4"
                          value={note}
                          onChange={(e) => setNote(e.target.value)}
                        />
                      </fieldset>
                    </div>
                  </div>

                  <div className="tf-page-cart-footer">
                    <div className="tf-cart-footer-inner">
                      <h5 className="fw-5 mb_20 mainfont">თქვენი შეკვეთა</h5>
                      <div className="tf-page-cart-checkout widget-wrap-checkout">
                        <ul className="wrap-checkout-product">
                          {cartProductstoken?.map((product, index) => (
                            <li key={index} className="checkout-product-item">
                              <figure className="img-product">
                                <img
                                  alt={product.products.title}
                                  src={`https://backend.canshop.ge/${product.products.attached.file_name}`}
                                  width={100}
                                  height={100}
                                />
                                <span className="quantity">
                                  {product.amount}
                                </span>
                              </figure>
                              <div>
                                <div className="content">
                                  <div className="info name mainfont">
                                    {product.products.title}
                                  </div>
                                  <span className="price checkount mainfont">
                                    {(
                                      product?.price * product.products.amount
                                    ).toFixed(2)}{" "}
                                    ₾
                                  </span>
                                </div>
                                <div>
                                  <span
                                    className="remove-cart link remove mainfont tf-mini-cart-remove"
                                    onClick={() => removeItem(product.id)}
                                  >
                                    წაშლა
                                  </span>
                                </div>
                              </div>
                            </li>
                          ))}
                        </ul>

                        {!cartProductstoken?.length && (
                          <div className="container">
                            <div className="row align-items-center mt-5 mb-5">
                              <div className="col-12 fs-18 mainfont">
                                კალათა ცარიალია
                              </div>
                              <div className="col-12 mt-3 mainfont">
                                <Link
                                  href={`/`}
                                  className="tf-btn btn-fill animate-hover-btn radius-3 w-100 justify-content-center"
                                  style={{ width: "fit-content" }}
                                >
                                  პროდუქტების ნახვა
                                </Link>
                              </div>
                            </div>
                          </div>
                        )}

                        {/* <div className="coupon-box mainfont">
                          <input
                            type="text"
                            placeholder="ფასდაკლების კოდი"
                            className="mainfont"
                          />
                          <a
                            href="#"
                            className="tf-btn btn-sm radius-3 btn-fill btn-icon animate-hover-btn mainfont"
                          >
                            შემოწმება
                          </a>
                        </div> */}

                        <div
                          className="d-grid"
                          style={{
                            gridTemplateColumns: "auto auto",
                            justifyContent: "end",
                            gap: "0.5rem",
                          }}
                        >
                          <div className="fw-5 mainfont">ღირებულება</div>
                          <div className="total fw-5">
                            {(totalPrice - price).toFixed(2)}₾
                          </div>
                          <div className="fw-5 mainfont">წონა</div>
                          <div className="total fw-5 mainfont">
                            {netWeight.toFixed(2)}კგ
                          </div>
                          <div className="fw-5 mainfont">მიტანის სერვისი</div>
                          <div className="total fw-5">{deliveryPrice}₾</div>
                          <div className="fw-5 mainfont">სულ გადასახადი</div>
                          <div className="total fw-5">
                            {finalPrice.toFixed(2)}₾
                          </div>
                        </div>
                        {checkoutShow == 1 ? (
                          <>
                            <div className="wd-check-payment">
                              <div className="fieldset-radio mb_20">
                                <input
                                  required
                                  type="radio"
                                  name="payment"
                                  id="cash"
                                  value="cash"
                                  className="tf-check mainfont"
                                  checked={paymentStatus === 1}
                                  onChange={() => setPaymentStatus(1)}
                                />
                                <label htmlFor="cash" className="mainfont">
                                  ნაღდი ანგარიშსწორებით
                                </label>
                              </div>

                              <div className="fieldset-radio mb_20">
                                <input
                                  required
                                  type="radio"
                                  name="payment"
                                  id="terminal"
                                  value="terminal"
                                  className="tf-check"
                                  checked={paymentStatus === 2}
                                  onChange={() => setPaymentStatus(2)}
                                />
                                <label htmlFor="terminal" className="mainfont">
                                  ტერმინალით
                                </label>
                              </div>

                              <div className="fieldset-radio mb_20">
                                <input
                                  required
                                  type="radio"
                                  name="payment"
                                  id="card"
                                  value="card"
                                  className="tf-check"
                                  checked={paymentStatus === 3}
                                  onChange={() => setPaymentStatus(3)}
                                />
                                <label htmlFor="card" className="mainfont">
                                  ბარათით გადახდა
                                </label>
                              </div>
                            </div>

                            <div className="box-checkbox fieldset-radio mb_20">
                              &nbsp;
                              <input
                                required
                                type="checkbox"
                                id="check-agree"
                                className="tf-check"
                              />
                              <label
                                htmlFor="check-agree"
                                className="text_black-2 mainfont"
                              >
                                &nbsp; ვეთანხმები{" "}
                                <Link
                                  href={`/terms-conditions`}
                                  className="text-decoration-underline"
                                >
                                  წესები და პირობები
                                </Link>
                                .
                              </label>
                              {errors.agree && (
                                <div className="mainfont" style={errorStyle}>
                                  {errors.agree}
                                </div>
                              )}
                            </div>

                            <button
                              type="submit"
                              className="tf-btn radius-3 btn-fill btn-icon animate-hover-btn justify-content-center mainfont"
                            >
                              შეკვეთა
                            </button>
                          </>
                        ) : (
                          <div
                            className="mainfont"
                            style={{
                              marginTop: "20px",
                              padding: "14px 16px",
                              borderRadius: "8px",
                              background: "#f5f5f5",
                              color: "#555",
                              textAlign: "center",
                              fontWeight: "500",
                            }}
                          >
                            საიტი მუშაობს სატესტო რეჟიმში, შეკვეთის განთავსებას
                            საიტზე უახლოეს პერიოდში შეძლებთ.
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </section>
    </form>
  );
}