"use client";

import React, { Suspense, useEffect, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import {
  WrenchScrewdriverIcon,
  LockClosedIcon,
  GlobeAltIcon,
  DevicePhoneMobileIcon,
  ShieldCheckIcon,
} from "@heroicons/react/24/outline";
import { SimManagementSection } from "@/features/sim-management";

interface ServiceManagementSectionProps {
  subscriptionId: number;
  productName: string;
}

type ServiceKey = "SIM" | "INTERNET" | "NETGEAR" | "VPN";

// Inner component that uses useSearchParams
function ServiceManagementContent({
  subscriptionId,
  productName,
}: ServiceManagementSectionProps) {
  const isSimService = useMemo(() => productName?.toLowerCase().includes("sim"), [productName]);

  const [selectedService, setSelectedService] = useState<ServiceKey>(
    isSimService ? "SIM" : "INTERNET"
  );

  const searchParams = useSearchParams();

  useEffect(() => {
    const s = (searchParams.get("service") || "").toLowerCase();
    if (s === "sim") setSelectedService("SIM");
    else if (s === "internet") setSelectedService("INTERNET");
    else if (s === "netgear") setSelectedService("NETGEAR");
    else if (s === "vpn") setSelectedService("VPN");
  }, [searchParams]);

  const renderHeader = () => (
    <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
      <div className="flex items-center">
        <WrenchScrewdriverIcon className="h-6 w-6 text-blue-600 mr-2" />
        <div>
          <h3 className="text-lg font-medium text-gray-900">Service Management</h3>
          <p className="text-sm text-gray-500">Manage settings for your subscription</p>
        </div>
      </div>

      <div className="flex items-center space-x-2">
        <label htmlFor="service-selector" className="text-sm text-gray-600">
          Service
        </label>
        <select
          id="service-selector"
          className="block w-48 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
          value={selectedService}
          onChange={e => setSelectedService(e.target.value as ServiceKey)}
        >
          <option value="SIM">SIM</option>
          <option value="INTERNET">Internet (coming soon)</option>
          <option value="NETGEAR">Netgear (coming soon)</option>
          <option value="VPN">VPN (coming soon)</option>
        </select>
      </div>
    </div>
  );

  const ComingSoon = ({
    icon: Icon,
    title,
    description,
  }: {
    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
    title: string;
    description: string;
  }) => (
    <div className="px-6 py-10 text-center text-gray-600">
      <Icon className="mx-auto h-12 w-12 text-gray-400" />
      <h4 className="mt-4 text-base font-medium text-gray-900">{title}</h4>
      <p className="mt-2 text-sm">{description}</p>
      <span className="mt-3 inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-700">
        Coming soon
      </span>
    </div>
  );

  return (
    <div className="space-y-6 mb-6">
      <div className="bg-white shadow rounded-lg">{renderHeader()}</div>

      {selectedService === "SIM" ? (
        isSimService ? (
          <SimManagementSection subscriptionId={subscriptionId} />
        ) : (
          <div className="bg-white shadow rounded-lg p-6 text-center">
            <DevicePhoneMobileIcon className="mx-auto h-12 w-12 text-gray-400" />
            <h4 className="mt-2 text-sm font-medium text-gray-900">SIM management not available</h4>
            <p className="mt-1 text-sm text-gray-500">This subscription is not a SIM service.</p>
          </div>
        )
      ) : selectedService === "INTERNET" ? (
        <div className="bg-white shadow rounded-lg">
          <ComingSoon
            icon={GlobeAltIcon}
            title="Internet Service Management"
            description="Monitor bandwidth, change plans, and manage router settings."
          />
        </div>
      ) : selectedService === "NETGEAR" ? (
        <div className="bg-white shadow rounded-lg">
          <ComingSoon
            icon={ShieldCheckIcon}
            title="Netgear Device Management"
            description="View device status, firmware updates, and troubleshoot connectivity."
          />
        </div>
      ) : (
        <div className="bg-white shadow rounded-lg">
          <ComingSoon
            icon={LockClosedIcon}
            title="VPN Service Management"
            description="Manage VPN profiles, devices, and secure connection settings."
          />
        </div>
      )}
    </div>
  );
}

// Wrapper component with Suspense boundary
export function ServiceManagementSection(props: ServiceManagementSectionProps) {
  const isSimService = useMemo(() => props.productName?.toLowerCase().includes("sim"), [props.productName]);

  return (
    <Suspense
      fallback={
        <div className="space-y-6 mb-6">
          <div className="bg-white shadow rounded-lg px-6 py-4">
            <div className="flex items-center">
              <WrenchScrewdriverIcon className="h-6 w-6 text-blue-600 mr-2" />
              <div>
                <h3 className="text-lg font-medium text-gray-900">Service Management</h3>
                <p className="text-sm text-gray-500">Loading...</p>
              </div>
            </div>
          </div>
          <div className="bg-white shadow rounded-lg">
            <div className="px-6 py-10 animate-pulse">
              <div className="h-12 w-12 bg-gray-200 rounded-full mx-auto" />
              <div className="mt-4 h-4 bg-gray-200 rounded w-48 mx-auto" />
              <div className="mt-2 h-3 bg-gray-200 rounded w-64 mx-auto" />
            </div>
          </div>
        </div>
      }
    >
      <ServiceManagementContent {...props} />
    </Suspense>
  );
}
