"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import {
  Home,
  Calendar,
  Users,
  MessageSquare,
  DollarSign,
  BarChart3,
  Settings,
  TrendingUp,
  Award,
  Star,
  Clock,
  CheckCircle,
  Clock3,
  Send,
} from "lucide-react";

export default function TeacherDashboard() {
  const [activeMenu, setActiveMenu] = useState("home");

  const navItems = [
    { name: "Ana Sayfa", id: "/" },
    { name: "Öğretmen Paneli", id: "/teacher-dashboard" },
  ];

  const menuItems = [
    { id: "home", label: "Ana Sayfa", icon: Home },
    { id: "calendar", label: "Takvim", icon: Calendar },
    { id: "students", label: "Öğrencilerim", icon: Users },
    { id: "messages", label: "Mesajlar", icon: MessageSquare },
    { id: "earnings", label: "Kazançlar", icon: DollarSign },
    { id: "statistics", label: "İstatistikler", icon: BarChart3 },
    { id: "settings", label: "Ayarlar", icon: Settings },
  ];

  const todayLessons = [
    {
      id: "1",      title: "Matematik - Cebir Temelleri",      student: "Ahmet Demir",      time: "09:00 - 10:00",      status: "scheduled"},
    {
      id: "2",      title: "İngilizce - Konuşma Pratiği",      student: "Zeynep Kaya",      time: "11:00 - 12:00",      status: "scheduled"},
    {
      id: "3",      title: "Fizik - Hareket Kanunları",      student: "Mehmet Yılmaz",      time: "14:00 - 15:00",      status: "in-progress"},
  ];

  const pendingRequests = [
    {
      id: "1",      student: "Ali Şahin",      subject: "Kimya",      date: "5 Şubat 2025",      time: "15:00"},
    {
      id: "2",      student: "Emine Çetin",      subject: "Tarih",      date: "6 Şubat 2025",      time: "16:30"},
  ];

  const newMessages = [
    {
      id: "1",      from: "Ahmet Demir",      message: "Ders için teşekkürler, çok faydalı oldu!",      time: "5 dakika önce"},
    {
      id: "2",      from: "Zeynep Kaya",      message: "Sonraki ders için kaynak önerebilir misiniz?",      time: "2 saat önce"},
    {
      id: "3",      from: "Mehmet Yılmaz",      message: "Pazartesi dersini erteleyebilir miyim?",      time: "4 saat önce"},
  ];

  const monthlyEarnings = [
    { month: "Ocak", amount: 2400 },
    { month: "Şubat", amount: 2800 },
    { month: "Mart", amount: 2200 },
    { month: "Nisan", amount: 3000 },
    { month: "Mayıs", amount: 2600 },
    { month: "Haziran", amount: 3200 },
  ];

  const studentCount = [
    { month: "Ocak", count: 12 },
    { month: "Şubat", count: 15 },
    { month: "Mart", count: 18 },
    { month: "Nisan", count: 16 },
    { month: "Mayıs", count: 20 },
    { month: "Haziran", count: 22 },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Öğretmen Platformu"
          bottomLeftText="Öğretmen Paneli"
          bottomRightText="info@platform.com"
        />
      </div>

      <div className="flex min-h-screen bg-background pt-24">
        {/* Left Sidebar Menu */}
        <aside className="w-64 bg-card border-r border-accent p-6 fixed left-0 top-20 bottom-0 overflow-y-auto">
          <nav className="space-y-2">
            {menuItems.map((item) => {
              const IconComponent = item.icon;
              return (
                <button
                  key={item.id}
                  onClick={() => setActiveMenu(item.id)}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                    activeMenu === item.id
                      ? "bg-primary-cta text-background"
                      : "text-foreground hover:bg-background-accent"
                  }`}
                >
                  <IconComponent size={20} />
                  <span className="font-medium">{item.label}</span>
                </button>
              );
            })}
          </nav>
        </aside>

        {/* Main Content */}
        <main className="ml-64 flex-1 p-8">
          {activeMenu === "home" && (
            <div className="space-y-8">
              {/* Welcome Card */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="md:col-span-4 bg-card border border-accent rounded-lg p-6 shadow-lg">
                  <h2 className="text-3xl font-bold text-foreground mb-2">
                    Hoşgeldiniz, Ayşe!
                  </h2>
                  <p className="text-foreground/70 mb-6">
                    Ocak ayında başarılı bir ay geçiriyorsunuz.
                  </p>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div className="bg-background rounded-lg p-4">
                      <div className="text-sm text-foreground/70 mb-1">
                        Aylık Kazanç
                      </div>
                      <div className="text-2xl font-bold text-primary-cta">
                        ₺2,400
                      </div>
                    </div>
                    <div className="bg-background rounded-lg p-4">
                      <div className="text-sm text-foreground/70 mb-1">
                        Ders Sayısı
                      </div>
                      <div className="text-2xl font-bold text-accent">24</div>
                    </div>
                    <div className="bg-background rounded-lg p-4">
                      <div className="text-sm text-foreground/70 mb-1">
                        Puan
                      </div>
                      <div className="text-2xl font-bold text-secondary-cta">
                        4.8/5
                      </div>
                    </div>
                    <div className="bg-background rounded-lg p-4">
                      <div className="text-sm text-foreground/70 mb-1">
                        Yeni Öğrenci
                      </div>
                      <div className="text-2xl font-bold text-accent">3</div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Today's Lessons */}
              <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
                <div className="flex items-center gap-2 mb-6">
                  <Clock size={24} className="text-primary-cta" />
                  <h3 className="text-2xl font-bold text-foreground">
                    Bugünün Dersleri
                  </h3>
                </div>
                <div className="space-y-3">
                  {todayLessons.map((lesson) => (
                    <div
                      key={lesson.id}
                      className="flex items-start gap-4 p-4 bg-background rounded-lg border border-background-accent"
                    >
                      <div className="flex-1">
                        <h4 className="font-semibold text-foreground">
                          {lesson.title}
                        </h4>
                        <p className="text-sm text-foreground/70">
                          Öğrenci: {lesson.student}
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="text-sm font-medium text-foreground">
                          {lesson.time}
                        </p>
                        <span
                          className={`inline-block text-xs px-2 py-1 rounded-full mt-1 ${
                            lesson.status === "in-progress"
                              ? "bg-primary-cta/20 text-primary-cta"
                              : "bg-accent/20 text-accent"
                          }`}
                        >
                          {lesson.status === "in-progress"
                            ? "Devam Ediyor"
                            : "Planlandı"}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Pending Requests and New Messages */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Pending Requests */}
                <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
                  <div className="flex items-center gap-2 mb-6">
                    <CheckCircle size={24} className="text-accent" />
                    <h3 className="text-xl font-bold text-foreground">
                      Bekleyen İstekler
                    </h3>
                  </div>
                  <div className="space-y-3">
                    {pendingRequests.map((request) => (
                      <div
                        key={request.id}
                        className="p-4 bg-background rounded-lg border border-background-accent"
                      >
                        <p className="font-semibold text-foreground">
                          {request.student}
                        </p>
                        <p className="text-sm text-foreground/70">
                          {request.subject} • {request.date} {request.time}
                        </p>
                        <div className="flex gap-2 mt-3">
                          <button className="flex-1 text-xs bg-primary-cta text-background px-3 py-1 rounded hover:opacity-90 transition-opacity">
                            Onayla
                          </button>
                          <button className="flex-1 text-xs bg-background-accent text-foreground px-3 py-1 rounded hover:opacity-80 transition-opacity">
                            İptal Et
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* New Messages */}
                <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
                  <div className="flex items-center gap-2 mb-6">
                    <Send size={24} className="text-secondary-cta" />
                    <h3 className="text-xl font-bold text-foreground">
                      Yeni Mesajlar
                    </h3>
                  </div>
                  <div className="space-y-3 max-h-64 overflow-y-auto">
                    {newMessages.map((msg) => (
                      <div
                        key={msg.id}
                        className="p-4 bg-background rounded-lg border border-background-accent hover:border-accent/50 transition-colors cursor-pointer"
                      >
                        <p className="font-semibold text-foreground">{msg.from}</p>
                        <p className="text-sm text-foreground/70 mt-1">{msg.message}</p>
                        <p className="text-xs text-foreground/50 mt-2">{msg.time}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Charts Section */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Monthly Earnings Chart */}
                <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
                  <h3 className="text-xl font-bold text-foreground mb-6">
                    Aylık Kazançlar
                  </h3>
                  <div className="space-y-4">
                    {monthlyEarnings.map((item, idx) => (
                      <div key={idx} className="flex items-center gap-3">
                        <span className="w-16 text-sm font-medium text-foreground/70">
                          {item.month}
                        </span>
                        <div className="flex-1 bg-background rounded-full h-8 relative">
                          <div
                            className="bg-gradient-to-r from-primary-cta to-accent h-full rounded-full flex items-center justify-end px-3"
                            style={{
                              width: `${(item.amount / 3200) * 100}%`,
                            }}
                          >
                            {item.amount > 2000 && (
                              <span className="text-xs font-bold text-background">
                                ₺{item.amount}
                              </span>
                            )}
                          </div>
                          {item.amount <= 2000 && (
                            <span className="absolute inset-y-0 right-2 flex items-center text-xs font-bold text-foreground">
                              ₺{item.amount}
                            </span>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Student Count Chart */}
                <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
                  <h3 className="text-xl font-bold text-foreground mb-6">
                    Öğrenci Sayısı Gelişimi
                  </h3>
                  <div className="space-y-4">
                    {studentCount.map((item, idx) => (
                      <div key={idx} className="flex items-center gap-3">
                        <span className="w-16 text-sm font-medium text-foreground/70">
                          {item.month}
                        </span>
                        <div className="flex-1 bg-background rounded-full h-8 relative">
                          <div
                            className="bg-gradient-to-r from-accent to-secondary-cta h-full rounded-full flex items-center justify-end px-3"
                            style={{
                              width: `${(item.count / 22) * 100}%`,
                            }}
                          >
                            {item.count > 10 && (
                              <span className="text-xs font-bold text-background">
                                {item.count}
                              </span>
                            )}
                          </div>
                          {item.count <= 10 && (
                            <span className="absolute inset-y-0 right-2 flex items-center text-xs font-bold text-foreground">
                              {item.count}
                            </span>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeMenu !== "home" && (
            <div className="text-center py-20">
              <h2 className="text-3xl font-bold text-foreground mb-4">
                {menuItems.find((m) => m.id === activeMenu)?.label}
              </h2>
              <p className="text-foreground/70 text-lg">
                Bu bölüm yakında hazırlanacaktır.
              </p>
            </div>
          )}
        </main>
      </div>
    </ThemeProvider>
  );
}
