import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { chargePointService } from '@/services/chargepoint/chargePointService';
import BackButton from '@/components/ui/buttons-group/ButtonBack';
import { ChargePoint } from '@/types/chargepoint/chargepoint';
import StationHeader from './sections/StationHeader';
// import ConnectorSelector from './sections/ConnectorSelector';
import ConnectorSelector from '../connectorModule/sections/ConnectorSelector';
import { CustomerSupportButton } from '@/components/common/CustomerSupportButton';
import { Organization } from '@/types/organization/organization';

export const revalidate = 5;

export default async function StationDetailModule({ 
  params,
  organization
}: { 
  params: { id: string };
  organization?: Organization | null;
}) {
  const { id } = params;
  let chargepoint: ChargePoint | null = null;

  try {
    chargepoint = await chargePointService.getChargePointById(id, { backend: 'v1' });
  } catch (error) {
    console.error('Error fetching chargepoint:', error);
  }

  if (!chargepoint) {
    return notFound();
  }

  return (
    <Suspense fallback={<StationDetailSkeleton />}>
      <BackButton />
      <div className="mx-auto max-w-7xl p-4">
        <div className="flex flex-col lg:flex-row gap-8">
          <div className="w-full lg:w-1/2 overflow-hidden rounded-lg border border-stroke bg-white shadow-default dark:border-gray-700 dark:bg-gray-800">
            <StationHeader chargePoint={chargepoint} />
          </div>
          <div className="w-full lg:w-1/2 space-y-4">
            <div className="overflow-hidden rounded-lg border border-stroke bg-white shadow-default dark:border-gray-700 dark:bg-gray-800 p-4 md:p-6">
              <ConnectorSelector
                connectors={chargepoint.connectors || []}
                stationId={chargepoint.id || ''}
              />
            </div>
            {/* Customer Support Button - below connectors */}
            <div className="px-4">
              <CustomerSupportButton organization={organization} />
            </div>
          </div>
        </div>
      </div>
    </Suspense>
  );
};

// Loading skeleton component for detail page
const StationDetailSkeleton = () => (
  <>
    <BackButton />
    <div className="mx-auto max-w-7xl p-4">
      <div className="mb-6">
        <div className="h-10 w-24 animate-pulse rounded-md bg-slate-200 dark:bg-slate-700"></div>
      </div>
      <div className="flex flex-col lg:flex-row gap-8">
        {/* Station Info Section Skeleton */}
        <div className="w-full lg:w-1/2 overflow-hidden rounded-lg border border-stroke bg-white shadow-default dark:border-gray-700 dark:bg-gray-800">
          <div className="h-60 animate-pulse bg-slate-200 dark:bg-slate-700 md:h-80"></div>
          <div className="p-6 space-y-4">
            <div className="h-8 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
            <div className="h-6 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
            <div className="h-16 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
          </div>
        </div>

        {/* Connector Selector Section Skeleton */}
        <div className="w-full lg:w-1/2 overflow-hidden rounded-lg border border-stroke bg-white shadow-default dark:border-gray-700 dark:bg-gray-800 p-6">
          <div className="space-y-4">
            <div className="h-6 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
            <div className="space-y-3">
              {[1, 2, 3].map((skeletonId) => (
                <div
                  key={`detail-skeleton-${skeletonId}`}
                  className="h-20 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-700"
                ></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </>
);