'use client';

import { useEffect, useRef } from 'react';
import { useApi } from '@/hooks/useApi';
import { useAuthStore } from '@/store/authStore';
import { AppToast } from '@/app/components/AppToast';
import type { Toast } from 'primereact/toast';
import DashboardShell from '../components/DashboardShell';
import StatsCards from './StatsCards';
import RecentTrips from './RecentTrips';
import DriversWidget from './DriversWidget';
import AlertsWidget from './AlertsWidget';
import Link from 'next/link';

import 'primereact/resources/themes/lara-light-blue/theme.css';
import 'primereact/resources/primereact.min.css';

interface HomeData {
  todays_trips_count?: number;
  completed_trips_count_today?: number;
  active_drivers_count?: number;
  drivers_on_leave_count?: number;
  total_buses?: number;
  new_buses_this_month_count?: number;
  average_rating?: number;
  total_ratings_count?: number;
  monthly_revenue?: number;
  monthly_revenue_growth_percent?: number;
  total_subscribers?: number;
  total_subscribers_all?: number;
  new_subscribers_this_month_count?: number;
  active_paths?: number;
  wallet_balance?: number;
  pending_wallet_balance?: string;
  top_drivers?: Record<string, unknown>[];
  recent_trips?: Record<string, unknown>[];
  late_trips_alerts?: Record<string, unknown>[];
  maintenance_alerts?: Record<string, unknown>[];
  pending_captain_requests?: Record<string, unknown>[];
  recent_payments?: Record<string, unknown>[];
  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;
  };
  paths_stats?: {
    total_paths_count?: number;
    active_paths_count?: number;
    total_buses?: number;
    total_subscribers?: number;
  };
  packages_stats?: {
    total_plans?: number;
    total_subscribers_across_plans?: number;
    top_plan?: null | Record<string, unknown>;
  };
}

interface HomeApiResponse {
  key?: string;
  msg?: string;
  data?: HomeData | null;
}

const quickActions = [
  { icon: 'ri-bus-2-fill',       label: 'إضافة باص',  href: '/dashboard/buses',   color: '#1E3A8A', bg: '#EEF2FF' },
  { icon: 'ri-user-add-fill',    label: 'إضافة سائق', href: '/dashboard/drivers', color: '#059669', bg: '#DCFCE7' },
  { icon: 'ri-route-fill',       label: 'رحلة جديدة', href: '/dashboard/trips',   color: '#7C3AED', bg: '#EDE9FE' },
  { icon: 'ri-bar-chart-2-fill', label: 'التقارير',    href: '/dashboard/reports', color: '#D97706', bg: '#FEF3C7' },
];

function formatTodayArabic(): string {
  return new Date().toLocaleDateString('ar-EG', {
    weekday: 'long',
    day: 'numeric',
    month: 'long',
    year: 'numeric',
    numberingSystem: 'latn',
  });
}

export default function DashboardHome() {
  const toast       = useRef<Toast>(null);
  const token       = useAuthStore((s) => s.token);
  const hasHydrated = useAuthStore((s) => s._hasHydrated);
  const { loading, data, request, lastError } = useApi<HomeApiResponse>();

  useEffect(() => {
    if (!hasHydrated || !token) return;
    let cancelled = false;
    void (async () => {
      const res = await request('/home');
      if (cancelled) return;
      if (!res) {
        toast.current?.show({
          severity: 'error',
          summary: 'خطأ',
          detail: lastError.current || 'تعذر تحميل البيانات',
          life: 5000,
        });
      }
    })();
    return () => { cancelled = true; };
  }, [hasHydrated, token, request]);

  const d: HomeData = data?.data ?? {};
  const isLoading = loading || (hasHydrated && token != null && !data);

  return (
    <DashboardShell title="لوحة التحكم" subtitle={`مرحباً بك — ${formatTodayArabic()}`}>
      <AppToast ref={toast} />

      {/* Quick Actions */}
      <div className="flex items-center gap-3 mb-8">
        {quickActions.map((a, i) => (
          <Link key={i} href={a.href}>
            <button
              className="flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm cursor-pointer transition-all hover:opacity-90 whitespace-nowrap"
              style={{
                background: a.bg,
                color: a.color,
                fontFamily: '"IBM Plex Sans Arabic", sans-serif',
                border: `1px solid ${a.bg}`,
              }}
            >
              <i className={`${a.icon} text-base`}></i>
              {a.label}
            </button>
          </Link>
        ))}
      </div>

      {/* Stats */}
      <StatsCards loading={isLoading} data={d} />

      {/* Bottom Grid */}
      <div className="grid grid-cols-3 gap-6 mb-6">
        <div className="col-span-2">
          <RecentTrips loading={isLoading} data={d} />
        </div>
        <div className="space-y-5">
          <DriversWidget loading={isLoading} data={d} />
          <AlertsWidget loading={isLoading} data={d} />
        </div>
      </div>
    </DashboardShell>
  );
}