"use client";

import { PageLayout } from "@/components/templates/PageLayout";
import { ShieldCheckIcon } from "@heroicons/react/24/outline";
import { useVpnCatalog } from "@/features/catalog/hooks";
import { LoadingCard } from "@/components/atoms";
import { AsyncBlock } from "@/components/molecules/AsyncBlock/AsyncBlock";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { VpnPlanCard } from "@/features/catalog/components/vpn/VpnPlanCard";
import { CatalogBackLink } from "@/features/catalog/components/base/CatalogBackLink";
import { CatalogHero } from "@/features/catalog/components/base/CatalogHero";

export function VpnPlansView() {
  const { data, isLoading, error } = useVpnCatalog();
  const vpnPlans = data?.plans || [];
  const activationFees = data?.activationFees || [];

  if (isLoading || error) {
    return (
      <div className="min-h-screen bg-slate-50">
        <PageLayout
          title="VPN Plans"
          description="Loading plans..."
          icon={<ShieldCheckIcon className="h-6 w-6" />}
        >
          <div className="max-w-6xl mx-auto px-4">
            <CatalogBackLink href="/catalog" label="Back to Services" />

            <AsyncBlock
              isLoading={isLoading}
              error={error}
              loadingText="Loading VPN plans..."
              variant="page"
            >
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                {Array.from({ length: 4 }).map((_, index) => (
                  <LoadingCard key={index} className="h-64" />
                ))}
              </div>
            </AsyncBlock>
          </div>
        </PageLayout>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50">
      <PageLayout
        title="VPN Router Rental"
        description="Secure VPN router rental"
        icon={<ShieldCheckIcon className="h-6 w-6" />}
      >
        <div className="max-w-6xl mx-auto px-4 pb-16">
          <CatalogBackLink href="/catalog" label="Back to Services" />

          <CatalogHero
            title="SonixNet VPN Router Service"
            description="Fast and secure VPN connections to San Francisco or London using a pre-configured router."
          />

          {vpnPlans.length > 0 ? (
            <div className="mb-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-2 text-center">Available Plans</h2>
              <p className="text-gray-600 text-center mb-6">(One region per router)</p>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                {vpnPlans.map(plan => (
                  <VpnPlanCard key={plan.id} plan={plan} />
                ))}
              </div>

              {activationFees.length > 0 && (
                <AlertBanner
                  variant="info"
                  className="mt-6 max-w-4xl mx-auto"
                  title="Activation Fee"
                >
                  A one-time activation fee of 3000 JPY is incurred separately for each rental unit.
                  Tax (10%) not included.
                </AlertBanner>
              )}
            </div>
          ) : (
            <div className="text-center py-12">
              <ShieldCheckIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">No VPN Plans Available</h3>
              <p className="text-gray-600 mb-6">
                We couldn&apos;t find any VPN plans available at this time.
              </p>
              <CatalogBackLink
                href="/catalog"
                label="Back to Services"
                align="center"
                className="mt-4 mb-0"
              />
            </div>
          )}

          <div className="bg-white rounded-xl border border-gray-200 p-8 mb-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-6">How It Works</h2>
            <div className="space-y-4 text-gray-700">
              <p>
                SonixNet VPN is the easiest way to access video streaming services from overseas on
                your network media players such as an Apple TV, Roku, or Amazon Fire.
              </p>
              <p>
                A configured Wi-Fi router is provided for rental (no purchase required, no hidden
                fees). All you will need to do is to plug the VPN router into your existing internet
                connection.
              </p>
              <p>
                Then you can connect your network media players to the VPN Wi-Fi network, to connect
                to the VPN server.
              </p>
              <p>
                For daily Internet usage that does not require a VPN, we recommend connecting to
                your regular home Wi-Fi.
              </p>
            </div>
          </div>

          <AlertBanner variant="warning" title="Important Disclaimer" className="mb-8">
            *1: Content subscriptions are NOT included in the SonixNet VPN package. Our VPN service
            will establish a network connection that virtually locates you in the designated server
            location, then you will sign up for the streaming services of your choice. Not all
            services/websites can be unblocked. Assist Solutions does not guarantee or bear any
            responsibility over the unblocking of any websites or the quality of the
            streaming/browsing.
          </AlertBanner>
        </div>
      </PageLayout>
    </div>
  );
}

export default VpnPlansView;
