"use client"

import type React from "react"

import { useState }                         from "react";
import { useRouter }                        from "next/navigation";
import { Button }                           from "@/components/ui/button";
import { Label }                            from "@/components/ui/label";
import { RadioGroup, RadioGroupItem }       from "@/components/ui/radio-group";
import { toast }                            from "sonner";
import { ChevronRight, TrendingUp, Shield } from "lucide-react";
import { AuthCard }                         from "@/components/auth-card";

export default function WelcomeSurveyPage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)

  const [experience, setExperience] = useState("")
  const [riskTolerance, setRiskTolerance] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

    try {
      const response = await fetch("/api/user/onboarding", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          step: "survey",
          data: {
            tradingExperience: experience,
            refSource: riskTolerance,
          },
        }),
      });

      if (!response.ok) throw new Error("Failed to save survey");
      router.push("/welcome/setup");
      router.refresh();
    } catch (error) {
      setIsLoading(false);
      toast.error("An error occurred. Please try again later.");
    }
  }

  return (
    <AuthCard
      title="Welcome to Kokotrack!"
      description="Help us personalize your experience"
    >
      <div className="flex gap-2 justify-center mb-5">
        <div className="h-2 w-16 bg-primary rounded-full" />
        <div className="h-2 w-16 bg-muted rounded-full" />
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="space-y-5">
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-primary" />
              <Label className="text-base font-semibold">What is your trading experience</Label>
            </div>
            <RadioGroup value={experience} onValueChange={setExperience}>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="beginner" id="beginner" />
                <Label htmlFor="beginner" className="cursor-pointer flex-1 flex-row items-start justify-start">
                  <div className="font-medium">Beginner</div>
                  <div className="text-xs text-muted-foreground">Less than 1 year</div>
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="intermediate" id="intermediate" />
                <Label htmlFor="intermediate" className="cursor-pointer flex-1 flex-row items-start justify-start">
                  <div className="font-medium">Intermediate</div>
                  <div className="text-xs text-muted-foreground">1-3 years</div>
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="advanced" id="advanced" />
                <Label htmlFor="advanced" className="cursor-pointer flex-1 flex-row items-start justify-start">
                  <div className="font-medium">Advanced</div>
                  <div className="text-xs text-muted-foreground">3+ years</div>
                </Label>
              </div>
            </RadioGroup>
          </div>
{/* 
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Shield className="h-5 w-5 text-primary" />
              <Label className="text-base font-semibold">What is your risk tolerance</Label>
            </div>
            <RadioGroup value={riskTolerance} onValueChange={setRiskTolerance}>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="conservative" id="conservative" />
                <Label htmlFor="conservative" className="cursor-pointer flex-1">
                  <div className="font-medium">Conservative</div>
                  <div className="text-sm text-muted-foreground">Minimize risk, steady returns</div>
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="moderate" id="moderate" />
                <Label htmlFor="moderate" className="cursor-pointer flex-1">
                  <div className="font-medium">Moderate</div>
                  <div className="text-sm text-muted-foreground">Balanced risk and reward</div>
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="aggressive" id="aggressive" />
                <Label htmlFor="aggressive" className="cursor-pointer flex-1">
                  <div className="font-medium">Aggressive</div>
                  <div className="text-sm text-muted-foreground">Higher risk for higher returns</div>
                </Label>
              </div>
            </RadioGroup>
          </div> */}


          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Shield className="h-5 w-5 text-primary" />
              <Label className="text-base font-semibold">How did you hear about us?</Label>
            </div>
            <RadioGroup value={riskTolerance} onValueChange={setRiskTolerance}>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="mkt_search" id="mkt_search" />
                <Label htmlFor="mkt_search" className="cursor-pointer flex-1 flex-col items-start justify-start">
                  <div className="font-medium">Search engine</div>
                  <div className="text-xs text-muted-foreground">Google, Bing, Yahoo, etc.</div>
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="mkt_social" id="mkt_social" />
                <Label htmlFor="mkt_social" className="cursor-pointer flex-1 flex-col items-start justify-start">
                  <div className="font-medium">Social media</div>
                  <div className="text-xs text-muted-foreground">Facebook, Instagram, X, Tiktok, etc.</div>
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="mkt_word" id="mkt_word" />
                <Label htmlFor="mkt_word" className="cursor-pointer flex-1 flex-col items-start justify-start">
                  <div className="font-medium">Word of mouth</div>
                  <div className="text-xs text-muted-foreground">From a friend, family, coleague, etc.</div>
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-accent cursor-pointer">
                <RadioGroupItem value="mkt_other" id="mkt_other" />
                <Label htmlFor="mkt_other" className="cursor-pointer flex-1 flex-col items-start justify-start">
                  <div className="font-medium">Other</div>
                </Label>
              </div>
            </RadioGroup>
          </div>
        </div>

        <div className="flex gap-3 pt-4">
          <Button type="submit" className="flex-1" disabled={!(experience && riskTolerance) || isLoading}>
            {isLoading ? "Please wait..." : "Continue"}
            <ChevronRight className="ml-2 h-4 w-4" />
          </Button>
        </div>
      </form>
    </AuthCard>
  )
}