import SessionStats from '@/modules/sessionModule/list/sections/SessionStats';
import { SessionReservationsTabs } from '@/modules/sessionModule/list/sections/SessionReservationsTabs';
import { getSessionStatsAction, getSessionsAction } from '@/modules/sessionModule/list/actions/session.action';
import type { SessionStats as SessionStatsType } from '@/services/session/sessionService';
import type { Session } from '@/types/session/session';
import type { PaginationInfo } from '@/types/api/api_response';
import { cookies } from 'next/headers';
import Link from 'next/link';
import { decrypt, isExpired } from '@/lib/session';
import { resolveTenantBranding } from '@/lib/tenantPresentation.server';

export const SessionsModule = async () => {
  const branding = await resolveTenantBranding();
  const brandColor = branding.primaryColor || '#800000';

  const cookieStore = await cookies();
  const accessToken = cookieStore.get('access_token')?.value;
  
  if (!accessToken) {
    return <NoUserSessions brandColor={brandColor} />
  }
  
  const claims = await decrypt(accessToken);
  const userId = (claims?.user_id || claims?.sub) as string | undefined;

  let stats: SessionStatsType = { total: 0, completed: 0, totalEnergy: 0, totalSpent: 0, averageCost: 0 };

  try {
    const statsRes = await getSessionStatsAction({ status: 'Started,Ended', user_id: userId }, accessToken);
    if (statsRes) {
      stats = statsRes as SessionStatsType;
    }
  } catch (_) {
    // keep default zero stats
  }

  let initialSessions: Session[] = [];
  let initialPagination: PaginationInfo | undefined = undefined;
  try {
    const listRes = await getSessionsAction({ paginate_limit: 10, sort_order: 'desc', sort_by: 'updated_at', status: 'Started,Ended', user_id: userId }, accessToken);
    if (listRes && listRes.data && listRes.pagination) {
      initialSessions = Array.isArray(listRes.data) ? listRes.data : [];
      initialPagination = listRes.pagination;
    }
  } catch (_) {
    // keep empty initial data; client hook will fetch when needed
  }

  return (
    <div>
      {/* Header Section */}
      <div className="mb-4 lg:flex lg:justify-center">
        <div className="w-full lg:max-w-xl">
          <h1 className="mb-2 text-2xl font-bold text-gray-800 dark:text-white lg:text-center">
            Charging Sessions
          </h1>
          <p className="mb-4 text-gray-600 dark:text-gray-300 lg:text-center">
            View and manage your charging session history
          </p>
        </div>
      </div>
      <SessionStats stats={stats} />
      <div className="mt-6 mb-4 text-sm text-gray-600 dark:text-gray-300">
        Total {stats.total} sessions
      </div>
      {/* Sessions */}
      <SessionReservationsTabs
        initialSessions={initialSessions}
        initialSessionPagination={initialPagination}
        sessionParams={{ paginate_limit: 10, sort_order: 'desc', sort_by: 'updated_at', status: 'Started,Ended', user_id: userId }}
      />
    </div>
  );
};


const NoUserSessions = ({ brandColor }: { brandColor: string }) => {
  return (
    <div>
      {/* Header Section */}
      <div className="mb-4 lg:flex lg:justify-center">
        <div className="w-full lg:max-w-xl">
          <h1 className="mb-2 text-2xl font-bold text-gray-800 dark:text-white lg:text-center">
            Charging Sessions
          </h1>
          <p className="mb-4 text-gray-600 dark:text-gray-300 lg:text-center">
            View and manage your charging session history
          </p>
        </div>
      </div>
      {/* Not Authenticated Callout */}
      <div className="lg:flex lg:justify-center">
        <div className="w-full lg:max-w-xl rounded-lg shadow-sm bg-white dark:bg-gray-900 overflow-hidden">
          <div className="p-6" style={{ borderLeft: `4px solid ${brandColor}` }}>
            <div className="space-y-2">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Sign in required</h2>
              <p className="text-gray-600 dark:text-gray-300">Please sign in to view your charging session history.</p>
            </div>
            <div className="mt-4">
              <Link href="/signin" className="inline-flex items-center rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-offset-2" style={{ backgroundColor: brandColor }}>
                Sign In
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};