"use client";

import { clsx } from "clsx";
import { useAtom } from "jotai";
import { formAtom } from "@/components/state/autionAtoms";
import { Section } from "../section";
import { useTranslations } from "next-intl";
import { useEffect } from "react";
import { getAuctionConfig } from "@/actions/config-mazad";
import {
  auctionConfigAtom,
  auctionConfigLoadingAtom,
} from "@/components/state/autionAtoms";

interface Step1Props {
  onValidChange?: (valid: boolean) => void;
  onLoadingChange?: (loading: boolean) => void;
}

export function Step1({ onValidChange, onLoadingChange }: Step1Props) {
  const t = useTranslations("ADD_LISTING.STEP1");
  const [form, setForm] = useAtom(formAtom);
  const [, setAuctionData] = useAtom(auctionConfigAtom);
  const [loading, setLoading] = useAtom(auctionConfigLoadingAtom);
  const lockedByGroup = !!form.group_auction_id;

  useEffect(() => {
    onValidChange?.(!!form.animal_type && !loading);
  }, [form.animal_type, loading]);

  // في حالة القدوم من مزاد جماعي (group_auction_id) نحمّل الـ config تلقائياً حسب animal_type
  useEffect(() => {
    if (!lockedByGroup) return;
    if (!form.animal_type) return;
    (async () => {
      try {
        setLoading(true);
        onLoadingChange?.(true);
        const data = await getAuctionConfig(
          form.animal_type as "horse" | "camel",
        );
        setAuctionData(data);
      } catch (error) {
        console.error("Error loading auction data (group context):", error);
      } finally {
        setLoading(false);
        onLoadingChange?.(false);
      }
    })();
  }, [lockedByGroup, form.animal_type]);

  const handleSelect = async (value: "horse" | "camel") => {
    if (lockedByGroup) return;
    setForm((prev) => ({
      ...prev,
      platform: value,
      animal_type: value,
      is_group: value === "horse" ? false : prev.is_group,
    }));

    setLoading(true);
    onLoadingChange?.(true);
    try {
      const data = await getAuctionConfig(value);
      setAuctionData(data);
    } catch (error) {
      console.error("Error loading auction data:", error);
    } finally {
      setLoading(false);
      onLoadingChange?.(false);
    }
  };

  return (
    <Section title={t("title")}>
      <div className="flex justify-center w-full gap-3">
        <div
          onClick={() => !loading && !lockedByGroup && handleSelect("horse")}
          className={clsx(
            "flex-1 w-full rounded-2xl border-2 p-6 flex flex-col items-start cursor-pointer transition-all duration-200",
            "hover:border-green-400 hover:bg-green-50/30",
            form.platform === "horse"
              ? "border-green-600 bg-green-50/50"
              : "border-gray-200 bg-white",
            loading && "opacity-60 cursor-not-allowed",
          )}
        >
          <div className="font-bold text-lg text-slate-900 flex items-center gap-2">
            {t("horse_title")}
          </div>
          <div className="text-sm text-slate-500 mt-1">{t("horse_desc")}</div>
        </div>

        <div
          onClick={() => !loading && !lockedByGroup && handleSelect("camel")}
          className={clsx(
            "flex-1 w-full rounded-2xl border-2 p-6 flex flex-col items-start cursor-pointer transition-all duration-200",
            "hover:border-green-400 hover:bg-green-50/30",
            form.platform === "camel"
              ? "border-green-600 bg-green-50/50"
              : "border-gray-200 bg-white",
            loading && "opacity-60 cursor-not-allowed",
          )}
        >
          <div className="font-bold text-lg text-slate-900 flex items-center gap-2">
            {t("camel_title")}
          </div>
          <div className="text-sm text-slate-500 mt-1">{t("camel_desc")}</div>
        </div>
      </div>
    </Section>
  );
}