"use client";

import { Button } from "@/components/atoms/button";
import { StepHeader } from "@/components/atoms";
import { ArrowRightIcon } from "@heroicons/react/24/outline";
import type { ReactNode } from "react";
import type { InternetPlanCatalogItem } from "@customer-portal/domain/catalog";
import type { AccessModeValue } from "@customer-portal/domain/orders";

interface Props {
  plan: InternetPlanCatalogItem;
  mode: AccessModeValue | null;
  setMode: (mode: AccessModeValue) => void;
  isTransitioning: boolean;
  onNext: () => void;
}

export function ServiceConfigurationStep({ plan, mode, setMode, isTransitioning, onNext }: Props) {
  return (
    <div
      className={`bg-white rounded-2xl shadow-lg border border-gray-200/50 p-8 md:p-10 transition-all duration-150 ease-out ${
        isTransitioning ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"
      }`}
    >
      <div className="mb-8">
        <StepHeader
          stepNumber={1}
          title="Service Configuration"
          description="Review your plan details and configuration"
        />
      </div>

      {plan?.internetPlanTier === "Platinum" && (
        <div className="bg-gradient-to-r from-yellow-50 to-orange-50 border-2 border-yellow-200 rounded-xl p-5 mb-8 shadow-sm">
          <div className="flex items-start gap-3">
            <svg
              className="w-6 h-6 text-yellow-600 mt-0.5 flex-shrink-0"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                clipRule="evenodd"
              />
            </svg>
            <div className="flex-1">
              <h4 className="font-bold text-yellow-900 text-base mb-1">
                IMPORTANT - For PLATINUM subscribers
              </h4>
              <p className="text-sm text-yellow-800 leading-relaxed">
                Additional fees are incurred for the PLATINUM service. Please refer to the
                information from our tech team for details.
              </p>
              <p className="text-xs text-yellow-700 mt-2 italic">
                * Will appear on the invoice as &quot;Platinum Base Plan&quot;. Device subscriptions
                will be added later.
              </p>
            </div>
          </div>
        </div>
      )}

      {plan?.internetPlanTier === "Silver" ? (
        <SilverPlanConfiguration mode={mode} setMode={setMode} />
      ) : (
        <StandardPlanConfiguration plan={plan} />
      )}

      <div className="flex justify-end mt-8 pt-6 border-t border-gray-100">
        <Button
          onClick={onNext}
          disabled={plan?.internetPlanTier === "Silver" && !mode}
          rightIcon={<ArrowRightIcon className="w-4 h-4" />}
          className="min-w-[200px]"
        >
          Continue to Installation
        </Button>
      </div>
    </div>
  );
}

function SilverPlanConfiguration({
  mode,
  setMode,
}: {
  mode: AccessModeValue | null;
  setMode: (mode: AccessModeValue) => void;
}) {
  return (
    <div className="mb-8">
      <h4 className="font-bold text-gray-900 mb-5 text-base">
        Select Your Router & ISP Configuration:
      </h4>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        <ModeSelectionCard
          mode="PPPoE"
          selectedMode={mode}
          onSelect={setMode}
          title="Any Router + PPPoE"
          description="Works with most routers you already own or can purchase anywhere."
          note="PPPoE may experience network congestion during peak hours, potentially resulting in slower speeds."
          tone="warning"
        />
        <ModeSelectionCard
          mode="IPoE-BYOR"
          selectedMode={mode}
          onSelect={setMode}
          title="v6plus Router + IPoE"
          description="Requires a v6plus-compatible router for faster, more stable connection."
          note={
            <span>
              <strong>Recommended:</strong> Faster speeds with less congestion.{" "}
              <a
                href="https://www.jpix.ad.jp/service/?p=3565"
                target="_blank"
                rel="noreferrer"
                className="text-blue-600 underline hover:text-blue-700 font-medium"
              >
                Check compatibility →
              </a>
            </span>
          }
          tone="success"
        />
      </div>
    </div>
  );
}

function ModeSelectionCard({
  mode,
  selectedMode,
  onSelect,
  title,
  description,
  note,
  tone,
}: {
  mode: AccessModeValue;
  selectedMode: AccessModeValue | null;
  onSelect: (mode: AccessModeValue) => void;
  title: string;
  description: string;
  note: ReactNode;
  tone: "warning" | "success";
}) {
  const isSelected = selectedMode === mode;

  const toneClasses =
    tone === "warning"
      ? "bg-orange-100 text-orange-800 border-orange-200"
      : "bg-green-100 text-green-800 border-green-200";

  return (
    <button
      type="button"
      onClick={() => onSelect(mode)}
      className={`p-6 rounded-xl border-2 text-left transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
        isSelected
          ? "border-blue-500 bg-blue-50 shadow-md"
          : "border-gray-200 hover:border-blue-400 hover:bg-blue-50/50 shadow-sm hover:shadow-md"
      }`}
      aria-pressed={isSelected}
    >
      <div className="flex items-center justify-between mb-4">
        <h5 className="text-lg font-bold text-gray-900">{title}</h5>
        <div
          className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
            isSelected ? "bg-blue-500 border-blue-500" : "border-gray-300 bg-white"
          }`}
        >
          {isSelected && <div className="w-2 h-2 bg-white rounded-full"></div>}
        </div>
      </div>
      <p className="text-sm text-gray-700 mb-3 leading-relaxed">{description}</p>
      <div className={`rounded-lg border-2 px-4 py-3 text-xs leading-relaxed ${toneClasses}`}>
        {note}
      </div>
    </button>
  );
}

function StandardPlanConfiguration({ plan }: { plan: InternetPlanCatalogItem }) {
  return (
    <div className="bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl p-5 shadow-sm">
      <div className="flex items-start gap-3">
        <svg
          className="w-6 h-6 text-green-600 mt-0.5 flex-shrink-0"
          fill="currentColor"
          viewBox="0 0 20 20"
        >
          <path
            fillRule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
            clipRule="evenodd"
          />
        </svg>
        <div className="flex-1">
          <h4 className="font-bold text-green-900 text-base mb-1">Access Mode Pre-configured</h4>
          <p className="text-sm text-green-800 leading-relaxed">
            Access Mode: IPoE-HGW (Pre-configured for {plan.internetPlanTier} plan)
          </p>
        </div>
      </div>
    </div>
  );
}
