"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import {
  BarChart3,
  ArrowUpRight,
  ArrowDownRight,
  Users,
  CreditCard,
  Activity,
  Bell,
  Search,
  Settings,
  Menu,
} from "lucide-react"

export function DashboardExample() {
  const { selectedMaterial, getThemeAwareClass } = useMaterial()
  const materialClass = selectedMaterial ? getThemeAwareClass(selectedMaterial) : ""

  return (
    <div className="w-full h-full bg-background-secondary overflow-auto flex flex-col">
      {/* Header */}
      <div className="flex justify-between items-center mb-6 p-4">
        <div className="flex items-center gap-2">
          <BarChart3 className="h-6 w-6 text-primary" />
          <h1 className="text-xl font-semibold">Analytics Dashboard</h1>
        </div>
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon" className="rounded-full">
            <Search className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="rounded-full">
            <Bell className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="rounded-full">
            <Settings className="h-4 w-4" />
          </Button>
          <Avatar className="h-8 w-8">
            <AvatarImage src="/diverse-avatars.png" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
          <Button variant="ghost" size="icon" className="md:hidden">
            <Menu className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <Card className={cn(materialClass)}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <CreditCard className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">$45,231.89</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-500 flex items-center">
                +20.1% <ArrowUpRight className="h-3 w-3 ml-1" />
              </span>
              from last month
            </p>
          </CardContent>
        </Card>
        <Card className={cn(materialClass)}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">+2,350</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-500 flex items-center">
                +18.2% <ArrowUpRight className="h-3 w-3 ml-1" />
              </span>
              from last month
            </p>
          </CardContent>
        </Card>
        <Card className={cn(materialClass)}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Active Users</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">+12,234</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-500 flex items-center">
                +4.3% <ArrowUpRight className="h-3 w-3 ml-1" />
              </span>
              from last month
            </p>
          </CardContent>
        </Card>
        <Card className={cn(materialClass)}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Bounce Rate</CardTitle>
            <ArrowDownRight className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">-12.5%</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-red-500 flex items-center">
                +1.8% <ArrowUpRight className="h-3 w-3 ml-1" />
              </span>
              from last month
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Chart and Activity */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className={cn("col-span-2", materialClass)}>
          <CardHeader>
            <CardTitle>Overview</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-[200px] w-full">
              {/* Chart Mockup */}
              <div className="w-full h-full flex items-end justify-between gap-2 pt-6 relative">
                <div className="absolute inset-0 flex items-center justify-center opacity-10">
                  <BarChart3 className="h-32 w-32 text-primary" />
                </div>
                {Array.from({ length: 12 }).map((_, i) => (
                  <div
                    key={i}
                    className="bg-primary h-[20%] w-full rounded-t-sm opacity-80"
                    style={{
                      height: `${20 + Math.random() * 60}%`,
                      opacity: i === 8 ? 1 : 0.6,
                    }}
                  />
                ))}
              </div>
              <div className="flex justify-between mt-2 text-xs text-muted-foreground">
                <span>Jan</span>
                <span>Feb</span>
                <span>Mar</span>
                <span>Apr</span>
                <span>May</span>
                <span>Jun</span>
                <span>Jul</span>
                <span>Aug</span>
                <span>Sep</span>
                <span>Oct</span>
                <span>Nov</span>
                <span>Dec</span>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className={cn(materialClass)}>
          <CardHeader>
            <CardTitle>Recent Activity</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {[
                { user: "John Doe", action: "purchased Premium Plan", time: "2 min ago" },
                { user: "Sarah Smith", action: "created a new post", time: "1 hour ago" },
                { user: "Alex Johnson", action: "commented on your post", time: "3 hours ago" },
                { user: "Lisa Wang", action: "subscribed to newsletter", time: "5 hours ago" },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-3">
                  <Avatar className="h-8 w-8">
                    <AvatarFallback>
                      {item.user
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1 space-y-1">
                    <p className="text-sm">
                      <span className="font-medium">{item.user}</span> {item.action}
                    </p>
                    <p className="text-xs text-muted-foreground">{item.time}</p>
                  </div>
                  {i === 0 && <Badge>New</Badge>}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}