"use client";

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

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"];

export function SimTypeSelector({
  simType,
  onSimTypeChange,
  eid,
  onEidChange,
  errors,
}: SimTypeSelectorProps) {
  const [showEidInfo, setShowEidInfo] = useState(false);

  return (
    <div className="space-y-6">
      {/* SIM Type Selection Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* eSIM Option */}
        <button
          type="button"
          onClick={() => onSimTypeChange("eSIM")}
          className={`relative text-left p-5 rounded-xl border-2 transition-all duration-200 ${
            simType === "eSIM"
              ? "border-primary bg-primary/5 ring-1 ring-primary/20"
              : "border-border bg-card hover:border-primary/40 hover:bg-muted/50"
          }`}
        >
          {simType === "eSIM" && (
            <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 ${
                simType === "eSIM" ? "bg-primary/10" : "bg-muted"
              }`}
            >
              <SignalIcon
                className={`w-6 h-6 ${simType === "eSIM" ? "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>

        {/* Physical SIM Option */}
        <button
          type="button"
          onClick={() => onSimTypeChange("Physical SIM")}
          className={`relative text-left p-5 rounded-xl border-2 transition-all duration-200 ${
            simType === "Physical SIM"
              ? "border-primary bg-primary/5 ring-1 ring-primary/20"
              : "border-border bg-card hover:border-primary/40 hover:bg-muted/50"
          }`}
        >
          {simType === "Physical SIM" && (
            <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 ${
                simType === "Physical SIM" ? "bg-primary/10" : "bg-muted"
              }`}
            >
              <DevicePhoneMobileIcon
                className={`w-6 h-6 ${simType === "Physical SIM" ? "text-primary" : "text-muted-foreground"}`}
              />
            </div>
            <div className="flex-1 min-w-0">
              <h4 className="font-semibold text-foreground mb-1">Physical SIM</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>
      </div>

      {/* EID Input for eSIM */}
      <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>

      {/* Note about verification */}
      <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 Physical SIM require ID verification before activation (1-2 business days).
        </p>
      </div>
    </div>
  );
}
