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 { Input } from "@/components/ui/input";
import { Star, Filter, Search, Calendar } from "lucide-react";
import Link from "next/link";

const mentors = [
  {
    id: 1,
    name: "Budi Santoso",
    role: "Senior Product Manager at GoTo",
    image: "https://i.pravatar.cc/150?u=budi",
    rating: 4.9,
    sessions: 120,
    price: "Rp 250.000",
    tags: ["Product Strategy", "Career Growth"],
    match: "98% Cocok",
    available: "Besok, 19:00",
  },
  {
    id: 2,
    name: "Siska Putri",
    role: "Lead UX Designer at Traveloka",
    image: "https://i.pravatar.cc/150?u=siska",
    rating: 5.0,
    sessions: 85,
    price: "Rp 300.000",
    tags: ["UI/UX", "Portfolio Review"],
    match: "95% Cocok",
    available: "Kamis, 10:00",
  },
  {
    id: 3,
    name: "Andi Wijaya",
    role: "Senior Software Engineer at Shopee",
    image: "https://i.pravatar.cc/150?u=andi",
    rating: 4.8,
    sessions: 210,
    price: "Rp 350.000",
    tags: ["Backend", "System Design"],
    match: "92% Cocok",
    available: "Sabtu, 14:00",
  },
];

export default function MentorsPage() {
  return (
    <main className="min-h-screen bg-neutral-50 pt-32 pb-20">
      <Container>
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-6">
          <div>
            <Heading>Rekomendasi Mentor</Heading>
            <Subheading>Berdasarkan goal "Persiapan Karier" kamu.</Subheading>
          </div>
          <div className="flex gap-3 w-full md:w-auto">
            <div className="relative flex-1 md:w-64">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
              <Input className="pl-10 h-11 bg-white" placeholder="Cari skill atau nama..." />
            </div>
            <Button variant="outline" className="h-11 gap-2 bg-white">
              <Filter className="w-4 h-4" /> Filter
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-6">
          {mentors.map((mentor) => (
            <Card key={mentor.id} className="overflow-hidden border-none shadow-sm hover:shadow-md transition-shadow bg-white">
              <CardContent className="p-0">
                <div className="flex flex-col md:flex-row">
                  <div className="w-full md:w-64 h-64 md:h-auto relative">
                    <img src={mentor.image} alt={mentor.name} className="w-full h-full object-cover" />
                    <div className="absolute top-4 left-4">
                      <Badge className="bg-green-500 text-white border-none px-3 py-1">
                        {mentor.match}
                      </Badge>
                    </div>
                  </div>
                  <div className="flex-1 p-6 md:p-8">
                    <div className="flex flex-col md:flex-row justify-between items-start gap-4 mb-4">
                      <div>
                        <h3 className="text-2xl font-bold mb-1">{mentor.name}</h3>
                        <p className="text-neutral-600 font-medium">{mentor.role}</p>
                      </div>
                      <div className="text-right">
                        <div className="text-2xl font-bold text-indigo-600">{mentor.price}</div>
                        <div className="text-sm text-neutral-500">per sesi (60 mnt)</div>
                      </div>
                    </div>

                    <div className="flex flex-wrap gap-6 mb-8">
                      <div className="flex items-center gap-2">
                        <Star className="w-5 h-5 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-2 text-neutral-600">
                        <Calendar className="w-5 h-5" />
                        <span>Tersedia: <span className="font-medium text-neutral-900">{mentor.available}</span></span>
                      </div>
                    </div>

                    <div className="flex flex-wrap gap-2 mb-8">
                      {mentor.tags.map(tag => (
                        <Badge key={tag} variant="secondary" className="bg-neutral-100 text-neutral-700 border-none">
                          {tag}
                        </Badge>
                      ))}
                    </div>

                    <div className="flex flex-col sm:flex-row gap-3">
                      <Button className="flex-1 bg-indigo-600 hover:bg-indigo-700 h-12" asChild>
                        <Link href={`/mentors/${mentor.id}`}>Lihat Profil & Jadwal</Link>
                      </Button>
                      <Button variant="outline" className="flex-1 h-12" asChild>
                        <Link href={`/booking?mentor=${mentor.id}`}>Book Sesi Langsung</Link>
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="mt-12 text-center">
          <p className="text-neutral-500 mb-4">Tidak menemukan yang cocok?</p>
          <Button variant="link" className="text-indigo-600 font-bold">
            Beri tahu kami kriteria mentormu →
          </Button>
        </div>
      </Container>
    </main>
  );
}