'use client'

import { useState } from 'react'
import {
  PeriodSelector,
  MetricCard,
  MetricCardHeader,
  MetricCardLabel,
  MetricCardContent,
  MetricCardValue,
  MetricCardDifferential,
  MetricCardSparkline,
  SentimentDistribution,
  PartoLineChart,
  EngagementRate,
} from '@parto-system-design/ui'
import { Users, MessageCircle, TrendingUp, Eye } from 'lucide-react'

export default function DashboardPage() {
  const [period, setPeriod] = useState('7d')

  return (
    <div className="w-full space-y-6 p-6">
      {/* هدر داشبورد */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">داشبورد سوشال لیسنینگ</h1>
          <p className="text-sm text-muted-foreground">خلاصه وضعیت برند در شبکه‌های اجتماعی</p>
        </div>
        <PeriodSelector value={period} onValueChange={setPeriod} />
      </div>

      {/* گرید متریک‌ها */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <MetricCard>
          <MetricCardHeader>
            <MetricCardLabel icon={<MessageCircle className="h-3.5 w-3.5" />}>کل ذکرها</MetricCardLabel>
          </MetricCardHeader>
          <MetricCardContent>
            <MetricCardValue>۱۲,۴۵۰</MetricCardValue>
            <MetricCardDifferential variant="positive">+۸.۳٪</MetricCardDifferential>
          </MetricCardContent>
          <MetricCardSparkline
            data={[
              { value: 1100, timestamp: '2024-01-01' },
              { value: 1250, timestamp: '2024-01-02' },
              { value: 1180, timestamp: '2024-01-03' },
              { value: 1320, timestamp: '2024-01-04' },
              { value: 1400, timestamp: '2024-01-05' },
              { value: 1350, timestamp: '2024-01-06' },
              { value: 1500, timestamp: '2024-01-07' },
            ]}
            dataKey="value"
          />
        </MetricCard>

        <MetricCard>
          <MetricCardHeader>
            <MetricCardLabel icon={<Users className="h-3.5 w-3.5" />}>اینفلوئنسرهای فعال</MetricCardLabel>
          </MetricCardHeader>
          <MetricCardContent>
            <MetricCardValue>۳۴۸</MetricCardValue>
            <MetricCardDifferential variant="positive">+۱۲.۱٪</MetricCardDifferential>
          </MetricCardContent>
          <MetricCardSparkline
            data={[
              { value: 280, timestamp: '2024-01-01' },
              { value: 295, timestamp: '2024-01-02' },
              { value: 310, timestamp: '2024-01-03' },
              { value: 305, timestamp: '2024-01-04' },
              { value: 320, timestamp: '2024-01-05' },
              { value: 335, timestamp: '2024-01-06' },
              { value: 348, timestamp: '2024-01-07' },
            ]}
            dataKey="value"
          />
        </MetricCard>

        <MetricCard>
          <MetricCardHeader>
            <MetricCardLabel icon={<TrendingUp className="h-3.5 w-3.5" />}>نرخ تعامل میانگین</MetricCardLabel>
          </MetricCardHeader>
          <MetricCardContent>
            <MetricCardValue>۴.۲٪</MetricCardValue>
            <MetricCardDifferential variant="negative">-۰.۳٪</MetricCardDifferential>
          </MetricCardContent>
          <MetricCardSparkline
            data={[
              { value: 4.8, timestamp: '2024-01-01' },
              { value: 4.5, timestamp: '2024-01-02' },
              { value: 4.6, timestamp: '2024-01-03' },
              { value: 4.3, timestamp: '2024-01-04' },
              { value: 4.1, timestamp: '2024-01-05' },
              { value: 4.4, timestamp: '2024-01-06' },
              { value: 4.2, timestamp: '2024-01-07' },
            ]}
            dataKey="value"
          />
        </MetricCard>

        <MetricCard>
          <MetricCardHeader>
            <MetricCardLabel icon={<Eye className="h-3.5 w-3.5" />}>بازدید کل</MetricCardLabel>
          </MetricCardHeader>
          <MetricCardContent>
            <MetricCardValue>۲.۴M</MetricCardValue>
            <MetricCardDifferential variant="positive">+۱۵.۷٪</MetricCardDifferential>
          </MetricCardContent>
          <MetricCardSparkline
            data={[
              { value: 1800000, timestamp: '2024-01-01' },
              { value: 1950000, timestamp: '2024-01-02' },
              { value: 2100000, timestamp: '2024-01-03' },
              { value: 2050000, timestamp: '2024-01-04' },
              { value: 2200000, timestamp: '2024-01-05' },
              { value: 2300000, timestamp: '2024-01-06' },
              { value: 2400000, timestamp: '2024-01-07' },
            ]}
            dataKey="value"
          />
        </MetricCard>
      </div>

      {/* ردیف نمودار و احساسات */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <div className="lg:col-span-2 rounded-lg border border-border bg-card p-4">
          <h3 className="mb-4 text-sm font-medium text-foreground">روند ذکرها در طول زمان</h3>
          <div className="h-[300px]">
            <PartoLineChart
              data={[
                {
                  id: 'ذکرها',
                  data: [
                    { x: 'فروردین', y: 1200 },
                    { x: 'اردیبهشت', y: 1450 },
                    { x: 'خرداد', y: 1380 },
                    { x: 'تیر', y: 1620 },
                    { x: 'مرداد', y: 1800 },
                    { x: 'شهریور', y: 1750 },
                    { x: 'مهر', y: 1920 },
                  ],
                },
              ]}
              margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
              xScale={{ type: 'point' }}
              yScale={{ type: 'linear', min: 'auto', max: 'auto' }}
              enableArea
              enablePoints={false}
              curve="monotoneX"
            />
          </div>
        </div>

        <div className="rounded-lg border border-border bg-card p-4">
          <h3 className="mb-4 text-sm font-medium text-foreground">توزیع احساسات</h3>
          <SentimentDistribution data={{ positive: 5200, negative: 1840, neutral: 5410 }} />
        </div>
      </div>

      {/* بخش نرخ تعامل */}
      <div className="rounded-lg border border-border bg-card p-4">
        <h3 className="mb-4 text-sm font-medium text-foreground">تحلیل نرخ تعامل</h3>
        <EngagementRate currentRate={0.0421} followers={85000} />
      </div>
    </div>
  )
}

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>کل ذکرها</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۱۲,۴۵۰</MetricCardValue>
      <MetricCardDifferential variant="positive">+۸.۳٪</MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={mentionsData} dataKey="value" />
  </MetricCard>

  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>احساسات مثبت</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۶۲٪</MetricCardValue>
      <MetricCardDifferential variant="positive">+۳.۱٪</MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={sentimentData} dataKey="value" />
  </MetricCard>

  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>نرخ تعامل</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۴.۲٪</MetricCardValue>
      <MetricCardDifferential variant="negative">-۰.۳٪</MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={engagementData} dataKey="value" />
  </MetricCard>

  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>دسترسی کل</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۲.۴M</MetricCardValue>
      <MetricCardDifferential variant="positive">+۱۵.۷٪</MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={reachData} dataKey="value" />
  </MetricCard>
</div>

const metrics = [
  {
    label: 'کل ذکرها',
    value: '۱۲,۴۵۰',
    differential: '+۸.۳٪',
    variant: 'positive' as const,
    data: mentionsData,
  },
  {
    label: 'احساسات مثبت',
    value: '۶۲٪',
    differential: '+۳.۱٪',
    variant: 'positive' as const,
    data: sentimentData,
  },
  {
    label: 'نرخ تعامل',
    value: '۴.۲٪',
    differential: '-۰.۳٪',
    variant: 'negative' as const,
    data: engagementData,
  },
  {
    label: 'دسترسی کل',
    value: '۲.۴M',
    differential: '+۱۵.۷٪',
    variant: 'positive' as const,
    data: reachData,
  },
]

;<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  {metrics.map((metric) => (
    <MetricCard key={metric.label}>
      <MetricCardHeader>
        <MetricCardLabel>{metric.label}</MetricCardLabel>
      </MetricCardHeader>
      <MetricCardContent>
        <MetricCardValue>{metric.value}</MetricCardValue>
        <MetricCardDifferential variant={metric.variant}>{metric.differential}</MetricCardDifferential>
      </MetricCardContent>
      <MetricCardSparkline data={metric.data} dataKey="value" />
    </MetricCard>
  ))}
</div>

<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
  {/* نمودار روند — دو ستون */}
  <div className="lg:col-span-2 rounded-lg border border-border bg-card p-4">
    <h3 className="mb-4 text-sm font-medium text-foreground">روند ذکرها در طول زمان</h3>
    <div className="h-[300px]">
      <PartoLineChart
        data={[
          {
            id: 'ذکرها',
            data: [
              { x: 'فروردین', y: 1200 },
              { x: 'اردیبهشت', y: 1450 },
              { x: 'خرداد', y: 1380 },
              { x: 'تیر', y: 1620 },
              { x: 'مرداد', y: 1800 },
              { x: 'شهریور', y: 1750 },
              { x: 'مهر', y: 1920 },
            ],
          },
        ]}
        margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', min: 'auto', max: 'auto' }}
        enableArea
        enablePoints={false}
        curve="monotoneX"
      />
    </div>
  </div>

  {/* توزیع احساسات — یک ستون */}
  <div className="rounded-lg border border-border bg-card p-4">
    <h3 className="mb-4 text-sm font-medium text-foreground">توزیع احساسات</h3>
    <SentimentDistribution data={{ positive: 5200, negative: 1840, neutral: 5410 }} />
  </div>
</div>

<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
  <div className="lg:col-span-2 rounded-lg border border-border bg-card p-4">{/* نمودار روند */}</div>

  <div className="rounded-lg border border-border bg-card p-4">
    <h3 className="mb-4 text-sm font-medium text-foreground">نرخ تعامل</h3>
    <EngagementRate currentRate={0.0421} followers={85000} />
  </div>
</div>

import { MetricCard, PartoLineChart, SentimentDistribution, Skeleton } from '@parto-system-design/ui'

function DashboardSkeleton() {
  return (
    <div className="w-full space-y-6 p-6">
      {/* اسکلت هدر */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="space-y-2">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="h-4 w-64" />
        </div>
        <Skeleton className="h-9 w-72" />
      </div>

      {/* اسکلت متریک‌ها */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <MetricCard key={i} isLoading />
        ))}
      </div>

      {/* اسکلت نمودار و احساسات */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <div className="lg:col-span-2 rounded-lg border border-border bg-card p-4">
          <Skeleton className="mb-4 h-4 w-32" />
          <PartoLineChart data={[]} isLoading />
        </div>
        <div className="rounded-lg border border-border bg-card p-4">
          <Skeleton className="mb-4 h-4 w-24" />
          <div className="space-y-3">
            <Skeleton className="h-6 w-full" />
            <Skeleton className="h-6 w-full" />
            <Skeleton className="h-6 w-full" />
          </div>
        </div>
      </div>
    </div>
  )
}

import { useQuery } from '@tanstack/react-query'

function SocialListeningDashboard() {
  const { data, isLoading } = useQuery({
    queryKey: ['dashboard', period],
    queryFn: () => fetchDashboardData(period),
  })

  if (isLoading) {
    return <DashboardSkeleton />
  }

  return (
    <div className="w-full space-y-6 p-6">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {data.metrics.map((metric) => (
          <MetricCard key={metric.label}>
            <MetricCardHeader>
              <MetricCardLabel>{metric.label}</MetricCardLabel>
            </MetricCardHeader>
            <MetricCardContent>
              <MetricCardValue>{metric.value.toLocaleString('fa-IR')}</MetricCardValue>
              <MetricCardDifferential variant={metric.trend > 0 ? 'positive' : 'negative'}>
                {metric.trend > 0 ? '+' : ''}
                {metric.trend.toLocaleString('fa-IR')}٪
              </MetricCardDifferential>
            </MetricCardContent>
            <MetricCardSparkline data={metric.history} dataKey="value" />
          </MetricCard>
        ))}
      </div>

      {/* بقیه محتوای داشبورد */}
    </div>
  )
}

const [period, setPeriod] = useState('7d')
const { data } = useQuery({
  queryKey: ['dashboard', period],
  queryFn: () => fetchDashboardData(period),
})

;<PeriodSelector value={period} onValueChange={setPeriod} />