'use client';

import { Skeleton } from 'primereact/skeleton';

interface HomeData {
  total_buses?: number;
  new_buses_this_month_count?: number;
  active_drivers_count?: number;
  drivers_on_leave_count?: number;
  todays_trips_count?: number;
  completed_trips_count_today?: number;
  total_subscribers?: number;
  total_subscribers_all?: number;
  new_subscribers_this_month_count?: number;
  monthly_revenue?: number;
  monthly_revenue_growth_percent?: number;
  average_rating?: number;
  total_ratings_count?: number;
  active_paths?: number;
  wallet_balance?: number;
  trips_stats?: {
    today_total_count?: number;
    completed_today_count?: number;
    ongoing_count?: number;
    late_count?: number;
  };
  subscribers_stats?: {
    total_count?: number;
    active_count?: number;
    expired_count?: number;
  };
}

const statsMeta = [
  { label: 'إجمالي الباصات',      icon: 'ri-bus-2-fill',               color: '#1E3A8A', bg: '#EEF2FF' },
  { label: 'السائقون النشطون',    icon: 'ri-steering-2-fill',          color: '#059669', bg: '#DCFCE7' },
  { label: 'الرحلات اليوم',       icon: 'ri-route-fill',               color: '#7C3AED', bg: '#EDE9FE' },
  { label: 'المشتركون',           icon: 'ri-group-fill',               color: '#D97706', bg: '#FEF3C7' },
  { label: 'إيرادات الشهر',       icon: 'ri-money-dollar-circle-fill', color: '#0891B2', bg: '#E0F2FE' },
  { label: 'متوسط التقييم',       icon: 'ri-star-fill',                color: '#EA580C', bg: '#FFF7ED' },
];

function fmt(n: number) {
  return new Intl.NumberFormat('ar-SA').format(Math.round(n));
}

function buildRows(d: HomeData) {
  const buses       = d.total_buses ?? 0;
  const newBuses    = d.new_buses_this_month_count ?? 0;
  const activeDrv   = d.active_drivers_count ?? 0;
  const leaveDrv    = d.drivers_on_leave_count ?? 0;
  const todayTrips  = d.todays_trips_count ?? d.trips_stats?.today_total_count ?? 0;
  const doneTrips   = d.completed_trips_count_today ?? d.trips_stats?.completed_today_count ?? 0;
  const subs        = d.total_subscribers ?? d.subscribers_stats?.total_count ?? 0;
  const newSubs     = d.new_subscribers_this_month_count ?? 0;
  const rev         = d.monthly_revenue ?? 0;
  const growth      = d.monthly_revenue_growth_percent ?? 0;
  const rating      = d.average_rating ?? 0;
  const ratingCount = d.total_ratings_count ?? 0;
  const up          = growth >= 0;

  return [
    { value: fmt(buses),                sub: `+${fmt(newBuses)} هذا الشهر`,                  trendUp: true },
    { value: fmt(activeDrv),            sub: `${fmt(leaveDrv)} في إجازة`,                    trendUp: true },
    { value: fmt(todayTrips),           sub: `${fmt(doneTrips)} مكتملة`,                     trendUp: true },
    { value: fmt(subs),                 sub: `+${fmt(newSubs)} هذا الشهر`,                   trendUp: true },
    { value: `${fmt(rev)} ر`,           sub: `${up ? '+' : ''}${growth}% عن الشهر الماضي`,  trendUp: up   },
    { value: `${rating} ⭐`,            sub: `من ${fmt(ratingCount)} تقييم`,                 trendUp: true },
  ];
}

export default function StatsCards({ loading, data }: { loading: boolean; data: HomeData }) {
  if (loading) {
    return (
      <div className="grid grid-cols-3 gap-5 mb-8">
        {statsMeta.map((s, i) => (
          <div
            key={i}
            className="bg-white rounded-2xl p-5 flex items-start gap-4"
            style={{ border: '1px solid #F1F5F9', boxShadow: '0 1px 4px rgba(0,0,0,0.04)' }}
          >
            <Skeleton width="3rem" height="3rem" borderRadius="16px" className="flex-shrink-0" />
            <div className="flex-1 min-w-0 space-y-2">
              <Skeleton width="45%" height="1.75rem" borderRadius="8px" />
              <Skeleton width="65%" height="0.875rem" borderRadius="6px" />
              <Skeleton width="55%" height="0.75rem" borderRadius="6px" />
            </div>
          </div>
        ))}
      </div>
    );
  }

  const rows = buildRows(data);

  return (
    <div className="grid grid-cols-3 gap-5 mb-8">
      {statsMeta.map((s, i) => {
        const r = rows[i];
        const trendColor = r.trendUp ? '#059669' : '#DC2626';
        return (
          <div
            key={i}
            className="bg-white rounded-2xl p-5 flex items-start gap-4 cursor-pointer transition-all hover:shadow-md"
            style={{ border: '1px solid #F1F5F9', boxShadow: '0 1px 4px rgba(0,0,0,0.04)' }}
          >
            <div
              className="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0"
              style={{ background: s.bg }}
            >
              <i className={`${s.icon} text-2xl`} style={{ color: s.color }}></i>
            </div>
            <div className="flex-1 min-w-0">
              <p
                className="text-2xl font-black text-slate-900 leading-tight"
                style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                {r.value}
              </p>
              <p
                className="text-sm text-slate-500 mt-0.5"
                style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
              >
                {s.label}
              </p>
              <div className="flex items-center gap-1 mt-1">
                <i
                  className={`${r.trendUp ? 'ri-arrow-up-line' : 'ri-arrow-down-line'} text-xs`}
                  style={{ color: trendColor }}
                />
                <span
                  className="text-xs"
                  style={{ color: trendColor, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
                >
                  {r.sub}
                </span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}