"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import { Users, TrendingUp, ShoppingCart, CheckCircle, LayoutDashboard, BarChart3, FileText, Settings } from "lucide-react";
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Dashboard"
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
        />
      </div>

      {/* Sidebar Navigation */}
      <div id="sidebar-nav" data-section="sidebar-nav" className="fixed inset-0">
        <div className="fixed left-0 top-0 w-64 h-screen bg-card border-r border-accent/10 p-6 flex flex-col">
          <div className="mb-8">
            <h2 className="text-xl font-light text-foreground mb-2">Dashboard Navigation</h2>
          </div>
          <nav className="flex-1">
            <ul className="space-y-2">
              <li>
                <a href="#dashboard" className="flex items-center gap-3 p-3 rounded-soft text-foreground hover:bg-accent/10 transition-colors">
                  <LayoutDashboard className="w-5 h-5" />
                  <span>Dashboard</span>
                </a>
              </li>
              <li>
                <a href="#analytics" className="flex items-center gap-3 p-3 rounded-soft text-foreground hover:bg-accent/10 transition-colors">
                  <BarChart3 className="w-5 h-5" />
                  <span>Analytics</span>
                </a>
              </li>
              <li>
                <a href="#reports" className="flex items-center gap-3 p-3 rounded-soft text-foreground hover:bg-accent/10 transition-colors">
                  <FileText className="w-5 h-5" />
                  <span>Reports</span>
                </a>
              </li>
              <li>
                <a href="#users" className="flex items-center gap-3 p-3 rounded-soft text-foreground hover:bg-accent/10 transition-colors">
                  <Users className="w-5 h-5" />
                  <span>Users</span>
                </a>
              </li>
              <li>
                <a href="#settings" className="flex items-center gap-3 p-3 rounded-soft text-foreground hover:bg-accent/10 transition-colors">
                  <Settings className="w-5 h-5" />
                  <span>Settings</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>

      {/* Statistics Cards */}
      <div id="stats-cards" data-section="stats-cards" className="ml-64 p-8">
        <MetricCardOne
          title="Key Metrics"
          description="Real-time dashboard statistics and performance indicators"
          metrics={[
            {
              id: "1",              value: "12,450",              title: "Total Users",              description: "Active users in the system",              icon: Users
            },
            {
              id: "2",              value: "$85,320",              title: "Revenue",              description: "Total revenue this month",              icon: TrendingUp
            },
            {
              id: "3",              value: "342",              title: "Orders",              description: "Completed transactions",              icon: ShoppingCart
            },
            {
              id: "4",              value: "98.5%",              title: "Uptime",              description: "System availability",              icon: CheckCircle
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      {/* Charts Section */}
      <div id="charts-section" data-section="charts-section" className="ml-64 p-8 bg-background">
        <div className="mb-8">
          <h2 className="text-4xl font-light text-foreground mb-4">Analytics & Charts</h2>
          <p className="text-foreground/70">Visual representation of your data and performance metrics</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-card rounded-soft p-6 border border-accent/10 backdrop-blur-xl">
            <div className="mb-4">
              <h3 className="text-lg font-medium text-foreground mb-2">Revenue Trends</h3>
              <p className="text-sm text-foreground/60">Line chart placeholder - Revenue over time</p>
            </div>
            <div className="aspect-video bg-accent/5 rounded-soft flex items-center justify-center">
              <img 
                src="https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg" 
                alt="dashboard analytics chart graph data" 
                className="w-full h-full object-cover rounded-soft"
              />
            </div>
          </div>
          <div className="bg-card rounded-soft p-6 border border-accent/10 backdrop-blur-xl">
            <div className="mb-4">
              <h3 className="text-lg font-medium text-foreground mb-2">User Growth</h3>
              <p className="text-sm text-foreground/60">Bar chart placeholder - User acquisition</p>
            </div>
            <div className="aspect-video bg-accent/5 rounded-soft flex items-center justify-center">
              <img 
                src="https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-25999.jpg" 
                alt="line chart analytics trend data visualization" 
                className="w-full h-full object-cover rounded-soft"
              />
            </div>
          </div>
          <div className="bg-card rounded-soft p-6 border border-accent/10 backdrop-blur-xl">
            <div className="mb-4">
              <h3 className="text-lg font-medium text-foreground mb-2">Performance</h3>
              <p className="text-sm text-foreground/60">Area chart placeholder - Performance metrics</p>
            </div>
            <div className="aspect-video bg-accent/5 rounded-soft flex items-center justify-center">
              <img 
                src="https://img.b2bpic.net/free-vector/dashboard-element-collection_23-2148365528.jpg" 
                alt="bar chart statistics metrics data" 
                className="w-full h-full object-cover rounded-soft"
              />

      <div id="pricing" data-section="pricing">
        <PricingCardThree
            plans={[
                {
                    id: "free",
                    name: "Free",
                    price: "$0",
                    buttons: [{ label: "Get Started", href: "#section", dataWebildId: "cta_btn_1" }],
                    features: ["Up to 3 projects", "Basic analytics", "Email support"]
                },
                {
                    id: "pro",
                    badge: "Popular",
                    name: "Pro",
                    price: "$15",
                    buttons: [{ label: "Get Started", href: "#section", dataWebildId: "cta_btn_2" }],
                    features: ["Up to 10 projects", "Advanced analytics", "Priority email support"]
                },
                {
                    id: "enterprise",
                    name: "Enterprise",
                    price: "$49",
                    buttons: [{ label: "Get Started", href: "#section", dataWebildId: "cta_btn_3" }],
                    features: ["Unlimited projects", "Custom analytics", "24/7 support"]
                }
            ]}
            animationType="fade"
            title="Choose Your Plan"
            description="Find the perfect plan for your needs. Start with a free trial and upgrade as you grow."
            textboxLayout="left"
            useInvertedBackground="never"
            className="bg-white p-8 rounded-lg shadow-md"
            cardClassName="bg-gray-100 p-6 rounded-lg"
            priceClassName="text-2xl font-bold text-gray-900"
            nameClassName="text-xl font-semibold text-gray-800"
            planButtonContainerClassName="mt-4"
            planButtonClassName="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
            featuresClassName="mt-4"
            featureItemClassName="text-gray-700"
        />
      </div>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}