"use client";

import { useState } from "react";
import {
  DevicePhoneMobileIcon,
  SignalIcon,
  TruckIcon,
  EnvelopeIcon,
  InformationCircleIcon,
  CheckIcon,
} from "@heroicons/react/24/outline";

const SIM_TYPE_PHYSICAL = "Physical SIM" as const;

interface SimTypeSelectorProps {
  simType: "Physical SIM" | "eSIM" | "";
  onSimTypeChange: (type: "Physical SIM" | "eSIM") => void;
  eid: string;
  onEidChange: (eid: string) => void;
  errors: Record<string, string | undefined>;
}

const compatibleEidPrefixes = ["89049032", "89033023", "89033024", "89043051", "89043052"];

function ESimOption({ isSelected, onSelect }: { isSelected: boolean; onSelect: () => void }) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className={`relative text-left p-5 rounded-xl border-2 transition-all duration-200 ${
        isSelected
          ? "border-primary bg-primary/5 ring-1 ring-primary/20"
          : "border-border bg-card hover:border-primary/40 hover:bg-muted/50"
      }`}
    >
      {isSelected && (
        <div className="absolute top-3 right-3 w-6 h-6 rounded-full bg-primary flex items-center justify-center">
          <CheckIcon className="w-4 h-4 text-primary-foreground" />
        </div>
      )}

      <div className="flex items-start gap-4">
        <div
          className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
            isSelected ? "bg-primary/10" : "bg-muted"
          }`}
        >
          <SignalIcon
            className={`w-6 h-6 ${isSelected ? "text-primary" : "text-muted-foreground"}`}
          />
        </div>
        <div className="flex-1 min-w-0">
          <h4 className="font-semibold text-foreground mb-1">eSIM (Digital)</h4>
          <p className="text-sm text-muted-foreground mb-3">
            Digital SIM delivered via email after approval
          </p>
          <div className="flex items-center gap-2 text-sm">
            <EnvelopeIcon className="w-4 h-4 text-primary" />
            <span className="text-muted-foreground">
              Delivery: <span className="text-foreground font-medium">Email after approval</span>
            </span>
          </div>
        </div>
      </div>

      <ul className="mt-4 space-y-2 text-sm text-muted-foreground">
        <li className="flex items-center gap-2">
          <CheckIcon className="w-4 h-4 text-success flex-shrink-0" />
          <span>No physical card needed</span>
        </li>
        <li className="flex items-center gap-2">
          <CheckIcon className="w-4 h-4 text-success flex-shrink-0" />
          <span>EID number required</span>
        </li>
      </ul>
    </button>
  );
}

function PhysicalSimOption({
  isSelected,
  onSelect,
}: {
  isSelected: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className={`relative text-left p-5 rounded-xl border-2 transition-all duration-200 ${
        isSelected
          ? "border-primary bg-primary/5 ring-1 ring-primary/20"
          : "border-border bg-card hover:border-primary/40 hover:bg-muted/50"
      }`}
    >
      {isSelected && (
        <div className="absolute top-3 right-3 w-6 h-6 rounded-full bg-primary flex items-center justify-center">
          <CheckIcon className="w-4 h-4 text-primary-foreground" />
        </div>
      )}

      <div className="flex items-start gap-4">
        <div
          className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
            isSelected ? "bg-primary/10" : "bg-muted"
          }`}
        >
          <DevicePhoneMobileIcon
            className={`w-6 h-6 ${isSelected ? "text-primary" : "text-muted-foreground"}`}
          />
        </div>
        <div className="flex-1 min-w-0">
          <h4 className="font-semibold text-foreground mb-1">{SIM_TYPE_PHYSICAL}</h4>
          <p className="text-sm text-muted-foreground mb-3">
            Traditional SIM card shipped to your address
          </p>
          <div className="flex items-center gap-2 text-sm">
            <TruckIcon className="w-4 h-4 text-muted-foreground" />
            <span className="text-muted-foreground">
              Delivery: <span className="text-foreground font-medium">1-3 business days</span>
            </span>
          </div>
        </div>
      </div>

      <ul className="mt-4 space-y-2 text-sm text-muted-foreground">
        <li className="flex items-center gap-2">
          <CheckIcon className="w-4 h-4 text-success flex-shrink-0" />
          <span>Works with any unlocked device</span>
        </li>
        <li className="flex items-center gap-2">
          <CheckIcon className="w-4 h-4 text-success flex-shrink-0" />
          <span>3-in-1 size (Nano/Micro/Standard)</span>
        </li>
      </ul>
    </button>
  );
}

