import {
  PageContainer,
  PageBreadcrumbs,
  PageHeaderRoot,
  PageHeaderMeta,
  PageHeaderSummary,
  PageHeaderTitle,
  PageHeaderDescription,
  PageSection,
  PageSectionContent,
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
} from '@partodata/ui'

function AnalysisPage() {
  return (
    <>
      <PageBreadcrumbs>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="/influencers">اینفلوئنسرها</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <BreadcrumbPage>سارا احمدی</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </PageBreadcrumbs>

      <PageHeaderRoot size="large">
        <PageHeaderMeta>
          <PageHeaderSummary>
            <PageHeaderTitle>تحلیل پروفایل</PageHeaderTitle>
            <PageHeaderDescription>بررسی عملکرد و تحلیل محتوای سارا احمدی در شبکه‌های اجتماعی</PageHeaderDescription>
          </PageHeaderSummary>
        </PageHeaderMeta>
      </PageHeaderRoot>

      <PageContainer size="large">
        <PageSection orientation="horizontal">
          {/* ستون باریک (1fr): کارت پروفایل و پلتفرم‌ها */}
          <PageSectionContent>{/* کارت پروفایل و پلتفرم‌ها */}</PageSectionContent>
          {/* ستون پهن (2fr): بخش‌های تحلیل، احساسات، محتوا و معیارها */}
          <PageSectionContent>{/* بخش‌های تحلیل، احساسات، محتوا و معیارها */}</PageSectionContent>
        </PageSection>
      </PageContainer>
    </>
  )
}

import { ProfileCard, SocialPlatformBadge } from '@partodata/ui'
import { Users } from 'lucide-react'

function ProfileAside() {
  return (
    <div className="space-y-4">
      <ProfileCard
        name="سارا احمدی"
        username="sara.ahmadi"
        avatarSrc="/avatars/sara-ahmadi.jpg"
        followers={245000}
        followersIcon={<Users className="h-3.5 w-3.5" />}
        onCardClick={() => console.log('مشاهده پروفایل کامل')}
      />

      <div className="flex flex-wrap gap-2">
        <SocialPlatformBadge platform="instagram" variant="badge" showLabel />
        <SocialPlatformBadge platform="twitter" variant="badge" showLabel />
        <SocialPlatformBadge platform="youtube" variant="badge" showLabel />
      </div>
    </div>
  )
}

import { ProfileInfo } from '@partodata/ui'
;<ProfileInfo
  name="سارا احمدی"
  username="sara.ahmadi"
  avatarSrc="/avatars/sara-ahmadi.jpg"
  infoText="آخرین به‌روزرسانی: ۱۵ فروردین ۱۴۰۵"
/>

import { EngagementRate } from '@partodata/ui'
;<EngagementRate currentRate={0.0342} followers={245000} locale="fa" showCategoryCard={true} />

import { EngagementRateBar } from '@partodata/ui'
;<EngagementRateBar currentRate={0.0342} followers={245000} locale="fa" />

import { SentimentDistribution } from '@partodata/ui'
;<SentimentDistribution data={{ positive: 3420, negative: 890, neutral: 1540 }} variant="bars" showCounts />

import { SentimentBadge } from '@partodata/ui'
;<div className="flex flex-wrap gap-2">
  <SentimentBadge sentiment="positive" count={3420} />
  <SentimentBadge sentiment="negative" count={890} />
  <SentimentBadge sentiment="neutral" count={1540} />
  <SentimentBadge sentiment="mixed" count={230} />
</div>

import { PartoBarChart } from '@partodata/ui'

const sentimentByTopic = [
  { موضوع: 'کیفیت محصول', مثبت: 820, منفی: 120, خنثی: 340 },
  { موضوع: 'خدمات پشتیبانی', مثبت: 540, منفی: 380, خنثی: 210 },
  { موضوع: 'قیمت‌گذاری', مثبت: 310, منفی: 490, خنثی: 180 },
  { موضوع: 'تجربه کاربری', مثبت: 670, منفی: 95, خنثی: 420 },
]

;<div className="h-[400px]">
  <PartoBarChart
    data={sentimentByTopic}
    keys={['مثبت', 'منفی', 'خنثی']}
    indexBy="موضوع"
    margin={{ top: 20, right: 20, bottom: 50, left: 80 }}
    padding={0.3}
    groupMode="stacked"
  />
