import { ConfigDrawer } from '@/components/config-drawer'
import { Header } from '@/components/layout/header'
import { Main } from '@/components/layout/main'
import { ProfileDropdown } from '@/components/profile-dropdown'
import { Search } from '@/components/search'
import { ThemeSwitch } from '@/components/theme-switch'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Video,
  Users,
  Eye,
  TrendingUp,
  Play,
  Clock,
  CheckCircle,
} from 'lucide-react'

export function Dashboard() {
  return (
    <>
      <Header>
        <Search className='me-auto' />
        <ThemeSwitch />
        <ConfigDrawer />
        <ProfileDropdown />
      </Header>

      <Main>
        <div className='mb-6 flex items-center justify-between'>
          <div>
            <h2 className='text-2xl font-bold tracking-tight'>داشبورد</h2>
            <p className='text-muted-foreground'>
              به پنل ادمین تلنت‌یار خوش آمدید.
            </p>
          </div>
        </div>

        {/* کارت‌های آماری */}
        <div className='mb-6 grid gap-4 md:grid-cols-2 lg:grid-cols-4'>
          <Card>
            <CardHeader className='flex flex-row items-center justify-between pb-2'>
              <CardTitle className='text-sm font-medium'>کل ویدیوها</CardTitle>
              <Video className='h-4 w-4 text-muted-foreground' />
            </CardHeader>
            <CardContent>
              <div className='text-2xl font-bold'>2,847</div>
              <p className='mt-1 text-xs text-muted-foreground'>+156 این ماه</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className='flex flex-row items-center justify-between pb-2'>
              <CardTitle className='text-sm font-medium'>کل بازدیدها</CardTitle>
              <Eye className='h-4 w-4 text-muted-foreground' />
            </CardHeader>
            <CardContent>
              <div className='text-2xl font-bold'>45,231</div>
              <p className='mt-1 text-xs text-muted-foreground'>
                +18% نسبت به ماه قبل
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className='flex flex-row items-center justify-between pb-2'>
              <CardTitle className='text-sm font-medium'>
                ورزشکاران فعال
              </CardTitle>
              <Users className='h-4 w-4 text-muted-foreground' />
            </CardHeader>
            <CardContent>
              <div className='text-2xl font-bold'>1,234</div>
              <p className='mt-1 text-xs text-muted-foreground'>
                892 نفر این ماه فعال بودند
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className='flex flex-row items-center justify-between pb-2'>
              <CardTitle className='text-sm font-medium'>
                ویدیوهای امروز
              </CardTitle>
              <TrendingUp className='h-4 w-4 text-muted-foreground' />
            </CardHeader>
            <CardContent>
              <div className='text-2xl font-bold'>23</div>
              <p className='mt-1 text-xs text-muted-foreground'>
                ویدیوی جدید آپلود شده
              </p>
            </CardContent>
          </Card>
        </div>

        <div className='grid gap-6 md:grid-cols-2'>
          {/* ویدیوهای اخیر */}
          <Card>
            <CardHeader>
              <CardTitle className='flex items-center gap-2'>
                <Play className='h-5 w-5' />
                ویدیوهای اخیر
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className='space-y-4'>
                {[
                  {
                    user: 'علی احمدی',
                    sport: 'فوتبال',
                    time: '5 دقیقه پیش',
                    views: 124,
                    status: 'pending',
                  },
                  {
                    user: 'مریم رضایی',
                    sport: 'والیبال',
                    time: '15 دقیقه پیش',
                    views: 89,
                    status: 'approved',
                  },
                  {
                    user: 'حسین محمدی',
                    sport: 'بسکتبال',
                    time: '30 دقیقه پیش',
                    views: 256,
                    status: 'approved',
                  },
                  {
                    user: 'فاطمه کریمی',
                    sport: 'تنیس',
                    time: '1 ساعت پیش',
                    views: 178,
                    status: 'pending',
                  },
                  {
                    user: 'رضا نوری',
                    sport: 'شنا',
                    time: '2 ساعت پیش',
                    views: 312,
                    status: 'approved',
                  },
                ].map((video, i) => (
                  <div
                    key={i}
                    className='flex items-center justify-between border-b pb-3 last:border-0 last:pb-0'
                  >
                    <div className='flex-1'>
                      <div className='flex items-center gap-2'>
                        <p className='font-medium'>{video.user}</p>
                        {video.status === 'approved' ? (
                          <CheckCircle className='h-4 w-4 text-green-500' />
                        ) : (
                          <Clock className='h-4 w-4 text-yellow-500' />
                        )}
                      </div>
                      <p className='text-sm text-muted-foreground'>
                        {video.sport}
                      </p>
                    </div>
                    <div className='text-left'>
                      <p className='flex items-center gap-1 text-sm font-medium'>
                        <Eye className='h-3 w-3' />
                        {video.views}
                      </p>
                      <span className='text-xs text-muted-foreground'>
                        {video.time}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* ویدیوهای در انتظار تأیید */}
          <Card>
            <CardHeader>
              <CardTitle className='flex items-center gap-2'>
                <Clock className='h-5 w-5' />
                در انتظار بررسی
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className='space-y-4'>
                {[
                  {
                    user: 'محمد حسینی',
                    sport: 'کاراته',
                    time: '10 دقیقه پیش',
                    duration: '2:34',
                  },
                  {
                    user: 'زهرا اکبری',
                    sport: 'ژیمناستیک',
                    time: '25 دقیقه پیش',
                    duration: '3:12',
                  },
                  {
                    user: 'امیر رستمی',
                    sport: 'دوومیدانی',
                    time: '45 دقیقه پیش',
                    duration: '1:45',
                  },
                  {
                    user: 'سارا محمودی',
                    sport: 'بدمینتون',
                    time: '1 ساعت پیش',
                    duration: '2:58',
                  },
                  {
                    user: 'پویا کریمی',
                    sport: 'کشتی',
                    time: '2 ساعت پیش',
                    duration: '4:21',
                  },
                ].map((video, i) => (
                  <div
                    key={i}
                    className='flex items-center justify-between border-b pb-3 last:border-0 last:pb-0'
                  >
                    <div className='flex-1'>
                      <p className='font-medium'>{video.user}</p>
                      <p className='text-sm text-muted-foreground'>
                        {video.sport}
                      </p>
                    </div>
                    <div className='text-left'>
                      <p className='text-sm font-medium'>{video.duration}</p>
                      <span className='text-xs text-muted-foreground'>
                        {video.time}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* محبوب‌ترین رشته‌ها */}
        <Card className='mt-6'>
          <CardHeader>
            <CardTitle>محبوب‌ترین رشته‌های ورزشی</CardTitle>
          </CardHeader>
          <CardContent>
            <div className='grid gap-4 md:grid-cols-3 lg:grid-cols-5'>
              {[
                { sport: 'فوتبال', count: 487, color: 'bg-secondary' },
                { sport: 'والیبال', count: 356, color: 'bg-secondary' },
                { sport: 'بسکتبال', count: 298, color: 'bg-secondary' },
                { sport: 'کاراته', count: 234, color: 'bg-secondary' },
                { sport: 'شنا', count: 189, color: 'bg-secondary' },
              ].map((item, i) => (
                <div
                  key={i}
                  className='flex flex-col items-center gap-2 rounded-lg border p-4'
                >
                  <div
                    className={`h-12 w-12 rounded-full ${item.color} flex items-center justify-center font-bold`}
                  >
                    {item.count}
                  </div>
                  <p className='font-medium'>{item.sport}</p>
                  <p className='text-xs text-muted-foreground'>ویدیو</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </Main>
    </>
  )
}