function EidInput({
  simType,
  eid,
  onEidChange,
  errors,
}: {
  simType: string;
  eid: string;
  onEidChange: (eid: string) => void;
  errors: Record<string, string | undefined>;
}) {
  const [showEidInfo, setShowEidInfo] = useState(false);

  return (
    <div
      className={`overflow-hidden transition-all duration-300 ease-out ${
        simType === "eSIM" ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
      }`}
      aria-hidden={simType !== "eSIM"}
    >
      <div className="p-5 bg-primary/5 border border-primary/20 rounded-xl">
        <div className="flex items-start gap-3 mb-4">
          <InformationCircleIcon className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
          <div>
            <h4 className="font-medium text-foreground mb-1">eSIM Device Information</h4>
            <p className="text-sm text-muted-foreground">
              Your EID (Embedded Identity Document) is required to provision the eSIM to your
              device.
            </p>
          </div>
        </div>

        <div>
          <label htmlFor="eid" className="block text-sm font-medium text-foreground mb-2">
            EID Number <span className="text-destructive">*</span>
          </label>
          <input
            type="text"
            id="eid"
            value={eid}
            onChange={e => onEidChange(e.target.value)}
            className={`w-full px-4 py-3 bg-card border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors ${
              errors["eid"] ? "border-destructive" : "border-border"
            }`}
            placeholder="32-digit EID number"
            maxLength={32}
          />
          {errors["eid"] && <p className="text-destructive text-sm mt-2">{errors["eid"]}</p>}

          <button
            type="button"
            onClick={() => setShowEidInfo(!showEidInfo)}
            className="text-sm text-primary hover:underline mt-2"
          >
            {showEidInfo ? "Hide" : "Where to find your EID?"}
          </button>

          {showEidInfo && (
            <div className="mt-3 p-4 bg-card border border-border rounded-lg text-sm">
              <p className="text-muted-foreground mb-3">Find your EID in your phone's settings:</p>
              <ul className="space-y-2 text-muted-foreground">
                <li>
                  <strong className="text-foreground">iOS:</strong> Settings → General → About → EID
                </li>
                <li>
                  <strong className="text-foreground">Android:</strong> Settings → About Phone → SIM
                  status → EID
                </li>
              </ul>
              <div className="mt-4 pt-3 border-t border-border">
                <p className="font-medium text-foreground mb-2">Compatible EID prefixes:</p>
                <div className="flex flex-wrap gap-2">
                  {compatibleEidPrefixes.map(prefix => (
                    <code
                      key={prefix}
                      className="px-2 py-1 bg-muted rounded text-xs font-mono text-foreground"
                    >
                      {prefix}...
                    </code>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export function SimTypeSelector({
  simType,
  onSimTypeChange,
  eid,
  onEidChange,
  errors,
}: SimTypeSelectorProps) {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <ESimOption isSelected={simType === "eSIM"} onSelect={() => onSimTypeChange("eSIM")} />
        <PhysicalSimOption
          isSelected={simType === SIM_TYPE_PHYSICAL}
          onSelect={() => onSimTypeChange(SIM_TYPE_PHYSICAL)}
        />
      </div>

      <EidInput simType={simType} eid={eid} onEidChange={onEidChange} errors={errors} />

      <div className="flex items-start gap-3 p-4 bg-muted/50 border border-border rounded-lg">
        <InformationCircleIcon className="w-5 h-5 text-muted-foreground mt-0.5 flex-shrink-0" />
        <p className="text-sm text-muted-foreground">
          Both eSIM and {SIM_TYPE_PHYSICAL} require ID verification before activation (1-2 business
          days).
        </p>
      </div>
    </div>
  );
}
