'use client'

import { useState } from 'react'
import {
  PeriodSelector,
  MetricCard,
  MetricCardHeader,
  MetricCardLabel,
  MetricCardContent,
  MetricCardValue,
  MetricCardDifferential,
  MetricCardSparkline,
  SentimentDistribution,
  PartoLineChart,
  EngagementRate,
} from '@partodata/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: 1704067200 },
              { value: 1250, timestamp: 1704153600 },
              { value: 1180, timestamp: 1704240000 },
              { value: 1320, timestamp: 1704326400 },
              { value: 1400, timestamp: 1704412800 },
              { value: 1350, timestamp: 1704499200 },
              { value: 1500, timestamp: 1704585600 },
            ]}
            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: 1704067200 },
              { value: 295, timestamp: 1704153600 },
              { value: 310, timestamp: 1704240000 },
              { value: 305, timestamp: 1704326400 },
              { value: 320, timestamp: 1704412800 },
              { value: 335, timestamp: 1704499200 },
              { value: 348, timestamp: 1704585600 },
            ]}
            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: 1704067200 },
              { value: 4.5, timestamp: 1704153600 },
              { value: 4.6, timestamp: 1704240000 },
              { value: 4.3, timestamp: 1704326400 },
              { value: 4.1, timestamp: 1704412800 },
              { value: 4.4, timestamp: 1704499200 },
              { value: 4.2, timestamp: 1704585600 },
            ]}
            dataKey="value"
          />
        </MetricCard>

        <MetricCard>
          <MetricCardHeader>
            <MetricCardLabel icon={<Eye className="h-3.5 w-3.5" />}>بازدید کل</MetricCardLabel>
          </MetricCardHeader>
          <MetricCardContent>
            <MetricCardValue>۲.۴ میلیون</MetricCardValue>
            <MetricCardDifferential variant="positive">+۱۵.۷٪</MetricCardDifferential>
          </MetricCardContent>
          <MetricCardSparkline
            data={[
              { value: 1800000, timestamp: 1704067200 },
              { value: 1950000, timestamp: 1704153600 },
              { value: 2100000, timestamp: 1704240000 },
              { value: 2050000, timestamp: 1704326400 },
              { value: 2200000, timestamp: 1704412800 },
              { value: 2300000, timestamp: 1704499200 },
              { value: 2400000, timestamp: 1704585600 },
            ]}
            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>۲.۴ میلیون</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: '۲.۴ میلیون',
    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 '@partodata/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('en-US')}</MetricCardValue>
              <MetricCardDifferential variant={metric.trend > 0 ? 'positive' : 'negative'}>
                {metric.trend > 0 ? '+' : ''}
                {metric.trend.toLocaleString('en-US')}٪
              </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} />

// ❌ نادرست — mr-2 در صفحه RTL آیکون را به سمت اشتباه می‌چسباند
<h3 className="mb-4 text-left text-sm font-medium text-foreground">
  <TrendingUp className="mr-2 inline h-4 w-4" />
  روند منشن‌ها در طول زمان
</h3>

// ✅ درست — معادل‌های منطقی در هر دو جهت صفحه درست کار می‌کنند
<h3 className="mb-4 text-start text-sm font-medium text-foreground">
  <TrendingUp className="me-2 inline h-4 w-4" />
  روند منشن‌ها در طول زمان
</h3>

// ❌ نادرست — رنگ ثابت Tailwind خارج از سیستم توکن
<span className="text-green-500">+۸.۳٪</span>

// ✅ درست — variant توکن معنایی مناسب را اعمال می‌کند
<MetricCardDifferential variant="positive">+۸.۳٪</MetricCardDifferential>

// ✅ درست — برای عناصر سفارشی، توکن احساسات
<span className="text-[var(--sentiment-positive-text)]">+۸.۳٪</span>

// ❌ نادرست — کارت روشنِ ثابت؛ در تم تیره پیش‌فرض می‌شکند
<div className="rounded-lg border border-gray-200 bg-white p-4">
  <h3 className="text-gray-900">توزیع احساسات</h3>
</div>

// ✅ درست — توکن‌های سطح در هر دو تم رنگ صحیح می‌گیرند
<div className="rounded-lg border border-border bg-card p-4">
  <h3 className="text-foreground">توزیع احساسات</h3>
</div>

import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { DataTable, type DataTableColumn } from '@partodata/ui'

interface Mention {
  author: string
  text: string
  platform: string
}

const columns: DataTableColumn<Mention>[] = [
  { id: 'author', header: 'نویسنده', cell: (row) => row.author },
  { id: 'text', header: 'متن منشن', cell: (row) => row.text },
  { id: 'platform', header: 'پلتفرم', cell: (row) => row.platform },
]

function MentionsTable({ period }: { period: string }) {
  const [page, setPage] = useState(1)
  const { data, isLoading } = useQuery({
    queryKey: ['mentions', period, page],
    queryFn: () => fetchMentions({ period, page, pageSize: 20 }),
  })

  return (
    <DataTable
      columns={columns}
      data={data?.rows ?? []}
      isLoading={isLoading}
      pagination={{
        currentPage: page,
        totalPages: data?.totalPages ?? 1,
        onPageChange: setPage,
        pageSize: 20,
        totalRows: data?.totalRows,
      }}
    />
  )
}

import { formatNumber, formatLargeNumber } from '@partodata/ui'

// ❌ نادرست — لحن محاوره‌ای، عددِ بدون جداکننده، و تبدیل رقم در کد
<p>هنوز دیتایی نیومده، یه کم صبر کن!</p>
<MetricCardValue>12450</MetricCardValue>
<MetricCardValue>{(12450).toLocaleString('fa-IR')}</MetricCardValue>

// ✅ درست — فارسی رسمی، جداکننده از formatNumber، و ارقام از فونت
<p>داده‌ای برای این بازه زمانی ثبت نشده است.</p>
<MetricCardValue>{formatNumber(12450)}</MetricCardValue>

// ✅ مقدار مختصر، با پسوند فارسی نه پسوند لاتین
<MetricCardValue>{formatLargeNumber(12450, 'fa')}</MetricCardValue>