'use client';

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

export default function InstallBanner() {
  const { isInstallable, isInstalled, isIOS, promptInstall } = usePWAInstall();
  const [dismissed, setDismissed] = useState(false);
  const [showIOSInstructions, setShowIOSInstructions] = useState(false);

  // Don't show if already installed, dismissed, or not installable (and not iOS)
  if (isInstalled || dismissed) return null;
  if (!isInstallable && !isIOS) return null;

  // Check if already dismissed this session
  if (typeof window !== 'undefined') {
    const dismissedSession = sessionStorage.getItem('rmaps_install_dismissed');
    if (dismissedSession) return null;
  }

  const handleDismiss = () => {
    setDismissed(true);
    sessionStorage.setItem('rmaps_install_dismissed', 'true');
  };

  const handleInstall = async () => {
    if (isIOS) {
      setShowIOSInstructions(true);
    } else {
      const success = await promptInstall();
      if (success) {
        handleDismiss();
      }
    }
  };

  return (
    <>
      <div className="bg-rmaps-primary/20 border-b border-rmaps-primary/30 px-4 py-2 flex items-center justify-between text-sm flex-shrink-0">
        <div className="flex items-center gap-2">
          <span className="text-lg">📲</span>
          <span className="text-white/90">Install rMaps for the best experience</span>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={handleInstall}
            className="px-3 py-1 bg-rmaps-primary hover:bg-rmaps-primary/80 rounded-full text-white text-xs font-medium transition-colors"
          >
            Install
          </button>
          <button
            onClick={handleDismiss}
            className="p-1 hover:bg-white/10 rounded-full transition-colors"
          >
            <svg className="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>

      {/* iOS Instructions Modal */}
      {showIOSInstructions && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/60" onClick={() => setShowIOSInstructions(false)} />
          <div className="relative bg-rmaps-card rounded-2xl p-6 max-w-sm w-full">
            <h3 className="text-lg font-semibold text-white mb-4">Install on iOS</h3>
            <ol className="text-white/70 text-sm space-y-3">
              <li className="flex items-start gap-3">
                <span className="text-lg">1.</span>
                <span>Tap the <strong className="text-white">Share</strong> button in Safari</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-lg">2.</span>
                <span>Scroll down and tap <strong className="text-white">"Add to Home Screen"</strong></span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-lg">3.</span>
                <span>Tap <strong className="text-white">"Add"</strong> in the top right</span>
              </li>
            </ol>
            <button
              onClick={() => setShowIOSInstructions(false)}
              className="mt-6 w-full btn-primary"
            >
              Got it
            </button>
          </div>
        </div>
      )}
    </>
  );
}
