// 앱 설치 안내 페이지 — 노인 사용자도 따라할 수 있도록 큰 글씨 + 단계별 안내.
// User-Agent 로 안드로이드/아이폰/PC 감지해서 해당 가이드만 보여줌.

"use client";

import { useEffect, useState } from "react";
import { Smartphone, ChevronRight, Apple, Globe } from "lucide-react";

type Device = "android" | "ios" | "desktop";

export default function InstallGuidePage() {
  const [device, setDevice] = useState<Device>("android");
  const [autoDetected, setAutoDetected] = useState(false);

  useEffect(() => {
    const ua = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(ua)) setDevice("ios");
    else if (/android/.test(ua)) setDevice("android");
    else setDevice("desktop");
    setAutoDetected(true);
  }, []);

  return (
    <main className="min-h-screen bg-gradient-to-b from-emerald-50 to-white px-4 py-6 sm:py-10">
      <div className="max-w-md mx-auto">
        {/* 헤더 */}
        <div className="text-center mb-6 sm:mb-8">
          <div className="w-20 h-20 bg-emerald-700 rounded-2xl mx-auto mb-3 flex items-center justify-center shadow-lg">
            <span className="text-white text-3xl font-black">M</span>
          </div>
          <h1 className="text-2xl sm:text-3xl font-black text-slate-900">모모ERP 앱 설치</h1>
          <p className="text-base text-slate-600 mt-2">홈 화면에 앱처럼 만들어 사용하세요</p>
        </div>

        {/* 기종 선택 */}
        <div className="bg-white border border-slate-200 rounded-2xl p-2 mb-6 shadow-sm">
          <div className="grid grid-cols-3 gap-1">
            <TabBtn active={device === "android"} onClick={() => setDevice("android")}>
              <Smartphone size={20} />
              <span>안드로이드</span>
            </TabBtn>
            <TabBtn active={device === "ios"} onClick={() => setDevice("ios")}>
              <Apple size={20} />
              <span>아이폰</span>
            </TabBtn>
            <TabBtn active={device === "desktop"} onClick={() => setDevice("desktop")}>
              <Globe size={20} />
              <span>컴퓨터</span>
            </TabBtn>
          </div>
          {autoDetected && (
            <p className="text-[11px] text-center text-slate-400 mt-2">
              지금 사용 중인 기기에 맞춰 자동 선택됨
            </p>
          )}
        </div>

        {/* 가이드 본문 */}
        {device === "android" && <AndroidGuide />}
        {device === "ios" && <IosGuide />}
        {device === "desktop" && <DesktopGuide />}

        {/* 하단 — 로그인 바로가기 */}
        <div className="mt-8 pt-6 border-t border-slate-200 text-center space-y-3">
          <a
            href="/m/login"
            className="inline-flex items-center gap-2 px-6 h-12 rounded-xl bg-emerald-700 text-white text-base font-bold shadow-md active:translate-y-px"
          >
            로그인 화면으로 가기 <ChevronRight size={18} />
          </a>
          <p className="text-xs text-slate-500">설치 도움이 필요하시면 ☎ 010-6369-8443</p>
        </div>
      </div>
    </main>
  );
}

function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
  return (
    <button
      onClick={onClick}
      className={`flex flex-col items-center gap-1 py-3 rounded-xl text-xs font-bold transition ${
        active
          ? "bg-emerald-700 text-white shadow"
          : "bg-transparent text-slate-500 hover:bg-slate-50"
      }`}
    >
      {children}
    </button>
  );
}

