"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AnimatedCard } from "@/components/ui/animated-card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { 
  BarChart,
  Bar,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  AreaChart,
  Area
} from "recharts"
import { 
  Users,
  Building,
  MessageSquare,
  Search,
  TrendingUp,
  TrendingDown,
  Activity,
  Calendar,
  Download,
  Filter,
  Eye,
  MapPin,
  Star,
  Phone,
  Mail,
  DollarSign,
  Clock,
  UserPlus,
  Heart,
  ArrowUp,
  ArrowDown
} from "lucide-react"
import { motion } from "framer-motion"

// Mock analytics data
const mockAnalytics = {
  overview: {
    totalUsers: 15234,
    totalFacilities: 3421,
    totalReviews: 8567,
    totalSearches: 145678,
    userGrowth: 12.5,
    facilityGrowth: 8.3,
    reviewGrowth: 18.7,
    searchGrowth: 22.1
  },
  userMetrics: [
    { month: "Jan", totalUsers: 12500, newUsers: 1250, activeUsers: 8900 },
    { month: "Feb", totalUsers: 13200, newUsers: 1320, activeUsers: 9200 },
    { month: "Mar", totalUsers: 13800, newUsers: 1150, activeUsers: 9500 },
    { month: "Apr", totalUsers: 14200, newUsers: 980, activeUsers: 9800 },
    { month: "May", totalUsers: 14800, newUsers: 1200, activeUsers: 10200 },
    { month: "Jun", totalUsers: 15234, newUsers: 1434, activeUsers: 10500 }
  ],
  searchAnalytics: [
    { term: "assisted living", count: 25678, percentage: 18.2 },
    { term: "memory care", count: 18945, percentage: 13.4 },
    { term: "independent living", count: 15432, percentage: 10.9 },
    { term: "skilled nursing", count: 12567, percentage: 8.9 },
    { term: "alzheimer care", count: 9876, percentage: 7.0 },
    { term: "senior community", count: 8765, percentage: 6.2 },
    { term: "rehabilitation", count: 7654, percentage: 5.4 },
    { term: "hospice care", count: 6543, percentage: 4.6 }
  ],
  facilityPerformance: [
    { name: "Sunrise Senior Living", views: 15678, inquiries: 234, reviews: 45, rating: 4.8 },
    { name: "Golden Years Care", views: 12456, inquiries: 189, reviews: 38, rating: 4.6 },
    { name: "Peaceful Pines", views: 11234, inquiries: 167, reviews: 32, rating: 4.7 },
    { name: "Heritage Manor", views: 9876, inquiries: 145, reviews: 28, rating: 4.4 },
    { name: "Serenity Gardens", views: 8765, inquiries: 132, reviews: 25, rating: 4.5 }
  ],
  locationAnalytics: [
    { state: "Illinois", facilities: 456, users: 3245, searches: 18765 },
    { state: "California", facilities: 523, users: 4156, searches: 22345 },
    { state: "Texas", facilities: 398, users: 2987, searches: 16543 },
    { state: "Florida", facilities: 612, users: 3876, searches: 20987 },
    { state: "New York", facilities: 345, users: 2654, searches: 14567 }
  ],
  conversionFunnel: [
    { stage: "Landing", users: 100000, percentage: 100 },
    { stage: "Search", users: 45000, percentage: 45 },
    { stage: "Facility View", users: 18000, percentage: 18 },
    { stage: "Contact", users: 5400, percentage: 5.4 },
    { stage: "Tour Request", users: 2700, percentage: 2.7 },
    { stage: "Registration", users: 900, percentage: 0.9 }
  ],
  revenueMetrics: [
    { month: "Jan", subscriptions: 45000, ads: 12000, total: 57000 },
    { month: "Feb", subscriptions: 48000, ads: 13500, total: 61500 },
    { month: "Mar", subscriptions: 52000, ads: 14200, total: 66200 },
    { month: "Apr", subscriptions: 55000, ads: 15800, total: 70800 },
    { month: "May", subscriptions: 58000, ads: 16500, total: 74500 },
    { month: "Jun", subscriptions: 62000, ads: 17200, total: 79200 }
  ]
}