</div>

import { PartoPieChart } from '@partodata/ui'

const sentimentData = [
  { id: 'مثبت', label: 'مثبت', value: 3420 },
  { id: 'منفی', label: 'منفی', value: 890 },
  { id: 'خنثی', label: 'خنثی', value: 1540 },
]

;<div className="h-[300px]">
  <PartoPieChart
    data={sentimentData}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    activeOuterRadiusOffset={8}
    enableArcLinkLabels={false}
  />
</div>

import { PostCard, type PostData } from '@partodata/ui'

const recentPosts: PostData[] = [
  {
    id: 'p1',
    source: 'instagram',
    author: { name: 'Sara Ahmadi', handle: 'sara.ahmadi', avatarUrl: '/avatars/sara-ahmadi.jpg' },
    timestamp: new Date('2025-03-28'),
    body: {
      type: 'media-single',
      media: { url: '/posts/post-1.jpg', aspectRatio: 1, alt: 'رویداد فناوری تهران' },
      caption: 'امروز در رویداد فناوری تهران شرکت کردیم. تجربه فوق‌العاده‌ای بود! #تکنولوژی #تهران',
    },
    sentiment: 'positive',
    metrics: { likes: 18420, comments: 342, views: 52300, shares: 128 },
  },
  {
    id: 'p2',
    source: 'instagram',
    author: { name: 'Sara Ahmadi', handle: 'sara.ahmadi', avatarUrl: '/avatars/sara-ahmadi.jpg' },
    timestamp: new Date('2025-03-25'),
    body: {
      type: 'media-single',
      media: { url: '/posts/post-2.jpg', aspectRatio: 1, alt: 'معرفی محصول جدید' },
      caption: 'معرفی محصول جدید! خیلی هیجان‌زده هستم که بالاخره می‌توانم با شما به اشتراک بگذارم.',
    },
    sentiment: 'positive',
    metrics: { likes: 24100, comments: 567, views: 71200, shares: 245 },
  },
]

;<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {recentPosts.map((post) => (
    <PostCard key={post.id} post={post} view="comfortable" />
  ))}
</div>

import { CommentCard } from '@partodata/ui'
;<div className="space-y-3">
  <CommentCard
    text="محتوای خیلی خوبی بود. کیفیت تصاویر و نوع ارائه واقعاً حرفه‌ای است. منتظر محتوای بیشتر هستم."
    tags={[
      { title: 'رضایت از کیفیت', probability: 94, color: 'var(--sentiment-positive)' },
      { title: 'درخواست محتوای بیشتر', probability: 87, color: 'var(--sentiment-positive)' },
    ]}
    sentiment="positive"
  />

  <CommentCard
    text="متاسفانه اطلاعات ارائه‌شده دقیق نبود و منابع معتبری ذکر نشده بود. لطفاً بیشتر تحقیق کنید."
    tags={[
      { title: 'عدم دقت اطلاعات', probability: 91, color: 'var(--sentiment-negative)' },
      { title: 'نبود منبع معتبر', probability: 85, color: 'var(--sentiment-negative)' },
    ]}
    sentiment="negative"
  />

  <CommentCard
    text="موضوع جالبی بود ولی کاش بیشتر توضیح می‌دادید. نه خیلی خوب بود نه خیلی بد."
    tags={[{ title: 'نظر ترکیبی', probability: 78, color: 'var(--sentiment-neutral)' }]}
    sentiment="neutral"
  />
</div>

import {
  MetricCard,
  MetricCardHeader,
  MetricCardLabel,
  MetricCardContent,
  MetricCardValue,
  MetricCardDifferential,
  MetricCardSparkline,
} from '@partodata/ui'
import { Users, Heart, FileText } from 'lucide-react'

const followerData = [
  { value: 238000, timestamp: '1404-12-01' },
  { value: 239200, timestamp: '1404-12-08' },
  { value: 240100, timestamp: '1404-12-15' },
  { value: 241800, timestamp: '1404-12-22' },
  { value: 243500, timestamp: '1404-12-29' },
  { value: 245000, timestamp: '1405-01-07' },
]

