import { useState } from "react";
import Container from "app/components/ui/container";
// import StepProgress from "app/components/ui/step-progress";
import Card from "app/components/ui/card";
import { useGlobalContext, useOnboarding } from "app/components/providers/global-context";
import { useUpdateAgentDetails } from "app/utils/api";

import Stepone from "app/features/onboarding/components/steponenew";
import Steptwo from "app/features/onboarding/components/steptwonew";

export default function OnboardingPage() {
  const [step, setStep] = useState(1);
  const [stepsData, setStepsData] = useState<any>({});

  const { completeOnboarding } = useOnboarding();
  const updateAgentMutation = useUpdateAgentDetails();
  const { user } = useGlobalContext();
  console.log("user", user);
  const handleNext = (data: any) => {
    setStepsData((prev: any) => ({ ...prev, ...data }));
    setStep((prev) => prev + 1);
  };

  const handleBack = () => {
    setStep((prev) => prev - 1);
  };

  const handleFinish = async (data: any) => {
    const payload = {
      ...stepsData,
      ...data,
      onboarded: true
    };
    try {
      await updateAgentMutation.mutateAsync({ _id: user?.agent_id!, payload });
      completeOnboarding();
    } catch (error) { }
  };

  return (
    <div style={{ background: "#f6f6f7", minHeight: "100vh", padding: "40px 20px" }}>
      <Container>
        <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "20px" }}>
          <div style={{ background: "#9100df", padding: "8px", borderRadius: "8px" }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
              <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" />
              <path d="M12 6C9.79 6 8 7.79 8 10V14C8 16.21 9.79 18 12 18C14.21 18 16 16.21 16 14V10C16 7.79 14.21 6 12 6ZM14 14C14 15.1 13.1 16 12 16C10.9 16 10 15.1 10 14V10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10V14Z" />
            </svg>
          </div>
          <span style={{ fontSize: "20px", fontWeight: "700", color: "#202223" }}>Qixs</span>
        </div>
        <Card>
          {/* <StepProgress totalSteps={2} currentStep={step} /> */}
          {step === 1 && <Stepone handleNext={handleNext} />}
          {step === 2 && (
            <Steptwo handleBack={handleBack} handleFinish={handleFinish} />
          )}
        </Card>
      </Container>
    </div>
  );
}