"use client";
import { useEffect, useState } from "react";
import { useAtom } from "jotai";
import { Section } from "../section";
import {
  auctionConfigAtom,
  auctionConfigLoadingAtom,
  formAtom,
} from "@/components/state/autionAtoms";
import { Radio, RadioGroup, Input, Checkbox, Spinner } from "@heroui/react";
import { useTranslations } from "next-intl";
import { BaseModal } from "@/components/modal";
import TermsModalContent from "../TermsModalContent";
import RiyalIcon from "@/components/ui/RiyalIcon";
import { AnimatePresence, motion } from "framer-motion";

export function Step2({
  onValidChange,
  showErrors = false,
}: {
  onValidChange?: (v: boolean) => void;
  showErrors?: boolean;
}) {
  const t = useTranslations("ADD_LISTING.STEP2");
  const [form, setForm] = useAtom(formAtom);
  const [config] = useAtom(auctionConfigAtom);
  const [configLoading] = useAtom(auctionConfigLoadingAtom);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isTermsOpen, setIsTermsOpen] = useState(false);
  const isAnnualAuction = form.auction_type === "annual";

  const RiyalSuffix = <RiyalIcon className="w-4 h-4" />;

  const fixedListingFee =
    config?.fees_setting?.offer_listing_fee != null
      ? Number(config.fees_setting.offer_listing_fee) || 0
      : 500;
  console.log("🚀 ~ Step2 ~ fixedListingFee:", fixedListingFee);

  const auctionListingFee =
    config?.fees_setting?.auction_listing_fee != null
      ? Number(config.fees_setting.auction_listing_fee) || 0
      : 1500;
  console.log("🚀 ~ Step2 ~ auctionListingFee:", auctionListingFee);

  useEffect(() => {
    const errs: Record<string, string> = {};

    if (!form.offer) errs.offer = t("errors.offer_required");
    if (!form.terms) errs.terms = t("errors.accept_terms");

    if (!form.animal_usage_id)
      errs.animal_usage_id =
        form.animal_type === "camel"
          ? t("errors.camel_class_required")
          : t("errors.horse_class_required");

    if (!isAnnualAuction) {
      if (form.animal_type === "camel" && !form.camelMode)
        errs.camelMode = t("errors.camel_mode_required");

      if (
        form.animal_type === "camel" &&
        form.camelMode === "group" &&
        !form.camelsCount
      )
        errs.camelsCount = t("errors.camels_count_required");
    }

    if (form.offer === "auction" && !isAnnualAuction && !form.auction_type)
      errs.auction_type = t("errors.auction_type_required");

    if (form.offer === "fixed" && !form.fixedPrice)
      errs.fixedPrice = t("errors.price_required");

    setErrors(errs);
    onValidChange?.(Object.keys(errs).length === 0);
  }, [form]);

  const positiveNumber = (value: string) => {
    const num = Number(value);
    return isNaN(num) || num < 0 ? 0 : num;
  };

  return (
    <>
      <Section title={isAnnualAuction ? t("annual_title") : t("title")}>
        <div className="w-full mt-0 text-start">
          <label className="block text-sm font-medium text-slate-700 mb-2">
            {t("classification")}
          </label>
          {configLoading ? (
            <div className="flex items-center gap-2 py-4">
              <Spinner size="sm" />
              <span className="text-sm text-slate-500">
                {t("loading_usages")}
              </span>
            </div>
          ) : !config?.usages?.length ? (
            <div className="py-4 text-sm text-amber-600">
              <div>{t("usages_load_failed")}</div>
              <div>{t("usages_load_failed_hint")}</div>
            </div>
          ) : (
            <div className="flex flex-wrap gap-3">
              {config.usages.map((usage) => {
                const isSelected = form.animal_usage_id === usage.id;
                return (
                  <button
                    key={usage.id}
                    type="button"
                    onClick={() =>
                      setForm((p) => ({ ...p, animal_usage_id: usage.id }))
                    }
                    className={`px-4 py-2 rounded-lg border transition-all font-medium ${
                      isSelected
                        ? "bg-primary text-white border-primary"
                        : "border-primary text-primary hover:bg-green-50"
                    }`}
                  >
                    {usage.name}
                  </button>
                );
              })}
            </div>
          )}
          {showErrors &&
            errors.animal_usage_id &&
            !configLoading &&
            config?.usages?.length && (
              <p className="text-red-500 text-sm mt-2">
                {errors.animal_usage_id}
              </p>
            )}
        </div>

        {!isAnnualAuction && form.animal_type === "camel" && (
          <div className="mt-4 p-4 rounded-2xl border">
            <div className="font-bold mb-2 text-start">
              {t("camel_offer_type")}
            </div>

            <RadioGroup
              orientation="horizontal"
              value={form.camelMode}
              onValueChange={(v) =>
                setForm((p) => ({
                  ...p,
                  camelMode: v as any,
                  is_group: v === "group",
                }))
              }
            >
              <Radio value="individual">{t("camel_individual")}</Radio>
              <Radio value="group">{t("camel_group")}</Radio>
            </RadioGroup>
            {showErrors && errors.camelMode && (
              <p className="text-red-500 text-sm mt-1">{errors.camelMode}</p>
            )}

            {!isAnnualAuction && form.camelMode === "group" && (
              <div className="grid sm:grid-cols-2 gap-3 mt-3">
                <div className="flex flex-col items-start">
                  <Input
                    type="number"
                    min={0}
                    label={t("camels_count_label")}
                    placeholder={t("camels_count_placeholder")}
                    value={String(form.camelsCount ?? "")}
                    onValueChange={(v) =>
                      setForm((p) => ({
                        ...p,
                        camelsCount: v ? positiveNumber(v) : undefined,
                      }))
                    }
                  />
                  {showErrors && errors.camelsCount && (
                    <p className="text-red-500 text-start inline-block text-sm mt-1">
                      {errors.camelsCount}
                    </p>
                  )}
                </div>
              </div>
            )}
          </div>
        )}
        {!isAnnualAuction &&
          form.animal_type === "camel" &&
          form.camelMode === "group" && (
            <div className="mt-4 p-4 rounded-2xl border text-start">
              <div className="text-sm text-slate-600 text-start mb-1">
                {t("extra_services")}
              </div>
              <div className="flex flex-wrap gap-3 text-sm">
                {config?.additional_services?.map((srv) => {
                  const has = form.additional_services?.includes(srv.id);
                  return (
                    <Checkbox
                      key={srv.id}
                      isSelected={!!has}
                      onValueChange={(sel) => {
                        setForm((p) => {
                          const arr = new Set(p.additional_services || []);
                          sel ? arr.add(srv.id) : arr.delete(srv.id);
                          return { ...p, additional_services: Array.from(arr) };
                        });
                      }}
                    >
                      {srv.name}
                    </Checkbox>
                  );
                })}
              </div>
            </div>
          )}
        {!isAnnualAuction && (
          <div className="mt-4">
            <div className="flex justify-between items-center mb-2">
              <span className="text-sm text-slate-600">
                {t("custom_services")}
              </span>
              <button
                type="button"
                onClick={() =>
                  setForm((p) => ({
                    ...p,
                    custom_services: [...(p.custom_services || []), ""],
                  }))
                }
                className="px-3 py-1 text-green-600 border border-green-300 rounded-lg hover:bg-green-50 text-xl"
              >
                +
              </button>
            </div>

            {(form.custom_services || []).map((service, i) => (
              <div key={i} className="flex gap-2 mb-2">
                <Input
                  type="text"
                  placeholder={t("custom_service_placeholder")}
                  value={service}
                  onValueChange={(v) =>
                    setForm((p) => {
                      const updated = [...(p.custom_services || [])];
                      updated[i] = v;
                      return { ...p, custom_services: updated };
                    })
                  }
                />
                <button
                  type="button"
                  onClick={() =>
                    setForm((p) => {
                      const updated = [...(p.custom_services || [])];
                      updated.splice(i, 1);
                      return { ...p, custom_services: updated };
                    })
                  }
                  className="px-2 py-1 text-red-500 border border-red-300 rounded-lg hover:bg-red-50"
                >
                  ❌
                </button>
              </div>
            ))}
          </div>
        )}

        <div className="mt-4 text-start">
          {!isAnnualAuction && (
            <div className="mb-4">
              <div className="grid grid-cols-2 gap-3">
                {/* Fixed sale card */}
                <button
                  type="button"
                  onClick={() => setForm((p) => ({ ...p, offer: "fixed" as any }))}
                  className={`relative flex flex-col items-center gap-2 rounded-2xl border-2 p-4 transition-all ${
                    form.offer === "fixed"
                      ? "border-primary bg-primary/5 shadow-sm"
                      : "border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50"
                  }`}
                >
                  {form.offer === "fixed" && (
                    <div className="absolute top-2.5 end-2.5 w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" className="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                  )}
                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${form.offer === "fixed" ? "bg-primary/10" : "bg-slate-100"}`}>
                    <svg xmlns="http://www.w3.org/2000/svg" className={`w-5 h-5 ${form.offer === "fixed" ? "text-primary" : "text-slate-500"}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
                  </div>
                  <span className={`text-sm font-bold ${form.offer === "fixed" ? "text-primary" : "text-slate-700"}`}>
                    {t("fixed_sale")}
                  </span>
                  <span className={`flex items-center gap-1.5 text-base font-extrabold ${form.offer === "fixed" ? "text-primary" : "text-slate-500"}`}>
                    {fixedListingFee}
                    <RiyalIcon className="w-5 h-5" />
                  </span>
                </button>

                {/* Auction card */}
                <button
                  type="button"
                  onClick={() => setForm((p) => ({ ...p, offer: "auction" as any }))}
                  className={`relative flex flex-col items-center gap-2 rounded-2xl border-2 p-4 transition-all ${
                    form.offer === "auction"
                      ? "border-primary bg-primary/5 shadow-sm"
                      : "border-slate-200 bg-white hover:border-slate-300 hover:bg-slate-50"
                  }`}
                >
                  {form.offer === "auction" && (
                    <div className="absolute top-2.5 end-2.5 w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" className="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                  )}
                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${form.offer === "auction" ? "bg-primary/10" : "bg-slate-100"}`}>
                    <svg xmlns="http://www.w3.org/2000/svg" className={`w-5 h-5 ${form.offer === "auction" ? "text-primary" : "text-slate-500"}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>
                  </div>
                  <span className={`text-sm font-bold ${form.offer === "auction" ? "text-primary" : "text-slate-700"}`}>
                    {t("auction_sale")}
                  </span>
                  <span className={`flex items-center gap-1.5 text-base font-extrabold ${form.offer === "auction" ? "text-primary" : "text-slate-500"}`}>
                    {auctionListingFee}
                    <RiyalIcon className="w-5 h-5" />
                  </span>
                </button>
              </div>
              {showErrors && errors.offer && (
                <p className="text-red-500 text-sm mt-2">{errors.offer}</p>
              )}
            </div>
          )}

          <AnimatePresence mode="wait">
            {!isAnnualAuction && form.offer === "fixed" && (
              <motion.div
                key="fixed-offer"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
                className="grid sm:grid-cols-2 gap-3 mt-3"
              >
                <div>
                  <Input
                    type="number"
                    min={0}
                    label={t("price_label")}
                    placeholder={t("price_placeholder")}
                    endContent={RiyalSuffix}
                    value={String(form.fixedPrice ?? "")}
                    onValueChange={(v) =>
                      setForm((p) => ({
                        ...p,
                        fixedPrice: v ? positiveNumber(v) : undefined,
                      }))
                    }
                  />
                  {showErrors && errors.fixedPrice && (
                    <span className="text-red-500 text-sm mx-auto">
                      {errors.fixedPrice}
                    </span>
                  )}
                </div>
              </motion.div>
            )}

            {form.offer === "auction" && (
              <motion.div
                key="auction-offer"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.2 }}
                className="mt-0 p-4  text-start"
              >
                {!isAnnualAuction && (
                  <>
                    <div className="font-bold mb-2">
                      {t("auction_type_label")}
                    </div>
                    <RadioGroup
                      orientation="horizontal"
                      value={form.auction_type}
                      onValueChange={(v) =>
                        setForm((p) => ({
                          ...p,
                          auction_type: v as any,
                        }))
                      }
                    >
                      <Radio value="electronic">{t("live_auction")}</Radio>
                      <Radio value="live">{t("electronic_auction")}</Radio>
                    </RadioGroup>
                    {showErrors && errors.auction_type && (
                      <p className="text-red-500 text-sm mt-1">
                        {errors.auction_type}
                      </p>
                    )}
                  </>
                )}

                <div className="grid sm:grid-cols-2 gap-3 mt-4">
                  <div>
                    <Input
                      type="number"
                      min={0}
                      label={t("starting_price_label_optional")}
                      placeholder={t("starting_price_placeholder")}
                      endContent={RiyalSuffix}
                      value={String(form.starting_price ?? "")}
                      onValueChange={(v) =>
                        setForm((p) => ({
                          ...p,
                          starting_price: v ? positiveNumber(v) : undefined,
                        }))
                      }
                    />
                  </div>

                  {(isAnnualAuction || form.auction_type === "live") && (
                    <div>
                      <Input
                        type="number"
                        min={0}
                        label={t("market_entry_price_label_optional")}
                        placeholder={t("market_entry_price_placeholder")}
                        endContent={RiyalSuffix}
                        value={String(form.market_entry_price ?? "")}
                        onValueChange={(v) =>
                          setForm((p) => ({
                            ...p,
                            market_entry_price: v
                              ? positiveNumber(v)
                              : undefined,
                          }))
                        }
                      />
                    </div>
                  )}
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          <Checkbox
            className="mt-4 text-start"
            isSelected={form.terms}
            onValueChange={(v) => setForm((p) => ({ ...p, terms: v }))}
          >
            <span className="text-slate-700">{t("terms_text")} </span>
          </Checkbox>
          <button
            type="button"
            onClick={() => setIsTermsOpen(true)}
            className="text-green-600 underline hover:text-green-700 transition"
          >
            {t("terms_link")}
          </button>
          {showErrors && errors.terms && (
            <p className="text-red-500 text-sm">{errors.terms}</p>
          )}
        </div>
      </Section>

      <BaseModal
        isOpen={isTermsOpen}
        onOpenChange={setIsTermsOpen}
        placement="center"
        contentClassName="max-w-4xl max-h-[80vh] overflow-y-hidden rounded-xl p-4"
      >
        <TermsModalContent />
      </BaseModal>
    </>
  );
}