"use client";

import { useState } from "react";
import { usePWAInstall } from "@/hooks/usePWAInstall";

interface Props {
  /** "pill" = gold outline pill (navbar / hero)
   *  "card" = glass card banner (below greeting)
   *  "pill-sm" = compact pill for tight spaces like the top app bar */
  variant?: "pill" | "pill-sm" | "card";
}

export function PWAInstallButton({ variant = "pill" }: Props) {
  const { state, install } = usePWAInstall();
  const [showIOS, setShowIOS] = useState(false);

  // Don't render until we know the install state
  if (state === "loading" || state === "installed" || state === "unavailable") {
    return null;
  }

  if (variant === "card") {
    return (
      <>
        <button
          onClick={state === "ios" ? () => setShowIOS(true) : install}
          className="w-full flex items-center gap-4 p-4 rounded-2xl border border-[#FED665]/20 bg-[#FED665]/5 hover:bg-[#FED665]/10 transition-colors group"
        >
          <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
            style={{ background: "linear-gradient(135deg, #D4AF37, #FED665)" }}>
            <span className="material-symbols-outlined text-[#040b61] text-xl"
              style={{ fontVariationSettings: "'FILL' 1" }}>download</span>
          </div>
          <div className="flex-1 text-left">
            <p className="text-white font-bold text-sm leading-tight">Download the App</p>
            <p className="text-white/50 text-xs mt-0.5">
              {state === "ios" ? "Add to your Home Screen for the best experience" : "Install for faster access & offline use"}
            </p>
          </div>
          <span className="material-symbols-outlined text-[#FED665]/60 group-hover:text-[#FED665] transition-colors text-lg">
            chevron_right
          </span>
        </button>

        {showIOS && <IOSModal onClose={() => setShowIOS(false)} />}
      </>
    );
  }

  // pill-sm variant — compact for top app bars
  if (variant === "pill-sm") {
    return (
      <>
        <button
          onClick={state === "ios" ? () => setShowIOS(true) : install}
          className="flex items-center gap-1 px-3 py-1.5 rounded-full border border-[#FED665]/30 text-[#FED665] text-xs font-semibold hover:bg-[#FED665]/10 transition-all active:scale-95"
        >
          <span className="material-symbols-outlined text-sm"
            style={{ fontVariationSettings: "'FILL' 1" }}>download</span>
          Install
        </button>
        {showIOS && <IOSModal onClose={() => setShowIOS(false)} />}
      </>
    );
  }

  // pill variant
  return (
    <>
      <button
        onClick={state === "ios" ? () => setShowIOS(true) : install}
        className="flex items-center gap-1.5 px-4 py-2 rounded-full border border-[#FED665]/40 text-[#FED665] text-sm font-bold hover:bg-[#FED665]/10 transition-all active:scale-95"
      >
        <span className="material-symbols-outlined text-base"
          style={{ fontVariationSettings: "'FILL' 1" }}>download</span>
        Get App
      </button>

      {showIOS && <IOSModal onClose={() => setShowIOS(false)} />}
    </>
  );
}

function IOSModal({ onClose }: { onClose: () => void }) {
  return (
    <div
      className="fixed inset-0 z-[9999] flex items-end justify-center p-4"
      onClick={onClose}
    >
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
      <div
        className="relative w-full max-w-sm rounded-[2rem] overflow-hidden shadow-2xl"
        onClick={(e) => e.stopPropagation()}
        style={{ background: "linear-gradient(160deg, #111550, #08112E)" }}
      >
        {/* Gold top bar */}
        <div className="h-1 w-full" style={{ background: "linear-gradient(to right, #D4AF37, #FED665, #D4AF37)" }} />

        <div className="p-6">
          <div className="flex items-start justify-between mb-5">
            <div>
              <h3 className="text-white font-black text-lg leading-tight">Add to Home Screen</h3>
              <p className="text-white/50 text-sm mt-1">3 quick steps in Safari</p>
            </div>
            <button
              onClick={onClose}
              className="w-8 h-8 rounded-full flex items-center justify-center bg-white/10 hover:bg-white/20 transition-colors"
            >
              <span className="material-symbols-outlined text-white text-lg">close</span>
            </button>
          </div>

          <ol className="space-y-4">
            {[
              { icon: "ios_share", step: "1", text: 'Tap the Share button at the bottom of Safari' },
              { icon: "add_box",   step: "2", text: 'Scroll down and tap "Add to Home Screen"' },
              { icon: "check_circle", step: "3", text: 'Tap "Add" in the top right corner' },
            ].map(({ icon, step, text }) => (
              <li key={step} className="flex items-center gap-4">
                <div className="w-9 h-9 rounded-full shrink-0 flex items-center justify-center"
                  style={{ background: "linear-gradient(135deg, #D4AF37, #FED665)" }}>
                  <span className="material-symbols-outlined text-[#040b61] text-lg"
                    style={{ fontVariationSettings: "'FILL' 1" }}>{icon}</span>
                </div>
                <p className="text-white/80 text-sm leading-snug">{text}</p>
              </li>
            ))}
          </ol>

          <p className="text-white/30 text-xs text-center mt-6">
            Works on iPhone and iPad · Safari only
          </p>
        </div>
      </div>
    </div>
  );
}