"use client";

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

const esimFeatures = [
  { text: "No physical card needed", included: true },
  { text: "Delivered via email after approval", included: true },
  { text: "EID number required", included: true, note: true },
  { text: "Can be transferred between devices", included: false },
];

const physicalSimFeatures = [
  { text: "Works with any unlocked device", included: true },
  { text: "Ships after approval (1-3 days)", included: true },
  { text: "3-in-1 size (Nano/Micro/Standard)", included: true },
  { text: "No EID required", included: true },
];

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

function ESimCard({ onToggleEidInfo }: { onToggleEidInfo: () => void }) {
  return (
    <div className="border border-primary/30 bg-primary/5 rounded-xl p-5">
      <div className="flex items-center gap-3 mb-4">
        <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
          <SignalIcon className="w-6 h-6 text-primary" />
        </div>
        <div>
          <h4 className="font-semibold text-foreground">eSIM</h4>
          <p className="text-xs text-muted-foreground">Digital SIM card</p>
        </div>
      </div>

      <ul className="space-y-3">
        {esimFeatures.map((feature, index) => (
          <li key={index} className="flex items-start gap-2">
            {feature.included ? (
              <CheckIcon className="w-4 h-4 text-success mt-0.5 flex-shrink-0" />
            ) : (
              <span className="w-4 h-4 mt-0.5 flex-shrink-0 text-center text-muted-foreground">
                ✕
              </span>
            )}
            <span className="text-sm text-foreground">
              {feature.text}
              {feature.note && (
                <button
                  onClick={onToggleEidInfo}
                  className="ml-1 text-primary hover:text-primary-hover"
                >
                  <QuestionMarkCircleIcon className="w-4 h-4 inline" />
                </button>
              )}
            </span>
          </li>
        ))}
      </ul>

      <div className="mt-4 pt-4 border-t border-primary/20">
        <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>
  );
}

function PhysicalSimCard() {
  return (
    <div className="border border-border bg-muted/30 rounded-xl p-5">
      <div className="flex items-center gap-3 mb-4">
        <div className="w-12 h-12 rounded-xl bg-foreground/10 flex items-center justify-center">
          <DevicePhoneMobileIcon className="w-6 h-6 text-foreground" />
        </div>
        <div>
          <h4 className="font-semibold text-foreground">Physical SIM</h4>
          <p className="text-xs text-muted-foreground">Traditional SIM card</p>
        </div>
      </div>

      <ul className="space-y-3">
        {physicalSimFeatures.map((feature, index) => (
          <li key={index} className="flex items-start gap-2">
            <CheckIcon className="w-4 h-4 text-success mt-0.5 flex-shrink-0" />
            <span className="text-sm text-foreground">{feature.text}</span>
          </li>
        ))}
      </ul>

      <div className="mt-4 pt-4 border-t border-border">
        <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>
  );
}

export function SimTypeComparison() {
  const [showEidInfo, setShowEidInfo] = useState(false);

  return (
    <div className="bg-card border border-border rounded-2xl p-6 md:p-8">
      <h3 className="text-lg font-semibold text-foreground text-center mb-2">
        eSIM vs Physical SIM
      </h3>
      <p className="text-sm text-muted-foreground text-center mb-6">
        Choose the right option for your device
      </p>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <ESimCard onToggleEidInfo={() => setShowEidInfo(!showEidInfo)} />
        <PhysicalSimCard />
      </div>

      {showEidInfo && (
        <div className="mt-6 p-4 bg-info/10 border border-info/25 rounded-xl">
          <div className="flex items-start gap-3">
            <InformationCircleIcon className="w-5 h-5 text-info mt-0.5 flex-shrink-0" />
            <div>
              <h4 className="font-medium text-foreground mb-2">What is an EID?</h4>
              <p className="text-sm text-muted-foreground mb-3">
                An EID (Embedded Identity Document) is a 32-digit number unique to your device's
                eSIM chip. You can find it in your phone's settings under "About" or "SIM status".
              </p>
              <div className="text-sm">
                <p className="font-medium text-foreground mb-1">Compatible EID prefixes:</p>
                <div className="flex flex-wrap gap-2">
                  {compatibleEidPrefixes.map(prefix => (
                    <code
                      key={prefix}
                      className="px-2 py-1 bg-card rounded text-xs font-mono text-foreground"
                    >
                      {prefix}...
                    </code>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <p className="text-center text-xs text-muted-foreground mt-6">
        Both options require ID verification before activation (1-2 business days)
      </p>
    </div>
  );
}
