"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 { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/badge";
import { Sparkles, MessageSquare, CheckCircle2, ArrowRight } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

export default function PreSessionPage() {
  const [isGenerated, setIsGenerated] = useState(false);

  return (
    <main className="min-h-screen bg-neutral-50 pt-32 pb-20">
      <Container className="max-w-3xl">
        <div className="text-center mb-12">
          <Badge className="bg-indigo-100 text-indigo-700 border-none mb-4 px-4 py-1">
            Pembayaran Berhasil!
          </Badge>
          <Heading>Persiapkan Sesimu</Heading>
          <Subheading>Bantu mentor memahami masalahmu agar sesi lebih efektif.</Subheading>
        </div>

        <div className="space-y-8">
          <Card className="border-none shadow-sm">
            <CardContent className="p-8">
              <div className="flex items-center gap-2 mb-4 text-indigo-600">
                <MessageSquare className="w-5 h-5" />
                <span className="font-bold">Apa yang ingin kamu bahas?</span>
              </div>
              <Textarea 
                placeholder="Contoh: Saya ingin review CV untuk posisi Associate PM dan tips menghadapi behavioral interview di startup unicorn..."
                className="min-h-[150px] mb-4 text-lg"
              />
              <div className="flex items-center gap-2 text-sm text-neutral-500 mb-6">
                <Sparkles className="w-4 h-4 text-indigo-400" />
                <span>AI Assistant kami akan membantu menyusun agenda berdasarkan inputmu.</span>
              </div>
              <Button 
                className="w-full bg-indigo-600 hover:bg-indigo-700 h-12"
                onClick={() => setIsGenerated(true)}
              >
                Generate Agenda Sesi (AI)
              </Button>
            </CardContent>
          </Card>

          {isGenerated && (
            <motion_div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="space-y-6"
            >
              <div className="flex items-center gap-2 font-bold text-lg">
                <Sparkles className="w-5 h-5 text-indigo-600" />
                <span>Rekomendasi Agenda Sesi</span>
              </div>
              
              <Card className="border-indigo-100 bg-indigo-50/50">
                <CardContent className="p-8 space-y-6">
                  <div className="flex gap-4">
                    <div className="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs shrink-0 mt-1">1</div>
                    <div>
                      <div className="font-bold mb-1">Review CV & Portfolio (20 mnt)</div>
                      <p className="text-sm text-neutral-600">Menganalisis poin-poin pengalaman yang paling relevan untuk posisi PM.</p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs shrink-0 mt-1">2</div>
                    <div>
                      <div className="font-bold mb-1">Mock Interview: Behavioral (25 mnt)</div>
                      <p className="text-sm text-neutral-600">Latihan menjawab pertanyaan STAR method dengan feedback langsung.</p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs shrink-0 mt-1">3</div>
                    <div>
                      <div className="font-bold mb-1">Q&A & Next Steps (15 mnt)</div>
                      <p className="text-sm text-neutral-600">Menyusun action plan untuk 2 minggu ke depan.</p>
                    </div>
                  </div>

                  <div className="pt-6 border-t border-indigo-100 flex flex-col sm:flex-row gap-4">
                    <Button className="flex-1 bg-indigo-600 hover:bg-indigo-700 h-12" asChild>
                      <Link href="/">Simpan & Selesai</Link>
                    </Button>
                    <Button variant="outline" className="flex-1 h-12 bg-white">
                      Edit Agenda
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </motion_div>
          )}
        </div>

        <div className="mt-12 flex items-center justify-center gap-8">
          <div className="flex items-center gap-2 text-sm text-neutral-500">
            <CheckCircle2 className="w-4 h-4 text-green-500" />
            <span>Agenda dikirim ke Mentor</span>
          </div>
          <div className="flex items-center gap-2 text-sm text-neutral-500">
            <CheckCircle2 className="w-4 h-4 text-green-500" />
            <span>Link Zoom akan dikirim via Email</span>
          </div>
        </div>
      </Container>
    </main>
  );
}

// Simple motion replacement since we can't use framer-motion easily in this snippet without proper setup
function motion_div({ children, className, ...props }: any) {
  return <div className={className}>{children}</div>;
}