"use client"

import Header from "@/components/features/header/header"
import Footer from "@/components/features/footer/footer"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import Image from "next/image"
import { BookOpen, Calendar, CreditCard, User, Bell, Settings, LogOut, Home } from "lucide-react"
import { useTranslation } from "react-i18next"

export default function MemberDashboardDesign() {
  const { t } = useTranslation()

  return (
    <div className="min-h-screen flex flex-col">
      <Header />

      <main className="flex-grow">
        <div className="container py-8">
          <div className="flex flex-col md:flex-row gap-8">
            {/* Sidebar */}
            <aside className="w-full md:w-64 shrink-0">
              <Card className="border-0 bg-secondary-light">
                <CardHeader>
                  <div className="flex items-center gap-4">
                    <div className="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center">
                      <User className="h-6 w-6 text-secondary" />
                    </div>
                    <div>
                      <h3 className="font-medium">John Doe</h3>
                      <p className="text-sm text-gray-500">Premium Member</p>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="p-0">
                  <nav className="space-y-1 p-4">
                    <Link
                      href="/student/dashboard"
                      className="flex items-center gap-3 px-3 py-2 rounded-md bg-primary text-secondary font-medium"
                    >
                      <Home className="h-5 w-5" />
                      Dashboard
                    </Link>
                    <Link
                      href="/student/courses"
                      className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-primary-light text-gray-700 hover:text-secondary"
                    >
                      <BookOpen className="h-5 w-5" />
                      My Courses
                    </Link>
                    <Link
                      href="/student/calendar"
                      className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-primary-light text-gray-700 hover:text-secondary"
                    >
                      <Calendar className="h-5 w-5" />
                      Calendar
                    </Link>
                    <Link
                      href="/student/payments"
                      className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-primary-light text-gray-700 hover:text-secondary"
                    >
                      <CreditCard className="h-5 w-5" />
                      Payments
                    </Link>
                    <div className="pt-4 mt-4 border-t border-gray-200">
                      <Link
                        href="/student/notifications"
                        className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-primary-light text-gray-700 hover:text-secondary"
                      >
                        <Bell className="h-5 w-5" />
                        Notifications
                      </Link>
                      <Link
                        href="/student/settings"
                        className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-primary-light text-gray-700 hover:text-secondary"
                      >
                        <Settings className="h-5 w-5" />
                        Settings
                      </Link>
                      <Link
                        href="/logout"
                        className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-primary-light text-gray-700 hover:text-secondary"
                      >
                        <LogOut className="h-5 w-5" />
                        Logout
                      </Link>
                    </div>
                  </nav>
                </CardContent>
              </Card>
            </aside>

            {/* Main Content */}
            <div className="flex-grow">
              <div className="mb-6">
                <h1 className="text-3xl font-bold font-heading mb-2">Welcome back, John!</h1>
                <p className="text-gray-600">Here's an overview of your learning progress.</p>
              </div>

              {/* Stats Cards */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                <Card className="border-0 bg-secondary-light">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-gray-500">Courses in Progress</p>
                        <h3 className="text-2xl font-bold">3</h3>
                      </div>
                      <div className="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center">
                        <BookOpen className="h-6 w-6 text-secondary" />
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card className="border-0 bg-secondary-light">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-gray-500">Upcoming Sessions</p>
                        <h3 className="text-2xl font-bold">2</h3>
                      </div>
                      <div className="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center">
                        <Calendar className="h-6 w-6 text-secondary" />
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card className="border-0 bg-secondary-light">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-gray-500">Completed Courses</p>
                        <h3 className="text-2xl font-bold">5</h3>
                      </div>
                      <div className="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center">
                        <CreditCard className="h-6 w-6 text-secondary" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

              {/* Tabs */}
              <Tabs defaultValue="courses">
                <TabsList className="mb-6">
                  <TabsTrigger value="courses">My Courses</TabsTrigger>
                  <TabsTrigger value="calendar">Calendar</TabsTrigger>
                  <TabsTrigger value="payments">Payments</TabsTrigger>
                </TabsList>

                <TabsContent value="courses" className="space-y-6">
                  <h2 className="text-2xl font-bold font-heading mb-4">My Courses</h2>

                  {/* Course Cards */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {[
                      {
                        title: "Super Memory Course",
                        progress: 75,
                        image: "/memory-training-techniques.png",
                        lessons: 12,
                        completed: 9,
                      },
                      {
                        title: "Speed Reading Lessons",
                        progress: 40,
                        image: "/speed-reading-technique.png",
                        lessons: 10,
                        completed: 4,
                      },
                      {
                        title: "Mind Mapping Course",
                        progress: 20,
                        image: "/mind-mapping.png",
                        lessons: 8,
                        completed: 2,
                      },
                    ].map((course, index) => (
                      <Card key={index} className="overflow-hidden border-0">
                        <div className="relative h-40">
                          <Image
                            src={course.image || "/placeholder.svg"}
                            alt={course.title}
                            fill
                            className="object-cover"
                          />
                        </div>
                        <CardContent className="p-6">
                          <h3 className="text-xl font-bold mb-2 font-heading">{course.title}</h3>
                          <div className="flex justify-between text-sm text-gray-500 mb-2">
                            <span>
                              {course.completed} of {course.lessons} lessons completed
                            </span>
                            <span>{course.progress}%</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2.5 mb-4">
                            <div
                              className="bg-secondary h-2.5 rounded-full"
                              style={{ width: `${course.progress}%` }}
                            ></div>
                          </div>
                          <Button className="w-full">Continue Learning</Button>
                        </CardContent>
                      </Card>
                    ))}
                  </div>

                  <div className="text-center mt-8">
                    <Link href="/student/courses" className="text-secondary hover:text-secondary-dark underline">
                      View All Courses
                    </Link>
                  </div>
                </TabsContent>

                <TabsContent value="calendar" className="space-y-6">
                  <h2 className="text-2xl font-bold font-heading mb-4">Upcoming Sessions</h2>

                  <Card className="border-0 bg-secondary-light">
                    <CardContent className="p-6">
                      <div className="space-y-6">
                        {[
                          {
                            title: "Memory Techniques Workshop",
                            date: "May 15, 2025",
                            time: "10:00 AM - 12:00 PM",
                            instructor: "Dr. Sarah Johnson",
                          },
                          {
                            title: "Speed Reading Practice Session",
                            date: "May 18, 2025",
                            time: "2:00 PM - 3:30 PM",
                            instructor: "Prof. Michael Chen",
                          },
                        ].map((session, index) => (
                          <div
                            key={index}
                            className="flex items-start gap-4 pb-4 border-b border-gray-200 last:border-0 last:pb-0"
                          >
                            <div className="h-12 w-12 rounded-full bg-primary-light flex items-center justify-center shrink-0">
                              <Calendar className="h-6 w-6 text-secondary" />
                            </div>
                            <div>
                              <h3 className="font-bold">{session.title}</h3>
                              <p className="text-gray-600">
                                {session.date} • {session.time}
                              </p>
                              <p className="text-sm text-gray-500">Instructor: {session.instructor}</p>
                            </div>
                            <Button variant="outline" className="ml-auto shrink-0">
                              Join Session
                            </Button>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>

                  <div className="text-center mt-8">
                    <Link href="/student/calendar" className="text-secondary hover:text-secondary-dark underline">
                      View Full Calendar
                    </Link>
                  </div>
                </TabsContent>

                <TabsContent value="payments" className="space-y-6">
                  <h2 className="text-2xl font-bold font-heading mb-4">Payment History</h2>

                  <Card className="border-0 bg-secondary-light">
                    <CardContent className="p-6">
                      <div className="space-y-6">
                        {[
                          {
                            course: "Premium Membership",
                            amount: "$149.99",
                            date: "April 10, 2025",
                            status: "Completed",
                          },
                          {
                            course: "Speed Reading Lessons",
                            amount: "$109.99",
                            date: "March 15, 2025",
                            status: "Completed",
                          },
                          {
                            course: "Mind Mapping Course",
                            amount: "$79.99",
                            date: "February 28, 2025",
                            status: "Completed",
                          },
                        ].map((payment, index) => (
                          <div
                            key={index}
                            className="flex items-center justify-between pb-4 border-b border-gray-200 last:border-0 last:pb-0"
                          >
                            <div>
                              <h3 className="font-medium">{payment.course}</h3>
                              <p className="text-sm text-gray-500">{payment.date}</p>
                            </div>
                            <div className="text-right">
                              <p className="font-bold">{payment.amount}</p>
                              <span className="inline-block px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">
                                {payment.status}
                              </span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>

                  <div className="text-center mt-8">
                    <Link href="/student/payments" className="text-secondary hover:text-secondary-dark underline">
                      View All Transactions
                    </Link>
                  </div>
                </TabsContent>
              </Tabs>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}