// ─────────────────────────────────────────
// 안드로이드 — Chrome 으로 PWA 설치
// ─────────────────────────────────────────
function AndroidGuide() {
  return (
    <div className="space-y-4">
      <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-4 text-center">
        <p className="text-base font-bold text-emerald-900">
          📱 안드로이드 휴대폰에 설치하기
        </p>
        <p className="text-sm text-emerald-700 mt-1">Play 스토어에서 받거나, 크롬으로 홈 화면에 추가</p>
      </div>

      {/* Play 스토어 우선 안내 */}
      <div className="bg-white border-2 border-emerald-500 rounded-2xl p-5 text-center shadow-md">
        <p className="text-sm font-bold text-emerald-800 mb-1">✨ 가장 쉬운 방법</p>
        <p className="text-lg font-black text-slate-900 mb-3">Play 스토어에서 받기</p>
        <a
          href="https://play.google.com/store/apps/details?id=com.momotogether.app"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center justify-center gap-2 w-full h-14 rounded-xl bg-emerald-700 text-white text-lg font-black shadow active:translate-y-px"
        >
          ▶ Play 스토어 열기
        </a>
        <p className="text-xs text-slate-500 mt-2">설치 후 모모ERP 아이콘을 탭하면 끝!</p>
      </div>

      <div className="text-center text-sm text-slate-500 font-semibold py-2">— 또는 크롬으로 홈 화면에 추가 —</div>

      <Step n={1} title="크롬(Chrome) 앱 열기">
        <p>휴대폰에서 <b className="text-emerald-700">크롬</b> (인터넷) 앱을 열어주세요.</p>
        <div className="mt-2 flex items-center gap-2 text-sm text-slate-500">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 via-red-500 to-yellow-400 flex items-center justify-center text-white font-black text-sm">C</div>
          <span>← 이 아이콘</span>
        </div>
      </Step>

      <Step n={2} title="momotogether.com 주소 입력">
        <p>주소창에 <b className="text-emerald-700 text-lg break-all">momotogether.com</b> 을 입력하고 이동.</p>
      </Step>

      <Step n={3} title='"앱 설치" 누르기'>
        <p>
          화면 아래쪽에 <b className="text-emerald-700">&quot;앱 설치&quot;</b> 또는
          <b className="text-emerald-700"> &quot;홈 화면에 추가&quot;</b> 배너가 자동으로 뜹니다.
          탭해주세요.
        </p>
        <p className="mt-2 text-sm text-slate-500">
          ※ 배너가 안 보이면, 우상단 <b>⋮ 점 세 개</b> 메뉴 → <b>&quot;앱 설치&quot;</b> 직접 선택.
        </p>
      </Step>

      <Step n={4} title='"설치" 한 번 더 누르기'>
        <p>확인 창에서 <b className="text-emerald-700">&quot;설치&quot;</b> 버튼 탭.</p>
      </Step>

      <FinishBox>
        홈 화면에 <b>모모ERP</b> 아이콘이 생겼습니다. 탭해서 로그인하세요.
      </FinishBox>
    </div>
  );
}