const careTypeDistribution = [
  { name: "Assisted Living", value: 42, color: "#3F5CEA" },
  { name: "Memory Care", value: 25, color: "#5B73F0" },
  { name: "Independent Living", value: 18, color: "#7C8EF7" },
  { name: "Skilled Nursing", value: 15, color: "#9DA9FF" }
]

const reviewSentiment = [
  { name: "Positive", value: 68, color: "#10B981" },
  { name: "Neutral", value: 22, color: "#F59E0B" },
  { name: "Negative", value: 10, color: "#EF4444" }
]

export default function AdminAnalyticsPage() {
  const [timeRange, setTimeRange] = useState("6months")
  const [selectedMetric, setSelectedMetric] = useState("users")

  const getGrowthIcon = (growth: number) => {
    return growth >= 0 ? (
      <ArrowUp className="h-4 w-4 text-green-600" />
    ) : (
      <ArrowDown className="h-4 w-4 text-red-600" />
    )
  }

  const getGrowthColor = (growth: number) => {
    return growth >= 0 ? "text-green-600" : "text-red-600"
  }

  return (
    <div className="p-3 md:p-6 lg:p-8 space-y-4 md:space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
        <div>
          <h1 className="font-primary text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mb-2">
            Analytics Dashboard
          </h1>
          <p className="font-body text-sm md:text-base lg:text-lg text-gray-600">
            Comprehensive platform insights and performance metrics
          </p>
        </div>
        
        <div className="flex gap-2 md:gap-3">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-40">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">Last 7 days</SelectItem>
              <SelectItem value="30days">Last 30 days</SelectItem>
              <SelectItem value="3months">Last 3 months</SelectItem>
              <SelectItem value="6months">Last 6 months</SelectItem>
              <SelectItem value="1year">Last year</SelectItem>
            </SelectContent>
          </Select>
          
          <Button className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
            <Download className="h-4 w-4 mr-2" />
            Export Report
          </Button>
        </div>
      </div>

      {/* Key Metrics */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <AnimatedCard className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
          <CardContent className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <Users className="h-6 w-6 text-blue-600" />
              </div>
              <div className={`flex items-center gap-1 ${getGrowthColor(mockAnalytics.overview.userGrowth)}`}>
                {getGrowthIcon(mockAnalytics.overview.userGrowth)}
                <span className="text-sm font-medium">{mockAnalytics.overview.userGrowth}%</span>
              </div>
            </div>
            <h3 className="font-primary text-2xl font-bold text-gray-900 mb-1">
              {mockAnalytics.overview.totalUsers.toLocaleString()}
            </h3>
            <p className="font-body text-sm text-gray-600">Total Users</p>
          </CardContent>
        </AnimatedCard>

        <AnimatedCard className="bg-gradient-to-br from-green-50 to-emerald-50 border-green-200">
          <CardContent className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <Building className="h-6 w-6 text-green-600" />
              </div>
              <div className={`flex items-center gap-1 ${getGrowthColor(mockAnalytics.overview.facilityGrowth)}`}>
                {getGrowthIcon(mockAnalytics.overview.facilityGrowth)}
                <span className="text-sm font-medium">{mockAnalytics.overview.facilityGrowth}%</span>
              </div>
            </div>
            <h3 className="font-primary text-2xl font-bold text-gray-900 mb-1">
              {mockAnalytics.overview.totalFacilities.toLocaleString()}
            </h3>
            <p className="font-body text-sm text-gray-600">Total Facilities</p>
          </CardContent>
        </AnimatedCard>

        <AnimatedCard className="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
          <CardContent className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                <MessageSquare className="h-6 w-6 text-purple-600" />
              </div>
              <div className={`flex items-center gap-1 ${getGrowthColor(mockAnalytics.overview.reviewGrowth)}`}>
                {getGrowthIcon(mockAnalytics.overview.reviewGrowth)}
                <span className="text-sm font-medium">{mockAnalytics.overview.reviewGrowth}%</span>
              </div>
            </div>
            <h3 className="font-primary text-2xl font-bold text-gray-900 mb-1">
              {mockAnalytics.overview.totalReviews.toLocaleString()}
            </h3>
            <p className="font-body text-sm text-gray-600">Total Reviews</p>
          </CardContent>
        </AnimatedCard>

        <AnimatedCard className="bg-gradient-to-br from-orange-50 to-red-50 border-orange-200">
          <CardContent className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                <Search className="h-6 w-6 text-orange-600" />
              </div>
              <div className={`flex items-center gap-1 ${getGrowthColor(mockAnalytics.overview.searchGrowth)}`}>
                {getGrowthIcon(mockAnalytics.overview.searchGrowth)}
                <span className="text-sm font-medium">{mockAnalytics.overview.searchGrowth}%</span>
              </div>
            </div>
            <h3 className="font-primary text-2xl font-bold text-gray-900 mb-1">
              {mockAnalytics.overview.totalSearches.toLocaleString()}
            </h3>
            <p className="font-body text-sm text-gray-600">Total Searches</p>
          </CardContent>
        </AnimatedCard>
      </div>

      <Tabs defaultValue="overview" className="w-full">
        <TabsList className="grid w-full grid-cols-6 h-16 bg-white border border-blue-200/50 rounded-xl shadow-sm">
          <TabsTrigger value="overview" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <Activity className="h-4 w-4 mr-2" />
            Overview
          </TabsTrigger>
          <TabsTrigger value="users" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <Users className="h-4 w-4 mr-2" />
            Users
          </TabsTrigger>
          <TabsTrigger value="facilities" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <Building className="h-4 w-4 mr-2" />
            Facilities
          </TabsTrigger>
          <TabsTrigger value="search" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <Search className="h-4 w-4 mr-2" />
            Search
          </TabsTrigger>
          <TabsTrigger value="reviews" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <MessageSquare className="h-4 w-4 mr-2" />
            Reviews
          </TabsTrigger>
          <TabsTrigger value="revenue" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <DollarSign className="h-4 w-4 mr-2" />
            Revenue
          </TabsTrigger>
        </TabsList>

        {/* Overview Tab */}
        <TabsContent value="overview" className="mt-8 space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* User Growth Chart */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">User Growth Trend</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <AreaChart data={mockAnalytics.userMetrics}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Area
                      type="monotone"
                      dataKey="totalUsers"
                      stroke="#3F5CEA"
                      fill="#3F5CEA"
                      fillOpacity={0.1}
                    />
                    <Area
                      type="monotone"
                      dataKey="newUsers"
                      stroke="#5B73F0"
                      fill="#5B73F0"
                      fillOpacity={0.2}
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>

            {/* Care Type Distribution */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Care Type Distribution</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <PieChart>
                    <Pie
                      data={careTypeDistribution}
                      cx="50%"
                      cy="50%"
                      outerRadius={100}
                      dataKey="value"
                      label={({ name, value }) => `${name}: ${value}%`}
                    >
                      {careTypeDistribution.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>
          </div>

          {/* Conversion Funnel */}
          <AnimatedCard>
            <CardHeader>
              <CardTitle className="font-primary text-xl text-gray-900">User Conversion Funnel</CardTitle>
              <p className="font-body text-gray-600">Track user journey from landing to registration</p>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {mockAnalytics.conversionFunnel.map((stage, index) => (
                  <div key={stage.stage} className="relative">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-body font-medium text-gray-900">{stage.stage}</span>
                      <div className="flex items-center gap-4">
                        <span className="font-body text-sm text-gray-600">
                          {stage.users.toLocaleString()} users
                        </span>
                        <span className="font-body text-sm font-medium text-[#3F5CEA]">
                          {stage.percentage}%
                        </span>
                      </div>
                    </div>
                    <Progress value={stage.percentage} className="h-3" />
                  </div>
                ))}
              </div>
            </CardContent>
          </AnimatedCard>
        </TabsContent>

        {/* Users Tab */}
        <TabsContent value="users" className="mt-8 space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* User Metrics Chart */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">User Activity Metrics</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <LineChart data={mockAnalytics.userMetrics}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line
                      type="monotone"
                      dataKey="newUsers"
                      stroke="#3F5CEA"
                      strokeWidth={3}
                      name="New Users"
                    />
                    <Line
                      type="monotone"
                      dataKey="activeUsers"
                      stroke="#5B73F0"
                      strokeWidth={3}
                      name="Active Users"
                    />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>

            {/* User Demographics */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">User Demographics</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-2 gap-4">
                  <div className="text-center p-4 bg-blue-50 rounded-lg">
                    <p className="font-primary text-2xl font-bold text-blue-900">68%</p>
                    <p className="font-body text-sm text-blue-700">Families</p>
                  </div>
                  <div className="text-center p-4 bg-green-50 rounded-lg">
                    <p className="font-primary text-2xl font-bold text-green-900">32%</p>
                    <p className="font-body text-sm text-green-700">Facility Owners</p>
                  </div>
                </div>

                <div className="space-y-3">
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="font-body text-sm text-gray-700">Age 45-55</span>
                      <span className="font-body text-sm text-gray-600">35%</span>
                    </div>
                    <Progress value={35} className="h-2" />
                  </div>
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="font-body text-sm text-gray-700">Age 55-65</span>
                      <span className="font-body text-sm text-gray-600">42%</span>
                    </div>
                    <Progress value={42} className="h-2" />
                  </div>
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="font-body text-sm text-gray-700">Age 65+</span>
                      <span className="font-body text-sm text-gray-600">23%</span>
                    </div>
                    <Progress value={23} className="h-2" />
                  </div>
                </div>
              </CardContent>
            </AnimatedCard>
          </div>

          {/* Location Analytics */}
          <AnimatedCard>
            <CardHeader>
              <CardTitle className="font-primary text-xl text-gray-900">Geographic Distribution</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {mockAnalytics.locationAnalytics.map((location, index) => (
                  <div key={location.state} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div className="flex items-center gap-3">
                      <MapPin className="h-5 w-5 text-[#3F5CEA]" />
                      <span className="font-body font-medium text-gray-900">{location.state}</span>
                    </div>
                    <div className="flex items-center gap-6 text-sm text-gray-600">
                      <div className="text-center">
                        <p className="font-body font-semibold text-gray-900">{location.facilities}</p>
                        <p className="font-body text-xs">Facilities</p>
                      </div>
                      <div className="text-center">
                        <p className="font-body font-semibold text-gray-900">{location.users.toLocaleString()}</p>
                        <p className="font-body text-xs">Users</p>
                      </div>
                      <div className="text-center">
                        <p className="font-body font-semibold text-gray-900">{location.searches.toLocaleString()}</p>
                        <p className="font-body text-xs">Searches</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </AnimatedCard>
        </TabsContent>

        {/* Facilities Tab */}
        <TabsContent value="facilities" className="mt-8 space-y-6">
          <AnimatedCard>
            <CardHeader>
              <CardTitle className="font-primary text-xl text-gray-900">Top Performing Facilities</CardTitle>
              <p className="font-body text-gray-600">Facilities ranked by views and engagement</p>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {mockAnalytics.facilityPerformance.map((facility, index) => (
                  <div key={facility.name} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                    <div className="flex items-center gap-4">
                      <div className="w-8 h-8 bg-[#3F5CEA] text-white rounded-full flex items-center justify-center font-body font-bold">
                        {index + 1}
                      </div>
                      <div>
                        <h4 className="font-body font-semibold text-gray-900">{facility.name}</h4>
                        <div className="flex items-center gap-2 mt-1">
                          <div className="flex items-center gap-1">
                            {Array.from({ length: 5 }, (_, i) => (
                              <Star
                                key={i}
                                className={`h-3 w-3 ${
                                  i < Math.floor(facility.rating) ? "text-yellow-400 fill-yellow-400" : "text-gray-300"
                                }`}
                              />
                            ))}
                          </div>
                          <span className="font-body text-sm text-gray-600">({facility.rating})</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-6 text-sm">
                      <div className="text-center">
                        <p className="font-body font-semibold text-gray-900">{facility.views.toLocaleString()}</p>
                        <p className="font-body text-xs text-gray-600">Views</p>
                      </div>
                      <div className="text-center">
                        <p className="font-body font-semibold text-gray-900">{facility.inquiries}</p>
                        <p className="font-body text-xs text-gray-600">Inquiries</p>
                      </div>
                      <div className="text-center">
                        <p className="font-body font-semibold text-gray-900">{facility.reviews}</p>
                        <p className="font-body text-xs text-gray-600">Reviews</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </AnimatedCard>
        </TabsContent>

        {/* Search Tab */}
        <TabsContent value="search" className="mt-8 space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Popular Search Terms */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Popular Search Terms</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {mockAnalytics.searchAnalytics.map((term, index) => (
                    <div key={term.term} className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <span className="font-body text-sm font-medium text-gray-700">{index + 1}.</span>
                        <span className="font-body text-gray-900">{term.term}</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="font-body text-sm text-gray-600">{term.count.toLocaleString()}</span>
                        <div className="w-16">
                          <Progress value={term.percentage} className="h-2" />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </AnimatedCard>

            {/* Search Trends */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Search Volume Trends</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <BarChart data={mockAnalytics.userMetrics}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="totalUsers" fill="#3F5CEA" name="Search Volume" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>
          </div>
        </TabsContent>

        {/* Reviews Tab */}
        <TabsContent value="reviews" className="mt-8 space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Review Sentiment */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Review Sentiment Analysis</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <PieChart>
                    <Pie
                      data={reviewSentiment}
                      cx="50%"
                      cy="50%"
                      outerRadius={100}
                      dataKey="value"
                      label={({ name, value }) => `${name}: ${value}%`}
                    >
                      {reviewSentiment.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>

            {/* Review Volume */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Review Volume Over Time</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={mockAnalytics.userMetrics}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Line
                      type="monotone"
                      dataKey="activeUsers"
                      stroke="#3F5CEA"
                      strokeWidth={3}
                      name="Reviews"
                    />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>
          </div>
        </TabsContent>

        {/* Revenue Tab */}
        <TabsContent value="revenue" className="mt-8 space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Revenue Chart */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Revenue Trends</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <AreaChart data={mockAnalytics.revenueMetrics}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip formatter={(value) => `$${value.toLocaleString()}`} />
                    <Legend />
                    <Area
                      type="monotone"
                      dataKey="subscriptions"
                      stackId="1"
                      stroke="#3F5CEA"
                      fill="#3F5CEA"
                      name="Subscriptions"
                    />
                    <Area
                      type="monotone"
                      dataKey="ads"
                      stackId="1"
                      stroke="#5B73F0"
                      fill="#5B73F0"
                      name="Advertising"
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>

            {/* Revenue Breakdown */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Revenue Breakdown</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-2 gap-4">
                  <div className="text-center p-4 bg-blue-50 rounded-lg">
                    <p className="font-primary text-2xl font-bold text-blue-900">$62K</p>
                    <p className="font-body text-sm text-blue-700">Subscriptions</p>
                  </div>
                  <div className="text-center p-4 bg-green-50 rounded-lg">
                    <p className="font-primary text-2xl font-bold text-green-900">$17K</p>
                    <p className="font-body text-sm text-green-700">Advertising</p>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="p-4 border border-gray-200 rounded-lg">
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-body font-medium text-gray-900">Premium Subscriptions</span>
                      <span className="font-body text-sm text-gray-600">78%</span>
                    </div>
                    <Progress value={78} className="h-2" />
                  </div>
                  
                  <div className="p-4 border border-gray-200 rounded-lg">
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-body font-medium text-gray-900">Featured Listings</span>
                      <span className="font-body text-sm text-gray-600">22%</span>
                    </div>
                    <Progress value={22} className="h-2" />
                  </div>
                </div>

                <div className="p-4 bg-green-50 rounded-lg">
                  <div className="flex items-center gap-2 mb-1">
                    <TrendingUp className="h-5 w-5 text-green-600" />
                    <span className="font-body font-medium text-green-900">Revenue Growth</span>
                  </div>
                  <p className="font-body text-2xl font-bold text-green-900">+28.5%</p>
                  <p className="font-body text-sm text-green-700">vs. last month</p>
                </div>
              </CardContent>
            </AnimatedCard>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}