const engagementData = [
  { value: 3.1, timestamp: '1404-12-01' },
  { value: 3.3, timestamp: '1404-12-08' },
  { value: 3.0, timestamp: '1404-12-15' },
  { value: 3.5, timestamp: '1404-12-22' },
  { value: 3.4, timestamp: '1404-12-29' },
  { value: 3.42, timestamp: '1405-01-07' },
]

const postFrequencyData = [
  { value: 12, timestamp: '1404-12-01' },
  { value: 15, timestamp: '1404-12-08' },
  { value: 10, timestamp: '1404-12-15' },
  { value: 14, timestamp: '1404-12-22' },
  { value: 18, timestamp: '1404-12-29' },
  { value: 16, timestamp: '1405-01-07' },
]

;<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel icon={<Users className="h-3.5 w-3.5" />}>تعداد دنبال‌کننده‌ها</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۲۴۵,۰۰۰</MetricCardValue>
      <MetricCardDifferential variant="positive">+۲.۹٪</MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={followerData} dataKey="value" />
  </MetricCard>

  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel icon={<Heart className="h-3.5 w-3.5" />}>نرخ تعامل</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۳.۴۲٪</MetricCardValue>
      <MetricCardDifferential variant="positive">+۰.۱۲٪</MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={engagementData} dataKey="value" />
  </MetricCard>

  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel icon={<FileText className="h-3.5 w-3.5" />}>تعداد پست ماهانه</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۱۶</MetricCardValue>
      <MetricCardDifferential variant="negative">-۱.۲٪</MetricCardDifferential>
    </MetricCardContent>
    <MetricCardSparkline data={postFrequencyData} dataKey="value" />
  </MetricCard>
</div>

import { StatDisplay, TrendIndicator } from '@partodata/ui'
import { Eye, MessageCircle, Share2 } from 'lucide-react'
;<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
  <StatDisplay value={245000} label="دنبال‌کننده‌ها" icon={<Users />} trend={<TrendIndicator value={2.9} />} />

  <StatDisplay value={52300} label="میانگین بازدید" icon={<Eye />} trend={<TrendIndicator value={5.2} />} />

  <StatDisplay value={342} label="میانگین نظرات" icon={<MessageCircle />} trend={<TrendIndicator value={-1.3} />} />

  <StatDisplay value={128} label="میانگین اشتراک‌گذاری" icon={<Share2 />} trend={<TrendIndicator value={8.7} />} />
</div>

import {
  PageContainer,
  PageHeaderRoot,
  PageHeaderMeta,
  PageHeaderSummary,
  PageSection,
  PageSectionContent,
  Skeleton,
  EngagementRate,
  SentimentDistribution,
  MetricCard,
  MetricCardHeader,
  MetricCardLabel,
  MetricCardContent,
  StatDisplay,
} from '@partodata/ui'