// ─────────────────────────────────────────
// 아이폰 — Safari 로 PWA 설치
// ─────────────────────────────────────────
function IosGuide() {
  return (
    <div className="space-y-4">
      <div className="bg-blue-50 border border-blue-200 rounded-2xl p-4 text-center">
        <p className="text-base font-bold text-blue-900">
           아이폰(아이패드)에 설치하기
        </p>
        <p className="text-sm text-blue-700 mt-1">반드시 사파리(Safari) 로 진행</p>
      </div>

      <div className="bg-amber-50 border-2 border-amber-300 rounded-2xl p-4">
        <p className="text-base font-bold text-amber-900">⚠️ 꼭 사파리(Safari) 로 하세요</p>
        <p className="text-sm text-amber-800 mt-1">크롬·네이버 앱으로 하면 일반 즐겨찾기만 되고 앱처럼 안 됩니다.</p>
      </div>

      <Step n={1} title="사파리(Safari) 앱 열기">
        <p>나침반 모양 <b className="text-blue-700">사파리</b> 아이콘 탭.</p>
        <div className="mt-2 flex items-center gap-2 text-sm text-slate-500">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-sky-400 to-blue-600 flex items-center justify-center text-white text-lg">🧭</div>
          <span>← 이 아이콘</span>
        </div>
      </Step>

      <Step n={2} title="momotogether.com 주소 입력">
        <p>주소창에 <b className="text-blue-700 text-lg break-all">momotogether.com</b> 입력 후 이동.</p>
      </Step>

      <Step n={3} title="공유 버튼 누르기">
        <p>화면 <b>아래쪽 가운데</b> 의 <b className="text-blue-700">공유 버튼</b> 탭.</p>
        <div className="mt-2 flex items-center gap-2 text-sm text-slate-500">
          <div className="w-10 h-10 rounded-xl border-2 border-blue-500 flex items-center justify-center text-blue-600 text-xl">⬆</div>
          <span>← 사각형 + 위쪽 화살표 모양</span>
        </div>
      </Step>

      <Step n={4} title='"홈 화면에 추가" 누르기'>
        <p>
          공유 메뉴를 <b>아래로 스크롤</b> 하면
          <b className="text-blue-700"> &quot;홈 화면에 추가&quot;</b> 항목이 있습니다. 탭.
        </p>
      </Step>

      <Step n={5} title='"추가" 한 번 더 누르기'>
        <p>우측 상단 <b className="text-blue-700">&quot;추가&quot;</b> 탭.</p>
      </Step>

      <FinishBox>
        홈 화면에 <b>모모ERP</b> 아이콘 생겼어요. 탭해서 로그인하세요.
      </FinishBox>
    </div>
  );
}

// ─────────────────────────────────────────
// PC — QR 안내 + 바로 사용 옵션
// ─────────────────────────────────────────
function DesktopGuide() {
  return (
    <div className="space-y-4">
      <div className="bg-slate-50 border border-slate-200 rounded-2xl p-4 text-center">
        <p className="text-base font-bold text-slate-900">💻 PC 사용자</p>
        <p className="text-sm text-slate-600 mt-1">휴대폰에서 설치하시거나, 컴퓨터 브라우저로 바로 사용하세요</p>
      </div>

      <Step n={1} title="휴대폰에서 설치하려면 — QR 코드">
        <p>아래 QR 코드를 휴대폰 카메라로 찍으면 설치 안내 페이지가 폰에 열립니다.</p>
        <div className="mt-3 flex justify-center">
          <img
            src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=https%3A%2F%2Fmomotogether.com%2Finstall"
            alt="설치 페이지 QR 코드"
            className="rounded-xl border border-slate-200"
            width={220}
            height={220}
          />
        </div>
      </Step>

      <Step n={2} title="컴퓨터로 바로 사용하기">
        <p>크롬·엣지에서 momotogether.com 접속 → 로그인 → 그대로 사용 가능합니다.</p>
        <p className="mt-2 text-sm text-slate-500">
          크롬 주소창 우측 끝에 <b>⊕</b> 또는 <b>모니터+화살표</b> 모양 아이콘이 보이면 클릭해서 설치할 수도 있어요.
        </p>
      </Step>

      <FinishBox>
        대부분의 기능은 PC 브라우저에서도 동일하게 동작합니다.
      </FinishBox>
    </div>
  );
}

// ─────────────────────────────────────────
function Step({ n, title, children }: { n: number; title: string; children: React.ReactNode }) {
  return (
    <div className="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm">
      <div className="flex items-start gap-3">
        <div className="w-9 h-9 rounded-full bg-emerald-700 text-white flex items-center justify-center font-black text-base shrink-0">
          {n}
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="text-base font-bold text-slate-900 mb-1">{title}</h3>
          <div className="text-base text-slate-700 leading-relaxed">{children}</div>
        </div>
      </div>
    </div>
  );
}

function FinishBox({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-emerald-600 text-white rounded-2xl p-5 text-center shadow-md">
      <p className="text-2xl mb-1">🎉</p>
      <p className="text-base font-bold">설치 완료!</p>
      <p className="text-sm mt-1 text-emerald-50">{children}</p>
    </div>
  );
}
