"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import Link from "next/link";
import { motion } from "framer-motion";

export default function OnboardingPage() {
  return (
    <main className="min-h-screen bg-neutral-50 pt-24 pb-20">
      <Container className="max-w-2xl">
        <div className="mb-12">
          <div className="flex justify-between items-center mb-4">
            <span className="text-sm font-medium text-indigo-600">Langkah 1 dari 3</span>
            <span className="text-sm text-neutral-500">33% Selesai</span>
          </div>
          <div className="w-full bg-neutral-200 h-2 rounded-full overflow-hidden">
            <div className="bg-indigo-600 h-full w-1/3" />
          </div>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
        >
          <Heading className="mb-2">Apa goal utama kamu?</Heading>
          <Subheading className="mb-8">Kami akan mencocokkanmu dengan mentor yang paling relevan.</Subheading>

          <Card className="border-none shadow-sm">
            <CardContent className="p-8 space-y-8">
              <div className="space-y-3">
                <Label htmlFor="goal">Saya ingin fokus pada...</Label>
                <Select>
                  <SelectTrigger id="goal" className="h-12">
                    <SelectValue placeholder="Pilih goal kamu" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="career">Persiapan Karier & Interview</SelectItem>
                    <SelectItem value="technical">Skill Teknis (Coding, Design, dll)</SelectItem>
                    <SelectItem value="leadership">Leadership & Management</SelectItem>
                    <SelectItem value="business">Business & Entrepreneurship</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-3">
                <Label>Target waktu pencapaian</Label>
                <RadioGroup defaultValue="1-3" className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                  <div>
                    <RadioGroupItem value="1" id="t1" className="peer sr-only" />
                    <Label
                      htmlFor="t1"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
                    >
                      <span className="text-sm font-medium">Segera</span>
                      <span className="text-xs text-neutral-500">{"< 1 bulan"}</span>
                    </Label>
                  </div>
                  <div>
                    <RadioGroupItem value="1-3" id="t2" className="peer sr-only" />
                    <Label
                      htmlFor="t2"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
                    >
                      <span className="text-sm font-medium">Menengah</span>
                      <span className="text-xs text-neutral-500">1-3 bulan</span>
                    </Label>
                  </div>
                  <div>
                    <RadioGroupItem value="3+" id="t3" className="peer sr-only" />
                    <Label
                      htmlFor="t3"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-indigo-600 [&:has([data-state=checked])]:border-indigo-600 cursor-pointer"
                    >
                      <span className="text-sm font-medium">Panjang</span>
                      <span className="text-xs text-neutral-500">3+ bulan</span>
                    </Label>
                  </div>
                </RadioGroup>
              </div>

              <div className="space-y-3">
                <Label htmlFor="budget">Budget per sesi (IDR)</Label>
                <Select>
                  <SelectTrigger id="budget" className="h-12">
                    <SelectValue placeholder="Pilih range budget" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="free">Gratis (Mentor Volunteer)</SelectItem>
                    <SelectItem value="100-300">100rb - 300rb</SelectItem>
                    <SelectItem value="300-500">300rb - 500rb</SelectItem>
                    <SelectItem value="500+">Di atas 500rb</SelectItem>
                  </SelectContent>
                </Select>
                <p className="text-xs text-neutral-500 italic">
                  * Tenang, kamu bisa mengubah filter ini nanti.
                </p>
              </div>

              <Button className="w-full h-12 bg-indigo-600 hover:bg-indigo-700 text-lg" asChild>
                <Link href="/mentors">Lihat Rekomendasi Mentor</Link>
              </Button>
            </CardContent>
          </Card>
        </motion.div>
      </Container>
    </main>
  );
}