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 { Badge } from "@/components/badge";
import { Star, Calendar, Clock, Award, MessageSquare, CheckCircle } from "lucide-react";
import Link from "next/link";

export default function MentorProfilePage() {
  // Mock data for a single mentor
  const mentor = {
    name: "Budi Santoso",
    role: "Senior Product Manager at GoTo",
    image: "https://i.pravatar.cc/300?u=budi",
    rating: 4.9,
    sessions: 120,
    price: "Rp 250.000",
    bio: "Saya memiliki pengalaman lebih dari 8 tahun di bidang Product Management. Telah membantu puluhan mentee masuk ke top tech companies di Indonesia. Fokus saya adalah membantu kamu memahami product mindset dan persiapan interview yang efektif.",
    specialties: ["Product Strategy", "Career Growth", "Interview Prep", "Stakeholder Management"],
    successStory: "Membantu seorang Junior PM naik level menjadi Senior PM dalam waktu 6 bulan melalui mentoring intensif.",
  };

  return (
    <main className="min-h-screen bg-neutral-50 pt-32 pb-20">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Left Column: Profile Info */}
          <div className="lg:col-span-2 space-y-8">
            <Card className="border-none shadow-sm overflow-hidden">
              <CardContent className="p-0">
                <div className="bg-indigo-600 h-32 w-full" />
                <div className="px-8 pb-8">
                  <div className="relative -mt-16 mb-6">
                    <img 
                      src={mentor.image} 
                      alt={mentor.name} 
                      className="w-32 h-32 rounded-2xl border-4 border-white object-cover shadow-md"
                    />
                  </div>
                  <div className="flex flex-col md:flex-row justify-between items-start gap-4">
                    <div>
                      <Heading as="h2" className="text-3xl mb-1">{mentor.name}</Heading>
                      <p className="text-xl text-neutral-600 mb-4">{mentor.role}</p>
                      <div className="flex flex-wrap gap-4 text-sm">
                        <div className="flex items-center gap-1">
                          <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                          <span className="font-bold">{mentor.rating}</span>
                          <span className="text-neutral-500">({mentor.sessions} sesi)</span>
                        </div>
                        <div className="flex items-center gap-1 text-neutral-500">
                          <Award className="w-4 h-4" />
                          <span>Top Mentor 2023</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <Button variant="outline" size="icon" className="rounded-full">
                        <MessageSquare className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <div className="space-y-6">
              <section>
                <h3 className="text-xl font-bold mb-4">Tentang Mentor</h3>
                <p className="text-neutral-600 leading-relaxed bg-white p-6 rounded-xl shadow-sm">
                  {mentor.bio}
                </p>
              </section>

              <section>
                <h3 className="text-xl font-bold mb-4">Spesialisasi</h3>
                <div className="flex flex-wrap gap-2">
                  {mentor.specialties.map(s => (
                    <Badge key={s} className="bg-indigo-50 text-indigo-700 border-none px-4 py-2 text-sm">
                      {s}
                    </Badge>
                  ))}
                </div>
              </section>

              <section>
                <h3 className="text-xl font-bold mb-4">Success Story</h3>
                <div className="bg-green-50 border border-green-100 p-6 rounded-xl flex gap-4">
                  <CheckCircle className="w-6 h-6 text-green-600 shrink-0" />
                  <p className="text-green-800 italic">"{mentor.successStory}"</p>
                </div>
              </section>
            </div>
          </div>

          {/* Right Column: Booking Card */}
          <div className="lg:col-span-1">
            <Card className="border-none shadow-lg sticky top-32">
              <CardContent className="p-8">
                <div className="mb-6">
                  <div className="text-sm text-neutral-500 mb-1">Investasi per sesi</div>
                  <div className="text-3xl font-bold text-indigo-600">{mentor.price}</div>
                </div>

                <div className="space-y-4 mb-8">
                  <div className="flex items-center gap-3 text-neutral-600">
                    <Clock className="w-5 h-5" />
                    <span>Durasi 60 Menit</span>
                  </div>
                  <div className="flex items-center gap-3 text-neutral-600">
                    <Calendar className="w-5 h-5" />
                    <span>Jadwal Fleksibel</span>
                  </div>
                </div>

                <Button className="w-full h-14 bg-indigo-600 hover:bg-indigo-700 text-lg mb-4" asChild>
                  <Link href="/booking">Book Sesi Sekarang</Link>
                </Button>
                
                <p className="text-center text-xs text-neutral-500">
                  Pembayaran aman & garansi uang kembali jika sesi tidak berjalan.
                </p>

                <div className="mt-8 pt-8 border-t">
                  <h4 className="font-bold mb-4">Ketersediaan Terdekat</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm p-3 bg-neutral-50 rounded-lg">
                      <span>Besok, 19:00</span>
                      <span className="text-green-600 font-medium">Tersedia</span>
                    </div>
                    <div className="flex justify-between text-sm p-3 bg-neutral-50 rounded-lg">
                      <span>Kamis, 20:00</span>
                      <span className="text-green-600 font-medium">Tersedia</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </Container>
    </main>
  );
}