import { useEffect, useRef, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import api from '../api/client';

const CHIP_LABELS = {
  'ESP32-S3': 'ESP32-S3', 'ESP32-S2': 'ESP32-S2', 'ESP32-C3': 'ESP32-C3',
  'ESP32-C6': 'ESP32-C6', 'ESP32-H2': 'ESP32-H2', 'ESP32': 'ESP32',
};

export default function Flash() {
  const { token }       = useParams();
  const [info, setInfo] = useState(null);
  const [loading, setLoading]     = useState(true);
  const [flashDone, setFlashDone] = useState(false);
  const installRef = useRef(null);

  const manifestUrl = `${window.location.origin}/api/flash/${token}/manifest`;

  useEffect(() => {
    api.get(`/flash/${token}`)
      .then(r => setInfo(r.data))
      .catch(() => setInfo(null))
      .finally(() => setLoading(false));
  }, [token]);

  // esp-web-tools 이벤트 — 플래시 완료/실패 시 서버에 기록
  useEffect(() => {
    const btn = installRef.current;
    if (!btn) return;

    function onSuccess(e) {
      const mac = e.detail?.device?.macAddress || 'unknown';
      api.post(`/flash/${token}/consume`, {
        mac, chipFamily: info?.chipFamily, success: true,
      }).catch(() => {});
      setFlashDone(true);
    }
    function onFail(e) {
      api.post(`/flash/${token}/consume`, {
        mac: 'unknown', chipFamily: info?.chipFamily,
        success: false, errorMessage: e.detail?.message,
      }).catch(() => {});
    }

    btn.addEventListener('state-changed', (e) => {
      if (e.detail?.state === 'finished') onSuccess(e);
      if (e.detail?.state === 'error')    onFail(e);
    });
  }, [info, token]);

  if (loading) return <div className="spinner" />;

  // 유효하지 않은 토큰
  if (!info) {
    return (
      <div className="container page" style={{ maxWidth: 500 }}>
        <div className="card text-center" style={{ padding: 48 }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>❌</div>
          <h2 style={{ marginBottom: 8 }}>유효하지 않은 토큰</h2>
          <p className="text-muted">토큰을 찾을 수 없습니다.</p>
          <Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
            구매 내역으로
          </Link>
        </div>
      </div>
    );
  }

  // 이미 사용된 토큰
  if (info.isUsed) {
    return (
      <div className="container page" style={{ maxWidth: 500 }}>
        <div className="card text-center" style={{ padding: 48 }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>✅</div>
          <h2 style={{ marginBottom: 8 }}>이미 플래시됨</h2>
          <p className="text-muted" style={{ marginBottom: 8 }}>
            이 토큰은 {info.usedAt ? new Date(info.usedAt).toLocaleString('ko-KR') : ''}에 사용되었습니다.
          </p>
          <p className="text-muted" style={{ fontSize: 13 }}>1회용 토큰은 재사용할 수 없습니다.</p>
          <Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
            구매 내역으로
          </Link>
        </div>
      </div>
    );
  }

  // 만료된 토큰
  if (info.expired) {
    return (
      <div className="container page" style={{ maxWidth: 500 }}>
        <div className="card text-center" style={{ padding: 48 }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>⏰</div>
          <h2 style={{ marginBottom: 8 }}>만료된 토큰</h2>
          <p className="text-muted">토큰 유효기간이 지났습니다.</p>
          <p className="text-muted" style={{ fontSize: 13 }}>고객센터에 문의해주세요.</p>
          <Link to="/dashboard/orders" className="btn btn-outline" style={{ marginTop: 20 }}>
            구매 내역으로
          </Link>
        </div>
      </div>
    );
  }

  // 펌웨어 없음
  if (!info.hasFirmware) {
    return (
      <div className="container page" style={{ maxWidth: 500 }}>
        <div className="card text-center" style={{ padding: 48 }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div>
          <h2 style={{ marginBottom: 8 }}>펌웨어 파일 없음</h2>
          <p className="text-muted">판매자가 아직 펌웨어를 업로드하지 않았습니다.</p>
          <p className="text-muted" style={{ fontSize: 13 }}>판매자에게 문의하거나 환불을 요청하세요.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="container page" style={{ maxWidth: 600 }}>
      <div className="card">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
          <div style={{ fontSize: 36 }}>⚡</div>
          <div>
            <h2 style={{ marginBottom: 2 }}>{info.productName}</h2>
            <span className="text-muted" style={{ fontSize: 13 }}>
              {CHIP_LABELS[info.chipFamily] || info.chipFamily} · 만료: {new Date(info.expiresAt).toLocaleDateString('ko-KR')}
            </span>
          </div>
        </div>

        {flashDone ? (
          <div className="alert alert-success" style={{ textAlign: 'center', padding: 24 }}>
            <div style={{ fontSize: 32, marginBottom: 8 }}>🎉</div>
            <strong>플래시 완료!</strong>
            <p style={{ marginTop: 8, fontSize: 13 }}>펌웨어가 성공적으로 ESP32에 기록되었습니다.</p>
            <div style={{ marginTop: 16, display: 'flex', gap: 8, justifyContent: 'center' }}>
              <Link to="/dashboard/orders" className="btn btn-outline btn-sm">구매 내역</Link>
            </div>
          </div>
        ) : (
          <>
            <div className="alert alert-info" style={{ marginBottom: 20 }}>
              <strong>플래시 전 확인사항</strong>
              <ul style={{ marginTop: 8, paddingLeft: 16, fontSize: 13, lineHeight: 2 }}>
                <li>Chrome 또는 Edge 브라우저를 사용하고 있나요?</li>
                <li>ESP32를 USB 케이블로 PC에 연결했나요?</li>
                <li>이 토큰은 <strong>1회만</strong> 사용 가능합니다</li>
              </ul>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, padding: '24px 0' }}>
              <esp-web-install-button
                ref={installRef}
                manifest={manifestUrl}
                style={{ '--esp-tools-button-color': '#6366f1', '--esp-tools-button-text-color': '#fff' }}
              >
                <button slot="activate" className="btn btn-primary"
                  style={{ fontSize: 16, padding: '12px 32px' }}>
                  ⚡ ESP32 플래시 시작
                </button>
                <span slot="unsupported" style={{ color: 'var(--danger)', fontSize: 14 }}>
                  Chrome 또는 Edge 브라우저가 필요합니다
                </span>
              </esp-web-install-button>
              <p className="text-muted" style={{ fontSize: 12, textAlign: 'center' }}>
                버튼 클릭 후 팝업에서 ESP32 포트를 선택하세요
              </p>
            </div>

            <div className="divider" />
            <details style={{ fontSize: 13, color: 'var(--text2)' }}>
              <summary style={{ cursor: 'pointer', marginBottom: 8 }}>토큰 정보 (고급)</summary>
              <code style={{ wordBreak: 'break-all', display: 'block', background: 'var(--bg3)', padding: 8, borderRadius: 4 }}>
                {token}
              </code>
              <p style={{ marginTop: 8 }}>매니페스트 URL: <code style={{ fontSize: 11 }}>{manifestUrl}</code></p>
            </details>
          </>
        )}
      </div>
    </div>
  );
}
