"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 { 
  LineChart,
  Line,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  AreaChart,
  Area
} from "recharts"
import { 
  Eye,
  Phone,
  MessageSquare,
  Calendar,
  Users,
  TrendingUp,
  TrendingDown,
  Download,
  Filter,
  Star,
  MapPin,
  Clock,
  Heart,
  ArrowUp,
  ArrowDown,
  Target,
  Award,
  Zap,
  BarChart3,
  PieChart as PieChartIcon,
  Activity
} from "lucide-react"
import Link from "next/link"
import { motion } from "framer-motion"

// Mock analytics data
const mockAnalytics = {
  overview: {
    profileViews: 2847,
    contactClicks: 156,
    tourRequests: 23,
    favorites: 89,
    reviewsReceived: 12,
    averageRating: 4.6,
    viewsGrowth: 12.5,
    contactGrowth: 8.3,
    tourGrowth: 18.7,
    favoritesGrowth: 22.1
  },
  monthlyData: [
    { month: "Jan", views: 2100, contacts: 120, tours: 18, favorites: 65, reviews: 8 },
    { month: "Feb", views: 2300, contacts: 135, tours: 20, favorites: 72, reviews: 10 },
    { month: "Mar", views: 2450, contacts: 142, tours: 19, favorites: 78, reviews: 9 },
    { month: "Apr", views: 2600, contacts: 148, tours: 22, favorites: 83, reviews: 11 },
    { month: "May", views: 2750, contacts: 152, tours: 21, favorites: 86, reviews: 13 },
    { month: "Jun", views: 2847, contacts: 156, tours: 23, favorites: 89, reviews: 12 }
  ],
  demographics: [
    { age: "45-55", percentage: 35, count: 997 },
    { age: "55-65", percentage: 42, count: 1196 },
    { age: "65-75", percentage: 18, count: 512 },
    { age: "75+", percentage: 5, count: 142 }
  ],
  searchTerms: [
    { term: "assisted living Springfield", count: 487, percentage: 17.1 },
    { term: "memory care near me", count: 342, percentage: 12.0 },
    { term: "senior living Springfield IL", count: 298, percentage: 10.5 },
    { term: "nursing home Springfield", count: 245, percentage: 8.6 },
    { term: "elderly care facilities", count: 198, percentage: 7.0 }
  ],
  reviewAnalysis: {
    distribution: [
      { stars: 5, count: 8, percentage: 66.7 },
      { stars: 4, count: 3, percentage: 25.0 },
      { stars: 3, count: 1, percentage: 8.3 },
      { stars: 2, count: 0, percentage: 0 },
      { stars: 1, count: 0, percentage: 0 }
    ],
    sentiment: [
      { type: "Positive", count: 9, percentage: 75, color: "#10B981" },
      { type: "Neutral", count: 2, percentage: 17, color: "#F59E0B" },
      { type: "Negative", count: 1, percentage: 8, color: "#EF4444" }
    ],
    commonTopics: [
      { topic: "Staff Quality", mentions: 8, sentiment: "positive" },
      { topic: "Cleanliness", mentions: 6, sentiment: "positive" },
      { topic: "Activities", mentions: 5, sentiment: "positive" },
      { topic: "Food Quality", mentions: 4, sentiment: "neutral" },
      { topic: "Pricing", mentions: 3, sentiment: "neutral" }
    ]
  },
  competitorAnalysis: [
    { name: "Golden Years Care", avgRating: 4.2, reviewCount: 156, views: "Est. 2.1K" },
    { name: "Heritage Manor", avgRating: 4.4, reviewCount: 89, views: "Est. 1.8K" },
    { name: "Peaceful Pines", avgRating: 4.7, reviewCount: 67, views: "Est. 1.5K" },
    { name: "Serenity Gardens", avgRating: 4.1, reviewCount: 134, views: "Est. 1.9K" }
  ],
  hourlyViews: [
    { hour: "6 AM", views: 45 },
    { hour: "9 AM", views: 156 },
    { hour: "12 PM", views: 234 },
    { hour: "3 PM", views: 189 },
    { hour: "6 PM", views: 167 },
    { hour: "9 PM", views: 89 }
  ],
  conversionFunnel: [
    { stage: "Profile Views", count: 2847, percentage: 100, color: "#3F5CEA" },
    { stage: "Contact Info Viewed", count: 512, percentage: 18, color: "#5B73F0" },
    { stage: "Contact Attempted", count: 156, percentage: 5.5, color: "#7C8EF7" },
    { stage: "Tour Requested", count: 23, percentage: 0.8, color: "#9DA9FF" }
  ]
}

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

  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"
  }

  const getSentimentColor = (sentiment: string) => {
    switch (sentiment) {
      case "positive": return "text-green-700 bg-green-100"
      case "neutral": return "text-yellow-700 bg-yellow-100"
      case "negative": return "text-red-700 bg-red-100"
      default: return "text-gray-700 bg-gray-100"
    }
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="font-primary text-3xl md:text-4xl font-bold text-gray-900 mb-2">
            Analytics Dashboard
          </h1>
          <p className="font-body text-lg text-gray-600">
            Track your facility's performance and engagement metrics
          </p>
        </div>
        
        <div className="flex 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>
          
          <Link href="/facility-owner/dashboard">
            <Button variant="outline" className="border-gray-300 text-gray-700 hover:bg-gray-50">
              Back to Dashboard
            </Button>
          </Link>
          
          <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-2 lg: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">
                <Eye className="h-6 w-6 text-blue-600" />
              </div>
              <div className={`flex items-center gap-1 ${getGrowthColor(mockAnalytics.overview.viewsGrowth)}`}>
                {getGrowthIcon(mockAnalytics.overview.viewsGrowth)}
                <span className="text-sm font-medium">{mockAnalytics.overview.viewsGrowth}%</span>
              </div>
            </div>
            <h3 className="font-primary text-2xl font-bold text-gray-900 mb-1">
              {mockAnalytics.overview.profileViews.toLocaleString()}
            </h3>
            <p className="font-body text-sm text-gray-600">Profile Views</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">
                <Phone className="h-6 w-6 text-green-600" />
              </div>
              <div className={`flex items-center gap-1 ${getGrowthColor(mockAnalytics.overview.contactGrowth)}`}>
                {getGrowthIcon(mockAnalytics.overview.contactGrowth)}
                <span className="text-sm font-medium">{mockAnalytics.overview.contactGrowth}%</span>
              </div>
            </div>
            <h3 className="font-primary text-2xl font-bold text-gray-900 mb-1">
              {mockAnalytics.overview.contactClicks}
            </h3>
            <p className="font-body text-sm text-gray-600">Contact Clicks</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">
                <Calendar className="h-6 w-6 text-purple-600" />
              </div>
              <div className={`flex items-center gap-1 ${getGrowthColor(mockAnalytics.overview.tourGrowth)}`}>
                {getGrowthIcon(mockAnalytics.overview.tourGrowth)}
                <span className="text-sm font-medium">{mockAnalytics.overview.tourGrowth}%</span>
              </div>
            </div>
            <h3 className="font-primary text-2xl font-bold text-gray-900 mb-1">
              {mockAnalytics.overview.tourRequests}
            </h3>
            <p className="font-body text-sm text-gray-600">Tour Requests</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">
                <Star className="h-6 w-6 text-orange-600" />
              </div>
              <div className="flex items-center gap-1">
                <span className="text-sm font-medium text-green-600">+0.2</span>
              </div>
            </div>
            <h3 className="font-primary text-2xl font-bold text-gray-900 mb-1">
              {mockAnalytics.overview.averageRating}
            </h3>
            <p className="font-body text-sm text-gray-600">Average Rating</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="traffic" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <BarChart3 className="h-4 w-4 mr-2" />
            Traffic
          </TabsTrigger>
          <TabsTrigger value="demographics" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <Users className="h-4 w-4 mr-2" />
            Demographics
          </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="conversion" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <Target className="h-4 w-4 mr-2" />
            Conversion
          </TabsTrigger>
          <TabsTrigger value="competitors" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
            <Award className="h-4 w-4 mr-2" />
            Competitors
          </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">
            {/* Engagement Trends */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Engagement Trends</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={mockAnalytics.monthlyData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line
                      type="monotone"
                      dataKey="views"
                      stroke="#3F5CEA"
                      strokeWidth={3}
                      name="Profile Views"
                    />
                    <Line
                      type="monotone"
                      dataKey="contacts"
                      stroke="#5B73F0"
                      strokeWidth={3}
                      name="Contact Clicks"
                    />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>

            {/* Top Search Terms */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">How People Find You</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {mockAnalytics.searchTerms.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 w-4">{index + 1}.</span>
                        <span className="font-body text-gray-900 flex-1">{term.term}</span>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="font-body text-sm text-gray-600">{term.count}</span>
                        <div className="w-16">
                          <Progress value={term.percentage} className="h-2" />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </AnimatedCard>
          </div>

          {/* Quick Stats */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <AnimatedCard className="bg-blue-50 border-blue-200">
              <CardContent className="p-4 text-center">
                <Heart className="h-8 w-8 text-blue-600 mx-auto mb-2" />
                <p className="font-primary text-xl font-bold text-blue-900">{mockAnalytics.overview.favorites}</p>
                <p className="font-body text-sm text-blue-700">Favorites</p>
              </CardContent>
            </AnimatedCard>

            <AnimatedCard className="bg-green-50 border-green-200">
              <CardContent className="p-4 text-center">
                <MessageSquare className="h-8 w-8 text-green-600 mx-auto mb-2" />
                <p className="font-primary text-xl font-bold text-green-900">{mockAnalytics.overview.reviewsReceived}</p>
                <p className="font-body text-sm text-green-700">Reviews Received</p>
              </CardContent>
            </AnimatedCard>

            <AnimatedCard className="bg-purple-50 border-purple-200">
              <CardContent className="p-4 text-center">
                <TrendingUp className="h-8 w-8 text-purple-600 mx-auto mb-2" />
                <p className="font-primary text-xl font-bold text-purple-900">
                  {((mockAnalytics.overview.contactClicks / mockAnalytics.overview.profileViews) * 100).toFixed(1)}%
                </p>
                <p className="font-body text-sm text-purple-700">Contact Rate</p>
              </CardContent>
            </AnimatedCard>

            <AnimatedCard className="bg-orange-50 border-orange-200">
              <CardContent className="p-4 text-center">
                <Zap className="h-8 w-8 text-orange-600 mx-auto mb-2" />
                <p className="font-primary text-xl font-bold text-orange-900">
                  {((mockAnalytics.overview.tourRequests / mockAnalytics.overview.contactClicks) * 100).toFixed(1)}%
                </p>
                <p className="font-body text-sm text-orange-700">Tour Conversion</p>
              </CardContent>
            </AnimatedCard>
          </div>
        </TabsContent>

        {/* Traffic Tab */}
        <TabsContent value="traffic" className="mt-8 space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Traffic Over Time */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Traffic Over Time</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <AreaChart data={mockAnalytics.monthlyData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Area
                      type="monotone"
                      dataKey="views"
                      stroke="#3F5CEA"
                      fill="#3F5CEA"
                      fillOpacity={0.1}
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>

            {/* Hourly Views */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Peak Viewing Hours</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <BarChart data={mockAnalytics.hourlyViews}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="hour" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="views" fill="#3F5CEA" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>
          </div>

          {/* Traffic Sources */}
          <AnimatedCard>
            <CardHeader>
              <CardTitle className="font-primary text-xl text-gray-900">Traffic Sources</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center p-6 bg-blue-50 rounded-lg">
                  <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                    <Eye className="h-6 w-6 text-blue-600" />
                  </div>
                  <p className="font-primary text-2xl font-bold text-blue-900">65%</p>
                  <p className="font-body text-sm text-blue-700">Direct Search</p>
                </div>

                <div className="text-center p-6 bg-green-50 rounded-lg">
                  <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                    <MapPin className="h-6 w-6 text-green-600" />
                  </div>
                  <p className="font-primary text-2xl font-bold text-green-900">25%</p>
                  <p className="font-body text-sm text-green-700">Location-based</p>
                </div>

                <div className="text-center p-6 bg-purple-50 rounded-lg">
                  <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                    <Users className="h-6 w-6 text-purple-600" />
                  </div>
                  <p className="font-primary text-2xl font-bold text-purple-900">10%</p>
                  <p className="font-body text-sm text-purple-700">Referrals</p>
                </div>
              </div>
            </CardContent>
          </AnimatedCard>
        </TabsContent>

        {/* Demographics Tab */}
        <TabsContent value="demographics" className="mt-8 space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Age Distribution */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Visitor Age Distribution</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {mockAnalytics.demographics.map((demo, index) => (
                    <div key={demo.age} className="space-y-2">
                      <div className="flex justify-between">
                        <span className="font-body text-sm font-medium text-gray-700">{demo.age} years</span>
                        <span className="font-body text-sm text-gray-600">{demo.percentage}% ({demo.count} visitors)</span>
                      </div>
                      <Progress value={demo.percentage} className="h-3" />
                    </div>
                  ))}
                </div>
              </CardContent>
            </AnimatedCard>

            {/* Geographic Distribution */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Geographic Reach</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
                    <span className="font-body font-medium text-gray-900">Springfield, IL</span>
                    <span className="font-body text-sm text-gray-600">45% (1,281 views)</span>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span className="font-body font-medium text-gray-900">Surrounding Areas</span>
                    <span className="font-body text-sm text-gray-600">35% (996 views)</span>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span className="font-body font-medium text-gray-900">Other Illinois Cities</span>
                    <span className="font-body text-sm text-gray-600">15% (427 views)</span>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <span className="font-body font-medium text-gray-900">Out of State</span>
                    <span className="font-body text-sm text-gray-600">5% (143 views)</span>
                  </div>
                </div>
              </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 Distribution */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Review Distribution</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {mockAnalytics.reviewAnalysis.distribution.map((review) => (
                    <div key={review.stars} className="flex items-center gap-3">
                      <div className="flex items-center gap-1 w-16">
                        <span className="font-body text-sm text-gray-700">{review.stars}</span>
                        <Star className="h-4 w-4 text-yellow-400 fill-yellow-400" />
                      </div>
                      <div className="flex-1">
                        <Progress value={review.percentage} className="h-3" />
                      </div>
                      <span className="font-body text-sm text-gray-600 w-12 text-right">
                        {review.count}
                      </span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </AnimatedCard>

            {/* Sentiment Analysis */}
            <AnimatedCard>
              <CardHeader>
                <CardTitle className="font-primary text-xl text-gray-900">Review Sentiment</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={250}>
                  <PieChart>
                    <Pie
                      data={mockAnalytics.reviewAnalysis.sentiment}
                      cx="50%"
                      cy="50%"
                      outerRadius={80}
                      dataKey="percentage"
                      label={({ type, percentage }) => `${type}: ${percentage}%`}
                    >
                      {mockAnalytics.reviewAnalysis.sentiment.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </AnimatedCard>
          </div>

          {/* Common Topics */}
          <AnimatedCard>
            <CardHeader>
              <CardTitle className="font-primary text-xl text-gray-900">Common Review Topics</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                {mockAnalytics.reviewAnalysis.commonTopics.map((topic, index) => (
                  <div key={topic.topic} className="text-center p-4 border border-gray-200 rounded-lg">
                    <Badge className={getSentimentColor(topic.sentiment)}>
                      {topic.sentiment}
                    </Badge>
                    <p className="font-body font-medium text-gray-900 mt-2">{topic.topic}</p>
                    <p className="font-body text-sm text-gray-600">{topic.mentions} mentions</p>
                  </div>
                ))}
              </div>
            </CardContent>
          </AnimatedCard>
        </TabsContent>

        {/* Conversion Tab */}
        <TabsContent value="conversion" className="mt-8 space-y-6">
          <AnimatedCard>
            <CardHeader>
              <CardTitle className="font-primary text-xl text-gray-900">Conversion Funnel</CardTitle>
              <p className="font-body text-gray-600">Track visitor journey from profile view to tour request</p>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {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.count.toLocaleString()} visitors
                        </span>
                        <span className="font-body text-sm font-medium text-[#3F5CEA]">
                          {stage.percentage}%
                        </span>
                      </div>
                    </div>
                    <Progress 
                      value={stage.percentage} 
                      className="h-4"
                      style={{ 
                        background: `linear-gradient(to right, ${stage.color} 0%, ${stage.color} ${stage.percentage}%, #e5e7eb ${stage.percentage}%, #e5e7eb 100%)`
                      }}
                    />
                    {index < mockAnalytics.conversionFunnel.length - 1 && (
                      <div className="text-center mt-2">
                        <span className="font-body text-xs text-gray-500">
                          {((mockAnalytics.conversionFunnel[index + 1].count / stage.count) * 100).toFixed(1)}% conversion
                        </span>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </CardContent>
          </AnimatedCard>
        </TabsContent>

        {/* Competitors Tab */}
        <TabsContent value="competitors" className="mt-8 space-y-6">
          <AnimatedCard>
            <CardHeader>
              <CardTitle className="font-primary text-xl text-gray-900">Competitor Analysis</CardTitle>
              <p className="font-body text-gray-600">See how you compare to other facilities in your area</p>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {/* Your facility */}
                <div className="flex items-center justify-between p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
                  <div className="flex items-center gap-4">
                    <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-body font-bold">
                      1
                    </div>
                    <div>
                      <h4 className="font-body font-semibold text-gray-900">
                        Sunrise Senior Living <Badge className="ml-2 bg-blue-100 text-blue-800">You</Badge>
                      </h4>
                      <div className="flex items-center gap-1 mt-1">
                        {Array.from({ length: 5 }, (_, i) => (
                          <Star
                            key={i}
                            className={`h-3 w-3 ${
                              i < Math.floor(mockAnalytics.overview.averageRating) ? "text-yellow-400 fill-yellow-400" : "text-gray-300"
                            }`}
                          />
                        ))}
                        <span className="font-body text-sm text-gray-600 ml-1">
                          ({mockAnalytics.overview.averageRating})
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="font-body text-sm text-gray-600">{mockAnalytics.overview.reviewsReceived} reviews</p>
                    <p className="font-body text-sm text-gray-600">{mockAnalytics.overview.profileViews.toLocaleString()} views</p>
                  </div>
                </div>

                {/* Competitors */}
                {mockAnalytics.competitorAnalysis.map((competitor, index) => (
                  <div key={competitor.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-gray-200 text-gray-700 rounded-full flex items-center justify-center font-body font-bold">
                        {index + 2}
                      </div>
                      <div>
                        <h4 className="font-body font-semibold text-gray-900">{competitor.name}</h4>
                        <div className="flex items-center gap-1 mt-1">
                          {Array.from({ length: 5 }, (_, i) => (
                            <Star
                              key={i}
                              className={`h-3 w-3 ${
                                i < Math.floor(competitor.avgRating) ? "text-yellow-400 fill-yellow-400" : "text-gray-300"
                              }`}
                            />
                          ))}
                          <span className="font-body text-sm text-gray-600 ml-1">
                            ({competitor.avgRating})
                          </span>
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="font-body text-sm text-gray-600">{competitor.reviewCount} reviews</p>
                      <p className="font-body text-sm text-gray-600">{competitor.views}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </AnimatedCard>
        </TabsContent>
      </Tabs>
    </div>
  )
}