'use client'

import type { EventManagementInsights } from '@/services/eventManagement'
import { formatNumber } from '@/helpers'

import { InsightStat } from './AdminEventDetailUi'

interface AdminEventOverviewTabProps {
  insights: EventManagementInsights | null
}

const number = formatNumber

const AdminEventOverviewTab = ({ insights }: AdminEventOverviewTabProps) => {
  if (!insights) {
    return <p className="p-4 text-sm text-secondary-30">اطلاعاتی یافت نشد.</p>
  }

  return (
    <div className="space-y-4">
      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <InsightStat
          label="قطعی‌شده"
          value={number(insights.registrations.confirmedCount)}
        />
        <InsightStat
          hint={`${number(insights.registrations.notCheckedInCount)} نفر در انتظار چک‌این`}
          label="حاضر شده"
          value={number(insights.registrations.checkedInCount)}
        />
        <InsightStat
          label="پرداخت ناقص"
          value={number(insights.registrations.pendingPaymentCount)}
        />
        <InsightStat
          label="فهرست انتظار"
          value={number(insights.registrations.waitlistCount)}
        />
        <InsightStat
          label="لغو‌شده"
          value={number(insights.registrations.cancelledCount)}
        />
        <InsightStat
          label="منقضی"
          value={number(insights.registrations.expiredCount)}
        />
        <InsightStat
          label="بازپرداخت‌شده"
          value={number(insights.registrations.refundedCount)}
        />
        <InsightStat
          label="غایب"
          value={number(insights.registrations.noShowCount)}
        />
        <InsightStat
          label="ظرفیت باقی‌مانده"
          value={number(insights.registrations.remainingCapacity)}
        />
      </div>

      {insights.traffic ? (
        <section>
          <h2 className="mb-2 text-sm font-bold text-secondary-20">آمار جذب</h2>
          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
            <InsightStat
              label="بازدید اینستاگرام"
              value={number(insights.traffic.instagram.uniqueVisits)}
            />
            <InsightStat
              label="رزرو اینستاگرام"
              value={number(insights.traffic.instagram.confirmedBookings)}
            />
            <InsightStat
              label="بازدید تلگرام"
              value={number(insights.traffic.telegram.uniqueVisits)}
            />
            <InsightStat
              label="رزرو تلگرام"
              value={number(insights.traffic.telegram.confirmedBookings)}
            />
          </div>
        </section>
      ) : null}
    </div>
  )
}

export default AdminEventOverviewTab