function AnalysisPageSkeleton() {
  return (
    <>
      <PageHeaderRoot size="large">
        <PageHeaderMeta>
          <PageHeaderSummary>
            <Skeleton className="h-4 w-32" />
            <Skeleton className="h-8 w-48 mt-2" />
            <Skeleton className="h-4 w-64 mt-1" />
          </PageHeaderSummary>
        </PageHeaderMeta>
      </PageHeaderRoot>

      <PageContainer size="large">
        <PageSection orientation="horizontal">
          <PageSectionContent>
            {/* اسکلتون پروفایل */}
            <div className="space-y-4">
              <div className="flex flex-col items-center gap-3 rounded-lg border border-border p-6">
                <Skeleton shape="circle" size="lg" />
                <Skeleton className="h-5 w-32" />
                <Skeleton className="h-4 w-24" />
                <Skeleton className="h-4 w-20" />
              </div>
              <div className="flex gap-2">
                <Skeleton className="h-6 w-24 rounded-full" />
                <Skeleton className="h-6 w-20 rounded-full" />
                <Skeleton className="h-6 w-22 rounded-full" />
              </div>
            </div>
          </PageSectionContent>

          <PageSectionContent>
            {/* اسکلتون نرخ تعامل */}
            <EngagementRate currentRate={0} followers={0} isLoading />

            {/* اسکلتون احساسات */}
            <div className="mt-6">
              <SentimentDistribution data={{ positive: 0, negative: 0, neutral: 0 }} isLoading />
            </div>

            {/* اسکلتون معیارها */}
            <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {Array.from({ length: 3 }).map((_, i) => (
                <MetricCard key={i}>
                  <MetricCardHeader>
                    <MetricCardLabel>
                      <Skeleton className="h-4 w-24" />
                    </MetricCardLabel>
                  </MetricCardHeader>
                  <MetricCardContent>
                    <Skeleton className="h-8 w-20" />
                  </MetricCardContent>
                </MetricCard>
              ))}
            </div>

            {/* اسکلتون آمار */}
            <div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
              {Array.from({ length: 4 }).map((_, i) => (
                <StatDisplay key={i} value={0} label="" isLoading />
              ))}
            </div>

            {/* اسکلتون پست‌ها */}
            <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="rounded-lg border border-border overflow-hidden">
                  <Skeleton className="h-64 w-full" />
                  <div className="p-3 space-y-2">
                    <div className="flex items-center gap-2">
                      <Skeleton shape="circle" size="sm" />
                      <Skeleton className="h-4 w-24" />
                    </div>
                    <Skeleton className="h-3 w-full" />
                    <Skeleton className="h-3 w-3/4" />
                  </div>
                </div>
              ))}
            </div>
          </PageSectionContent>
        </PageSection>
      </PageContainer>
    </>
  )
}

// ❌ غلط — در چیدمان RTL فاصله و خط جداکننده به سمت اشتباه می‌روند
<div className="ml-4 border-l pl-6 text-left">{/* بخش‌های تحلیل */}</div>

// ✅ درست — Logical Properties در RTL و LTR هر دو درست عمل می‌کنند
<div className="ms-4 border-s ps-6 text-start">{/* بخش‌های تحلیل */}</div>

// ❌ غلط — فقط در یکی از دو تم درست دیده می‌شود
<CommentCard
  text="کیفیت بسته‌بندی محصول عالی بود."
  tags={[{ title: 'رضایت از کیفیت', probability: 94, color: '#22c55e' }]}
  sentiment="positive"
/>

// ✅ درست — توکن معنایی در هر دو تم مقدار صحیح خودش را دارد
<CommentCard
  text="کیفیت بسته‌بندی محصول عالی بود."
  tags={[{ title: 'رضایت از کیفیت', probability: 94, color: 'var(--sentiment-positive)' }]}
  sentiment="positive"
/>

// ❌ غلط — کل داده به کلاینت منتقل می‌شود
const all = await fetchComments(influencerId) // ده‌ها هزار ردیف
const page = all.slice((currentPage - 1) * 20, currentPage * 20)

// ✅ درست — DataTable سرور-محور صفحه‌بندی می‌شود
<DataTable
  columns={columns}
  data={pageData} // فقط ردیف‌های صفحه جاری
  isLoading={isFetching}
  pagination={{
    currentPage,
    totalPages,
    onPageChange: setCurrentPage,
    pageSize,
    onPageSizeChange: setPageSize,
    totalRows, // تعداد کل ردیف‌ها طبق گزارش سرور
  }}
/>

// ❌ غلط — نمودار با ارتفاع صفر رندر می‌شود و بدون هیچ خطایی خالی می‌ماند
<div>
  <PartoBarChart data={sentimentByTopic} keys={['مثبت', 'منفی', 'خنثی']} indexBy="موضوع" />
</div>

// ✅ درست — والد ارتفاع صریح دارد
<div className="h-[400px]">
  <PartoBarChart data={sentimentByTopic} keys={['مثبت', 'منفی', 'خنثی']} indexBy="موضوع" />
</div>

// ❌ غلط — لحن غیررسمی و ارقام لاتین
<PageHeaderDescription>عملکرد سارا رو ببین — 245000 دنبال‌کننده</PageHeaderDescription>

// ✅ درست — فارسی رسمی و ارقام فارسی هماهنگ با بقیه صفحه
<PageHeaderDescription>بررسی عملکرد و تحلیل محتوای سارا احمدی — ۲۴۵,۰۰۰ دنبال‌کننده</PageHeaderDescription>