"use client"

import { useState } from "react"
import { Sidebar } from "@/components/dashboard/sidebar"
import { Header } from "@/components/dashboard/header"
import { Button } from "@/components/ui/button"
import {
  BarChart3,
  TrendingUp,
  TrendingDown,
  Eye,
  Heart,
  Users,
  Lightbulb,
  Calendar,
  ChevronDown,
  Lock,
  Crown,
  ArrowUpRight,
  ArrowDownRight,
  Target,
  DollarSign,
  Briefcase,
  Handshake,
  Star,
  Building2,
  CircleDollarSign,
  PieChart,
  Activity,
  Globe,
  MapPin,
} from "lucide-react"
import { cn } from "@/lib/utils"
import {
  LineChart,
  Line,
  AreaChart,
  Area,
  BarChart,
  Bar,
  PieChart as RechartsPie,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

// User types
type UserType = "individual" | "business" | "investor"
type PlanType = "basic" | "medium" | "premium"

// Sample analytics data for each user type
const individualAnalytics = {
  basic: [
    { label: "Total Ideas Posted", value: "24", change: "+3", trend: "up", icon: Lightbulb },
    { label: "Total Views", value: "1,847", change: "+12%", trend: "up", icon: Eye },
    { label: "Total Likes", value: "342", change: "+8%", trend: "up", icon: Heart },
  ],
  medium: [
    { label: "Profile Views", value: "523", change: "+15%", trend: "up", icon: Eye },
    { label: "Followers", value: "89", change: "+5", trend: "up", icon: Users },
    { label: "Ideas Saved by Others", value: "67", change: "+12", trend: "up", icon: Target },
    { label: "Collaboration Requests", value: "8", change: "+2", trend: "up", icon: Handshake },
  ],
  premium: [
    { label: "Investor Interest", value: "12", change: "+3", trend: "up", icon: CircleDollarSign },
    { label: "Business Inquiries", value: "7", change: "+2", trend: "up", icon: Building2 },
    { label: "Top Performing Idea", value: "AI Healthcare", change: "452 views", trend: "up", icon: Star },
    { label: "Engagement Rate", value: "18.5%", change: "+2.3%", trend: "up", icon: TrendingUp },
  ],
}

const businessAnalytics = {
  basic: [
    { label: "Ideas Viewed", value: "156", change: "+18", trend: "up", icon: Eye },
    { label: "Saved Ideas", value: "34", change: "+5", trend: "up", icon: Heart },
    { label: "Profile Visits", value: "89", change: "+12%", trend: "up", icon: Users },
  ],
  medium: [
    { label: "Collaboration Sent", value: "12", change: "+3", trend: "up", icon: Handshake },
    { label: "Partnerships Active", value: "4", change: "+1", trend: "up", icon: Briefcase },
    { label: "Innovators Connected", value: "28", change: "+7", trend: "up", icon: Users },
    { label: "Ideas in Pipeline", value: "8", change: "+2", trend: "up", icon: Target },
  ],
  premium: [
    { label: "ROI on Partnerships", value: "234%", change: "+18%", trend: "up", icon: TrendingUp },
    { label: "Market Reach", value: "12.5K", change: "+2.3K", trend: "up", icon: Eye },
    { label: "Top Partnership", value: "TechCorp", change: "Active", trend: "up", icon: Star },
    { label: "Pipeline Value", value: "$45K", change: "+$12K", trend: "up", icon: DollarSign },
  ],
}

const investorAnalytics = {
  basic: [
    { label: "Ideas Reviewed", value: "89", change: "+12", trend: "up", icon: Eye },
    { label: "Ideas Saved", value: "23", change: "+4", trend: "up", icon: Heart },
    { label: "Profile Views", value: "156", change: "+23%", trend: "up", icon: Users },
  ],
  medium: [
    { label: "Investment Interests", value: "8", change: "+2", trend: "up", icon: CircleDollarSign },
    { label: "Deals in Progress", value: "3", change: "+1", trend: "up", icon: Handshake },
    { label: "Innovators Connected", value: "45", change: "+8", trend: "up", icon: Users },
    { label: "Due Diligence Active", value: "5", change: "+2", trend: "up", icon: Target },
  ],
  premium: [
    { label: "Portfolio Performance", value: "+34%", change: "+5%", trend: "up", icon: TrendingUp },
    { label: "Total Invested", value: "$2.4M", change: "+$450K", trend: "up", icon: DollarSign },
    { label: "Active Investments", value: "12", change: "+2", trend: "up", icon: Briefcase },
    { label: "Best Performer", value: "GreenTech", change: "+156%", trend: "up", icon: Star },
  ],
}

// Chart data
const monthlyTrendData = [
  { month: "Jan", views: 1200, likes: 340, followers: 45, engagement: 28 },
  { month: "Feb", views: 1450, likes: 420, followers: 52, engagement: 32 },
  { month: "Mar", views: 1380, likes: 380, followers: 48, engagement: 29 },
  { month: "Apr", views: 1620, likes: 520, followers: 68, engagement: 38 },
  { month: "May", views: 1850, likes: 580, followers: 75, engagement: 42 },
  { month: "Jun", views: 2100, likes: 720, followers: 92, engagement: 48 },
]

const weeklyData = [
  { day: "Mon", views: 120, likes: 34, engagement: 28 },
  { day: "Tue", views: 145, likes: 42, engagement: 35 },
  { day: "Wed", views: 98, likes: 28, engagement: 22 },
  { day: "Thu", views: 178, likes: 56, engagement: 48 },
  { day: "Fri", views: 210, likes: 72, engagement: 65 },
  { day: "Sat", views: 156, likes: 45, engagement: 38 },
  { day: "Sun", views: 134, likes: 38, engagement: 32 },
]

const categoryDistribution = [
  { name: "Technology", value: 35, color: "#3b82f6" },
  { name: "Healthcare", value: 25, color: "#10b981" },
  { name: "Finance", value: 20, color: "#f59e0b" },
  { name: "Education", value: 12, color: "#8b5cf6" },
  { name: "Other", value: 8, color: "#6b7280" },
]

const audienceData = [
  { name: "Innovators", value: 45, color: "#3b82f6" },
  { name: "Investors", value: 30, color: "#10b981" },
  { name: "Businesses", value: 25, color: "#f59e0b" },
]

const hourlyEngagement = [
  { hour: "6AM", value: 12 },
  { hour: "9AM", value: 45 },
  { hour: "12PM", value: 78 },
  { hour: "3PM", value: 92 },
  { hour: "6PM", value: 65 },
  { hour: "9PM", value: 38 },
]

const topIdeasData = [
  { name: "AI Healthcare", views: 452, likes: 89, saves: 34 },
  { name: "Green Energy", views: 387, likes: 72, saves: 28 },
  { name: "EdTech Platform", views: 324, likes: 65, saves: 22 },
  { name: "FinTech App", views: 298, likes: 58, saves: 19 },
  { name: "Smart Retail", views: 256, likes: 48, saves: 15 },
]

const geographicData = [
  { country: "India", views: 1245, percentage: 45 },
  { country: "USA", views: 687, percentage: 25 },
  { country: "UK", views: 412, percentage: 15 },
  { country: "UAE", views: 275, percentage: 10 },
  { country: "Others", views: 138, percentage: 5 },
]

const conversionFunnel = [
  { stage: "Profile Views", value: 1000, percentage: 100 },
  { stage: "Idea Views", value: 720, percentage: 72 },
  { stage: "Engagements", value: 340, percentage: 34 },
  { stage: "Collaborations", value: 45, percentage: 4.5 },
]

export default function AnalyticsPage() {
  const [userType, setUserType] = useState<UserType>("individual")
  const [userPlan, setUserPlan] = useState<PlanType>("premium")
  const [dateRange, setDateRange] = useState("last30days")
  const [showDatePicker, setShowDatePicker] = useState(false)
  const [fromDate, setFromDate] = useState("2026-02-20")
  const [toDate, setToDate] = useState("2026-03-20")

  const getAnalyticsData = () => {
    switch (userType) {
      case "business":
        return businessAnalytics
      case "investor":
        return investorAnalytics
      default:
        return individualAnalytics
    }
  }

  const analyticsData = getAnalyticsData()

  const userTypeConfig = {
    individual: { label: "Innovator", color: "text-primary", bgColor: "bg-primary/10", icon: Lightbulb, chartColor: "#3b82f6" },
    business: { label: "Business", color: "text-amber-400", bgColor: "bg-amber-400/10", icon: Building2, chartColor: "#f59e0b" },
    investor: { label: "Investor", color: "text-emerald-400", bgColor: "bg-emerald-400/10", icon: CircleDollarSign, chartColor: "#10b981" },
  }

  const planConfig = {
    basic: { label: "Basic", features: "Essential metrics", locked: false },
    medium: { label: "Pro", features: "Advanced insights", locked: userPlan === "basic" },
    premium: { label: "Premium", features: "Full analytics suite", locked: userPlan !== "premium" },
  }

  return (
    <div className="min-h-screen bg-background">
      <Sidebar />
      <div className="lg:pl-72">
        <Header />
        <main className="p-4 pt-20 lg:pt-6 lg:p-6">
          <div className="max-w-7xl mx-auto space-y-6">
            {/* Page Header */}
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
              <div>
                <h1 className="text-2xl font-bold text-foreground">Insights & Analytics</h1>
                <p className="text-sm text-muted-foreground mt-1">Track your performance and growth on CheckUrIdea</p>
              </div>

              {/* Date Range Selector */}
              <div className="relative">
                <button
                  onClick={() => setShowDatePicker(!showDatePicker)}
                  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-secondary/50 hover:bg-secondary text-sm text-foreground transition-colors"
                >
                  <Calendar className="h-4 w-4 text-muted-foreground" />
                  <span>
                    {dateRange === "custom" 
                      ? `${fromDate} to ${toDate}`
                      : dateRange === "last7days" 
                        ? "Last 7 Days" 
                        : dateRange === "last30days"
                          ? "Last 30 Days"
                          : "Last 90 Days"
                    }
                  </span>
                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
                </button>

                {showDatePicker && (
                  <div className="absolute right-0 top-12 z-50 w-72 rounded-xl glass glass-border p-4 space-y-3">
                    <div className="space-y-2">
                      <button
                        onClick={() => { setDateRange("last7days"); setShowDatePicker(false); }}
                        className={cn("w-full text-left px-3 py-2 rounded-lg text-sm transition-colors", dateRange === "last7days" ? "bg-primary/10 text-primary" : "hover:bg-secondary")}
                      >
                        Last 7 Days
                      </button>
                      <button
                        onClick={() => { setDateRange("last30days"); setShowDatePicker(false); }}
                        className={cn("w-full text-left px-3 py-2 rounded-lg text-sm transition-colors", dateRange === "last30days" ? "bg-primary/10 text-primary" : "hover:bg-secondary")}
                      >
                        Last 30 Days
                      </button>
                      <button
                        onClick={() => { setDateRange("last90days"); setShowDatePicker(false); }}
                        className={cn("w-full text-left px-3 py-2 rounded-lg text-sm transition-colors", dateRange === "last90days" ? "bg-primary/10 text-primary" : "hover:bg-secondary")}
                      >
                        Last 90 Days
                      </button>
                    </div>
                    <div className="border-t border-border pt-3">
                      <p className="text-xs text-muted-foreground mb-2">Custom Range</p>
                      <div className="grid grid-cols-2 gap-2">
                        <div>
                          <label className="text-xs text-muted-foreground">From</label>
                          <input
                            type="date"
                            value={fromDate}
                            onChange={(e) => setFromDate(e.target.value)}
                            className="w-full mt-1 px-2 py-1.5 rounded-lg bg-secondary text-sm text-foreground"
                          />
                        </div>
                        <div>
                          <label className="text-xs text-muted-foreground">To</label>
                          <input
                            type="date"
                            value={toDate}
                            onChange={(e) => setToDate(e.target.value)}
                            className="w-full mt-1 px-2 py-1.5 rounded-lg bg-secondary text-sm text-foreground"
                          />
                        </div>
                      </div>
                      <Button
                        size="sm"
                        className="w-full mt-3"
                        onClick={() => { setDateRange("custom"); setShowDatePicker(false); }}
                      >
                        Apply
                      </Button>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* User Type & Plan Selector (for demo) */}
            <div className="flex flex-wrap gap-4">
              <div className="flex items-center gap-2 rounded-xl bg-secondary/30 p-1">
                {(["individual", "business", "investor"] as UserType[]).map((type) => {
                  const config = userTypeConfig[type]
                  const Icon = config.icon
                  return (
                    <button
                      key={type}
                      onClick={() => setUserType(type)}
                      className={cn(
                        "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
                        userType === type ? `${config.bgColor} ${config.color}` : "text-muted-foreground hover:text-foreground"
                      )}
                    >
                      <Icon className="h-4 w-4" />
                      {config.label}
                    </button>
                  )
                })}
              </div>

              <div className="flex items-center gap-2 rounded-xl bg-secondary/30 p-1">
                {(["basic", "medium", "premium"] as PlanType[]).map((plan) => (
                  <button
                    key={plan}
                    onClick={() => setUserPlan(plan)}
                    className={cn(
                      "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
                      userPlan === plan ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                    )}
                  >
                    {plan === "premium" && <Crown className="h-3.5 w-3.5 text-amber-400" />}
                    {planConfig[plan].label}
                  </button>
                ))}
              </div>
            </div>

            {/* Basic Analytics - Always visible */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <h2 className="text-lg font-semibold text-foreground">Overview</h2>
                <span className="px-2 py-0.5 rounded-full bg-secondary text-xs text-muted-foreground">Basic</span>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {analyticsData.basic.map((stat, idx) => {
                  const Icon = stat.icon
                  return (
                    <div key={idx} className="rounded-2xl glass glass-border p-5">
                      <div className="flex items-start justify-between">
                        <div className={cn("flex h-11 w-11 items-center justify-center rounded-xl", userTypeConfig[userType].bgColor)}>
                          <Icon className={cn("h-5 w-5", userTypeConfig[userType].color)} />
                        </div>
                        <div className={cn(
                          "flex items-center gap-1 text-xs font-medium",
                          stat.trend === "up" ? "text-emerald-400" : "text-red-400"
                        )}>
                          {stat.trend === "up" ? <ArrowUpRight className="h-3.5 w-3.5" /> : <ArrowDownRight className="h-3.5 w-3.5" />}
                          {stat.change}
                        </div>
                      </div>
                      <div className="mt-4">
                        <p className="text-2xl font-bold text-foreground">{stat.value}</p>
                        <p className="text-sm text-muted-foreground mt-1">{stat.label}</p>
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>

            {/* Trend Line Chart - Basic Plan */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div className="rounded-2xl glass glass-border p-6">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h3 className="font-semibold text-foreground">Views Trend</h3>
                    <p className="text-xs text-muted-foreground">Monthly performance overview</p>
                  </div>
                  <Activity className="h-5 w-5 text-muted-foreground" />
                </div>
                <div className="h-64">
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={monthlyTrendData}>
                      <defs>
                        <linearGradient id="colorViews" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor={userTypeConfig[userType].chartColor} stopOpacity={0.3}/>
                          <stop offset="95%" stopColor={userTypeConfig[userType].chartColor} stopOpacity={0}/>
                        </linearGradient>
                      </defs>
                      <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                      <XAxis dataKey="month" stroke="var(--muted-foreground)" fontSize={12} />
                      <YAxis stroke="var(--muted-foreground)" fontSize={12} />
                      <Tooltip 
                        contentStyle={{ 
                          backgroundColor: "var(--card)", 
                          border: "1px solid var(--border)",
                          borderRadius: "8px",
                          color: "var(--foreground)"
                        }} 
                      />
                      <Area 
                        type="monotone" 
                        dataKey="views" 
                        stroke={userTypeConfig[userType].chartColor} 
                        fillOpacity={1} 
                        fill="url(#colorViews)" 
                        strokeWidth={2}
                      />
                    </AreaChart>
                  </ResponsiveContainer>
                </div>
              </div>

              {/* Weekly Bar Chart */}
              <div className="rounded-2xl glass glass-border p-6">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h3 className="font-semibold text-foreground">Weekly Activity</h3>
                    <p className="text-xs text-muted-foreground">Daily engagement breakdown</p>
                  </div>
                  <BarChart3 className="h-5 w-5 text-muted-foreground" />
                </div>
                <div className="h-64">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={weeklyData}>
                      <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                      <XAxis dataKey="day" stroke="var(--muted-foreground)" fontSize={12} />
                      <YAxis stroke="var(--muted-foreground)" fontSize={12} />
                      <Tooltip 
                        contentStyle={{ 
                          backgroundColor: "var(--card)", 
                          border: "1px solid var(--border)",
                          borderRadius: "8px",
                          color: "var(--foreground)"
                        }} 
                      />
                      <Bar dataKey="views" fill={userTypeConfig[userType].chartColor} radius={[4, 4, 0, 0]} />
                      <Bar dataKey="likes" fill="#10b981" radius={[4, 4, 0, 0]} />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </div>
            </div>

            {/* Pro Analytics Section */}
            <div className={cn(planConfig.medium.locked && "opacity-60 pointer-events-none")}>
              <div className="flex items-center gap-2 mb-4">
                <h2 className="text-lg font-semibold text-foreground">Advanced Insights</h2>
                <span className="px-2 py-0.5 rounded-full bg-primary/10 text-xs text-primary font-medium">Pro</span>
                {planConfig.medium.locked && <Lock className="h-4 w-4 text-muted-foreground" />}
              </div>

              {planConfig.medium.locked ? (
                <div className="rounded-2xl glass glass-border p-8 text-center">
                  <Lock className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="font-semibold text-foreground mb-2">Upgrade to Pro</h3>
                  <p className="text-sm text-muted-foreground mb-4">Unlock advanced insights and detailed analytics</p>
                  <Button className="gap-2">
                    <Crown className="h-4 w-4" />
                    Upgrade Now
                  </Button>
                </div>
              ) : (
                <>
                  {/* Pro Stats Cards */}
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    {analyticsData.medium.map((stat, idx) => {
                      const Icon = stat.icon
                      return (
                        <div key={idx} className="rounded-2xl glass glass-border p-5">
                          <div className="flex items-start justify-between">
                            <div className={cn("flex h-10 w-10 items-center justify-center rounded-xl", userTypeConfig[userType].bgColor)}>
                              <Icon className={cn("h-4 w-4", userTypeConfig[userType].color)} />
                            </div>
                            <div className={cn(
                              "flex items-center gap-1 text-xs font-medium",
                              stat.trend === "up" ? "text-emerald-400" : "text-red-400"
                            )}>
                              {stat.trend === "up" ? <ArrowUpRight className="h-3 w-3" /> : <ArrowDownRight className="h-3 w-3" />}
                              {stat.change}
                            </div>
                          </div>
                          <div className="mt-3">
                            <p className="text-xl font-bold text-foreground">{stat.value}</p>
                            <p className="text-xs text-muted-foreground mt-1">{stat.label}</p>
                          </div>
                        </div>
                      )
                    })}
                  </div>

                  {/* Pro Charts Row */}
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* Pie Chart - Category Distribution */}
                    <div className="rounded-2xl glass glass-border p-6">
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <h3 className="font-semibold text-foreground">Category Distribution</h3>
                          <p className="text-xs text-muted-foreground">Ideas by industry</p>
                        </div>
                        <PieChart className="h-5 w-5 text-muted-foreground" />
                      </div>
                      <div className="h-52">
                        <ResponsiveContainer width="100%" height="100%">
                          <RechartsPie>
                            <Pie
                              data={categoryDistribution}
                              cx="50%"
                              cy="50%"
                              innerRadius={50}
                              outerRadius={80}
                              paddingAngle={2}
                              dataKey="value"
                            >
                              {categoryDistribution.map((entry, index) => (
                                <Cell key={`cell-${index}`} fill={entry.color} />
                              ))}
                            </Pie>
                            <Tooltip 
                              contentStyle={{ 
                                backgroundColor: "var(--card)", 
                                border: "1px solid var(--border)",
                                borderRadius: "8px",
                                color: "var(--foreground)"
                              }} 
                            />
                          </RechartsPie>
                        </ResponsiveContainer>
                      </div>
                      <div className="grid grid-cols-2 gap-2 mt-2">
                        {categoryDistribution.slice(0, 4).map((item, idx) => (
                          <div key={idx} className="flex items-center gap-2 text-xs">
                            <span className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
                            <span className="text-muted-foreground">{item.name}</span>
                            <span className="text-foreground font-medium ml-auto">{item.value}%</span>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Audience Breakdown */}
                    <div className="rounded-2xl glass glass-border p-6">
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <h3 className="font-semibold text-foreground">Audience Breakdown</h3>
                          <p className="text-xs text-muted-foreground">Who views your content</p>
                        </div>
                        <Users className="h-5 w-5 text-muted-foreground" />
                      </div>
                      <div className="h-52">
                        <ResponsiveContainer width="100%" height="100%">
                          <RechartsPie>
                            <Pie
                              data={audienceData}
                              cx="50%"
                              cy="50%"
                              innerRadius={50}
                              outerRadius={80}
                              paddingAngle={2}
                              dataKey="value"
                            >
                              {audienceData.map((entry, index) => (
                                <Cell key={`cell-${index}`} fill={entry.color} />
                              ))}
                            </Pie>
                            <Tooltip 
                              contentStyle={{ 
                                backgroundColor: "var(--card)", 
                                border: "1px solid var(--border)",
                                borderRadius: "8px",
                                color: "var(--foreground)"
                              }} 
                            />
                          </RechartsPie>
                        </ResponsiveContainer>
                      </div>
                      <div className="space-y-2 mt-2">
                        {audienceData.map((item, idx) => (
                          <div key={idx} className="flex items-center gap-2 text-xs">
                            <span className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
                            <span className="text-muted-foreground">{item.name}</span>
                            <span className="text-foreground font-medium ml-auto">{item.value}%</span>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Peak Hours */}
                    <div className="rounded-2xl glass glass-border p-6">
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <h3 className="font-semibold text-foreground">Peak Engagement Hours</h3>
                          <p className="text-xs text-muted-foreground">Best time to post</p>
                        </div>
                        <Activity className="h-5 w-5 text-muted-foreground" />
                      </div>
                      <div className="h-52">
                        <ResponsiveContainer width="100%" height="100%">
                          <BarChart data={hourlyEngagement} layout="vertical">
                            <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                            <XAxis type="number" stroke="var(--muted-foreground)" fontSize={12} />
                            <YAxis dataKey="hour" type="category" stroke="var(--muted-foreground)" fontSize={12} width={50} />
                            <Tooltip 
                              contentStyle={{ 
                                backgroundColor: "var(--card)", 
                                border: "1px solid var(--border)",
                                borderRadius: "8px",
                                color: "var(--foreground)"
                              }} 
                            />
                            <Bar dataKey="value" fill={userTypeConfig[userType].chartColor} radius={[0, 4, 4, 0]} />
                          </BarChart>
                        </ResponsiveContainer>
                      </div>
                    </div>
                  </div>
                </>
              )}
            </div>

            {/* Premium Analytics Section */}
            <div className={cn(planConfig.premium.locked && "opacity-60 pointer-events-none")}>
              <div className="flex items-center gap-2 mb-4">
                <h2 className="text-lg font-semibold text-foreground">Premium Analytics</h2>
                <span className="px-2 py-0.5 rounded-full bg-amber-400/10 text-xs text-amber-400 font-medium flex items-center gap-1">
                  <Crown className="h-3 w-3" />
                  Premium
                </span>
                {planConfig.premium.locked && <Lock className="h-4 w-4 text-muted-foreground" />}
              </div>

              {planConfig.premium.locked ? (
                <div className="rounded-2xl glass glass-border p-8 text-center">
                  <Crown className="h-12 w-12 text-amber-400 mx-auto mb-4" />
                  <h3 className="font-semibold text-foreground mb-2">Upgrade to Premium</h3>
                  <p className="text-sm text-muted-foreground mb-4">Get full analytics suite with detailed reports and predictions</p>
                  <Button className="gap-2 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600">
                    <Crown className="h-4 w-4" />
                    Go Premium
                  </Button>
                </div>
              ) : (
                <>
                  {/* Premium Stats */}
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    {analyticsData.premium.map((stat, idx) => {
                      const Icon = stat.icon
                      return (
                        <div key={idx} className="rounded-2xl glass glass-border p-5 border-amber-400/20">
                          <div className="flex items-start justify-between">
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400/20 to-orange-400/20">
                              <Icon className="h-4 w-4 text-amber-400" />
                            </div>
                            <div className={cn(
                              "flex items-center gap-1 text-xs font-medium",
                              stat.trend === "up" ? "text-emerald-400" : "text-red-400"
                            )}>
                              {stat.trend === "up" ? <ArrowUpRight className="h-3 w-3" /> : <ArrowDownRight className="h-3 w-3" />}
                              {stat.change}
                            </div>
                          </div>
                          <div className="mt-3">
                            <p className="text-xl font-bold text-foreground">{stat.value}</p>
                            <p className="text-xs text-muted-foreground mt-1">{stat.label}</p>
                          </div>
                        </div>
                      )
                    })}
                  </div>

                  {/* Premium Charts - Multi-metric Line Chart */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <div className="rounded-2xl glass glass-border p-6">
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <h3 className="font-semibold text-foreground">Growth Metrics</h3>
                          <p className="text-xs text-muted-foreground">Multi-metric performance</p>
                        </div>
                        <TrendingUp className="h-5 w-5 text-amber-400" />
                      </div>
                      <div className="h-64">
                        <ResponsiveContainer width="100%" height="100%">
                          <LineChart data={monthlyTrendData}>
                            <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
                            <XAxis dataKey="month" stroke="var(--muted-foreground)" fontSize={12} />
                            <YAxis stroke="var(--muted-foreground)" fontSize={12} />
                            <Tooltip 
                              contentStyle={{ 
                                backgroundColor: "var(--card)", 
                                border: "1px solid var(--border)",
                                borderRadius: "8px",
                                color: "var(--foreground)"
                              }} 
                            />
                            <Legend />
                            <Line type="monotone" dataKey="views" stroke="#3b82f6" strokeWidth={2} dot={{ r: 4 }} />
                            <Line type="monotone" dataKey="likes" stroke="#10b981" strokeWidth={2} dot={{ r: 4 }} />
                            <Line type="monotone" dataKey="followers" stroke="#f59e0b" strokeWidth={2} dot={{ r: 4 }} />
                          </LineChart>
                        </ResponsiveContainer>
                      </div>
                    </div>

                    {/* Conversion Funnel */}
                    <div className="rounded-2xl glass glass-border p-6">
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <h3 className="font-semibold text-foreground">Conversion Funnel</h3>
                          <p className="text-xs text-muted-foreground">User journey analysis</p>
                        </div>
                        <Target className="h-5 w-5 text-amber-400" />
                      </div>
                      <div className="space-y-4 mt-6">
                        {conversionFunnel.map((stage, idx) => (
                          <div key={idx}>
                            <div className="flex items-center justify-between text-sm mb-1">
                              <span className="text-foreground">{stage.stage}</span>
                              <span className="text-muted-foreground">{stage.value.toLocaleString()} ({stage.percentage}%)</span>
                            </div>
                            <div className="h-3 bg-secondary rounded-full overflow-hidden">
                              <div 
                                className="h-full rounded-full transition-all"
                                style={{ 
                                  width: `${stage.percentage}%`,
                                  background: `linear-gradient(90deg, ${userTypeConfig[userType].chartColor}, ${idx === 0 ? userTypeConfig[userType].chartColor : '#f59e0b'})`
                                }}
                              />
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>

                  {/* Top Ideas & Geographic Data */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* Top Performing Ideas */}
                    <div className="rounded-2xl glass glass-border p-6">
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <h3 className="font-semibold text-foreground">Top Performing Ideas</h3>
                          <p className="text-xs text-muted-foreground">Your best content</p>
                        </div>
                        <Star className="h-5 w-5 text-amber-400" />
                      </div>
                      <div className="space-y-3">
                        {topIdeasData.map((idea, idx) => (
                          <div key={idx} className="flex items-center gap-4 p-3 rounded-xl bg-secondary/30">
                            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-400/10 text-amber-400 font-bold text-sm">
                              {idx + 1}
                            </div>
                            <div className="flex-1 min-w-0">
                              <p className="text-sm font-medium text-foreground truncate">{idea.name}</p>
                              <div className="flex items-center gap-3 text-xs text-muted-foreground mt-0.5">
                                <span className="flex items-center gap-1"><Eye className="h-3 w-3" /> {idea.views}</span>
                                <span className="flex items-center gap-1"><Heart className="h-3 w-3" /> {idea.likes}</span>
                                <span className="flex items-center gap-1"><Target className="h-3 w-3" /> {idea.saves}</span>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Geographic Distribution */}
                    <div className="rounded-2xl glass glass-border p-6">
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <h3 className="font-semibold text-foreground">Geographic Reach</h3>
                          <p className="text-xs text-muted-foreground">Where your audience is from</p>
                        </div>
                        <Globe className="h-5 w-5 text-amber-400" />
                      </div>
                      <div className="space-y-3">
                        {geographicData.map((country, idx) => (
                          <div key={idx} className="space-y-1">
                            <div className="flex items-center justify-between text-sm">
                              <span className="flex items-center gap-2 text-foreground">
                                <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
                                {country.country}
                              </span>
                              <span className="text-muted-foreground">{country.views.toLocaleString()} ({country.percentage}%)</span>
                            </div>
                            <div className="h-2 bg-secondary rounded-full overflow-hidden">
                              <div 
                                className="h-full bg-gradient-to-r from-amber-400 to-orange-400 rounded-full"
                                style={{ width: `${country.percentage}%` }}
                              />
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}