frontend/src/main.jsx

import React from "react";
import { createRoot } from "react-dom/client";
import { Camera, ChevronLeft, ImagePlus, Save, Trash2 } from "lucide-react";
import { requestJson, getConfidenceState } from "./api/client";
import "./style.css";

const fallbackLabels = Array.from({ length: 26 }, (_, index) => String.fromCharCode(65 + index));

function navigate(path) {
  window.history.pushState({}, "", path);
  window.dispatchEvent(new PopStateEvent("popstate"));
}

function Link({ href, children, className, current, ...props }) {
  return (
    <a

      className={className}

      href={href}

      aria-current={current ? "page" : undefined}

      {...props}

      onClick={(event) => {

        event.preventDefault();

        navigate(href);

      }}

    >

      {children}

    </a>
  );
}

function Navbar({ path }) {
  return (
    <header className="navbar">

      <Link className="brand" href="/">

        <span className="brand-mark">ASL</span>

        <span>ASL Letter Board</span>

      </Link>

      <nav>

        <Link href="/" current={path === "/"}>홈</Link>

        <Link href="/classify" current={path === "/classify"}>분류</Link>

        <Link href="/learning" current={path === "/learning"}>단어 학습</Link>

        <Link href="/board" current={path === "/board"}>게시판</Link>

      </nav>

    </header>
  );
}

function Home() {
  const [intro, setIntro] = React.useState(() => sessionStorage.getItem("intro-done") === "1");

  function startIntro() {
    sessionStorage.setItem("intro-done", "1");
    setIntro(true);
  }

  return (
    <>

      {!intro && (

        <div className="intro-overlay">

          <div className="intro-content">

            <button className="intro-start-btn" type="button" onClick={startIntro}>시작</button>

          </div>

        </div>

      )}

      <section className={`home-hero ${intro ? "" : "is-hidden"}`}>

        <div>

          <p className="eyebrow">ASL A-Z Learning</p>

          <h1>ASL A-Z 수화 알파벳 분류 게시판</h1>

          <p>웹캠이나 이미지를 통해 ASL 알파벳 A부터 Z까지 대략적으로 구분하고, 결과를 게시판에 저장해 간단한 학습 기록처럼 관리할 수 있습니다.</p>

          <div className="home-actions">

            <Link className="button-link" href="/classify">분류 시작</Link>

            <Link className="button-link secondary-link" href="/learning">단어 학습하기</Link>

            <Link className="button-link secondary-link" href="/board">학습 기록 보기</Link>

          </div>

        </div>

      </section>

    </>
  );
}

function Classify() {
  const [file, setFile] = React.useState(null);
  const [preview, setPreview] = React.useState("");
  const [result, setResult] = React.useState(null);
  const [dragging, setDragging] = React.useState(false);
  const [stream, setStream] = React.useState(null);
  const videoRef = React.useRef(null);

  React.useEffect(() => () => stopCamera(), [stream]);

  function stopCamera() {
    if (!stream) return;
    stream.getTracks().forEach((track) => track.stop());
    setStream(null);
  }

  function selectFile(nextFile) {
    if (!nextFile) return;
    stopCamera();
    setFile(nextFile);
    const reader = new FileReader();
    reader.onload = () => setPreview(reader.result);
    reader.readAsDataURL(nextFile);
  }

  async function runPrediction(blob, filename = "capture.jpg") {
    const formData = new FormData();
    formData.append("file", blob, filename);

    try {
      const data = await requestJson("/api/v1/predict", { method: "POST", body: formData });
      setResult(data);
    } catch (error) {
      alert(error.message);
    }
  }

  async function submit(event) {
    event.preventDefault();
    if (!file) {
      alert("이미지를 선택해 주세요.");
      return;
    }
    await runPrediction(file, file.name);
  }

  async function toggleCamera() {
    if (stream) {
      stopCamera();
      return;
    }
    if (!navigator.mediaDevices?.getUserMedia) {
      alert("이 브라우저에서는 웹캠을 사용할 수 없습니다.");
      return;
    }
    try {
      const nextStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });
      setPreview("");
      setStream(nextStream);
      if (videoRef.current) {
        videoRef.current.srcObject = nextStream;
      }
    } catch {
      alert("웹캠 권한을 허용해 주세요.");
    }
  }

  React.useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
    }
  }, [stream]);

  async function captureCamera() {
    const video = videoRef.current;
    if (!stream || !video?.videoWidth) {
      alert("웹캠 화면을 불러오는 중입니다.");
      return;
    }
    const canvas = document.createElement("canvas");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext("2d").drawImage(video, 0, 0);
    const dataUrl = canvas.toDataURL("image/jpeg", 0.92);
    setPreview(dataUrl);
    stopCamera();

    canvas.toBlob(async (blob) => {
      if (!blob) {
        alert("웹캠 이미지를 캡처하지 못했습니다.");
        return;
      }
      const capturedFile = new File([blob], "webcam-capture.jpg", { type: "image/jpeg" });
      setFile(capturedFile);
      await runPrediction(blob, "webcam-capture.jpg");
    }, "image/jpeg", 0.92);
  }

  async function savePost() {
    if (!result) return;
    try {
      const post = await requestJson("/api/v1/posts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: `ASL ${result.predicted_class} 분류 결과`,
          image_url: preview,
          prediction: result.predicted_class,
          confidence: result.confidence,
        }),
      });
      navigate(`/post/${post.id}`);
    } catch {
      alert("학습 기록을 저장하지 못했습니다.");
    }
  }

  return (
    <>

      <section className="page-heading">

        <p className="eyebrow">ASL A-Z Classification</p>

        <h1>ASL 알파벳 이미지를 분류하세요</h1>

        <p>A부터 Z까지의 영어 수화 이미지를 업로드하거나 웹캠으로 촬영해 어떤 알파벳에 가까운지 간단히 구분합니다.</p>

      </section>

      <section className={`predict-layout ${result ? "has-result" : ""}`}>

        <section className="upload-box card">

          <div className="section-title">

            <h2>수화 이미지 입력</h2>

            <span>JPG, PNG · 최대 10MB</span>

          </div>

          <form onSubmit={submit}>

            <label

              className={`upload-area ${preview ? "has-image" : ""} ${stream ? "is-camera" : ""} ${dragging ? "is-dragging" : ""}`}

              onDragEnter={(event) => {

                event.preventDefault();

                setDragging(true);

              }}

              onDragOver={(event) => event.preventDefault()}

              onDragLeave={(event) => {

                event.preventDefault();

                setDragging(false);

              }}

              onDrop={(event) => {

                event.preventDefault();

                setDragging(false);

                const dropped = event.dataTransfer.files[0];

                if (dropped?.type.startsWith("image/")) {

                  selectFile(dropped);

                }

              }}

            >

              <input type="file" accept="image/*" onChange={(event) => selectFile(event.target.files[0])} />

              {stream && <video ref={videoRef} autoPlay playsInline muted />}

              {preview && <img id="preview" src={preview} alt="" />}

              {!preview && !stream && <span><ImagePlus size={22} /> ASL A-Z 이미지 선택 또는 드래그</span>}

            </label>

            <div className="webcam-controls">

              <button className="secondary-btn" type="button" onClick={toggleCamera}>

                <Camera size={18} /> {stream ? "웹캠 끄기" : "웹캠 시작"}

              </button>

              {stream && <button type="button" onClick={captureCamera}>촬영 후 분석</button>}

            </div>

            <button type="submit">알파벳 분류</button>

          </form>

        </section>

        {result && (

          <section className="card result-card">

            <div className="section-title">

              <h2>구분 결과</h2>

              <span>Top 5</span>

            </div>

            <div className="result-summary">

              <span>{result.predicted_class}</span>

              <strong>신뢰도 {(result.confidence * 100).toFixed(2)}%</strong>

            </div>

            <ul className="score-list">

              {result.top_k.map((item) => (

                <li key={item.label}>

                  <span>{item.label}</span>

                  <span className="score-track"><span className="score-bar" style={{ width: `${(item.score * 100).toFixed(2)}%` }} /></span>

                  <strong>{(item.score * 100).toFixed(1)}%</strong>

                </li>

              ))}

            </ul>

            <button type="button" onClick={savePost}><Save size={18} /> 학습 기록으로 저장</button>

          </section>

        )}

      </section>

    </>
  );
}

function Board() {
  const [labels, setLabels] = React.useState(fallbackLabels);
  const [posts, setPosts] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const [category, setCategory] = React.useState(() => new URLSearchParams(window.location.search).get("category") || "");
  const limit = 6;

  React.useEffect(() => {
    requestJson("/api/v1/predict/labels")
      .then((data) => setLabels(Array.isArray(data.classes) && data.classes.length ? data.classes : fallbackLabels))
      .catch(() => setLabels(fallbackLabels));
  }, []);

  React.useEffect(() => {
    loadPosts(0, true);
  }, [category]);

  async function loadPosts(skip = posts.length, reset = false) {
    const params = new URLSearchParams({ skip, limit });
    if (category) params.set("category", category);
    const data = await requestJson(`/api/v1/posts?${params.toString()}`);
    setPosts((current) => (reset ? data.items : [...current, ...data.items]));
    setTotal(data.total);
  }

  return (
    <>

      <section className="page-heading compact">

        <p className="eyebrow">Learning Archive</p>

        <h1>ASL A-Z 학습 기록</h1>

        <p>저장된 구분 결과를 A-Z 알파벳별로 확인하고, 제목 수정과 삭제를 할 수 있습니다.</p>

      </section>

      <section className="toolbar">

        <Link className="button-link" href="/classify">새 알파벳 분류</Link>

        <div className="alphabet-tabs" aria-label="알파벳 필터">

          {["", ...labels].map((label) => (

            <button

              key={label || "all"}

              type="button"

              className={`tab-chip ${category === label ? "is-active" : ""}`}

              onClick={() => {

                setCategory(label);

                window.history.replaceState({}, "", label ? `/board?category=${encodeURIComponent(label)}` : "/board");

              }}

            >

              {label || "전체"}

            </button>

          ))}

        </div>

      </section>

      <section className="post-grid">

        {posts.length === 0 && <p className="empty-state">아직 저장된 ASL 학습 기록이 없습니다. 분류 화면에서 A-Z 결과를 저장해 주세요.</p>}

        {posts.map((post, index) => {

          const state = getConfidenceState(post.confidence);

          return (

            <Link className="post-card" href={`/post/${post.id}`} key={post.id} style={{ "--card-delay": `${index * 0.05}s` }}>

              <img src={post.image_url} alt={post.title} />

              <div className="post-body">

                <div className="post-letter-row">

                  <strong className="post-letter">{post.prediction}</strong>

                  <span className={`confidence-badge ${state.className}`}>{state.label}</span>

                </div>

                <h3>{post.title}</h3>

                <div className="post-meta">

                  <span className="post-confidence">{(post.confidence * 100).toFixed(1)}%</span>

                  <span className="post-label">ASL {post.prediction}</span>

                </div>

                <span className="detail-link">상세 보기</span>

              </div>

            </Link>

          );

        })}

        {posts.length < total && <button id="loadMoreBtn" type="button" onClick={() => loadPosts()}>더 보기</button>}

      </section>

    </>
  );
}

function PostDetail({ id }) {
  const [post, setPost] = React.useState(null);
  const [notFound, setNotFound] = React.useState(false);
  const [editing, setEditing] = React.useState(false);
  const [title, setTitle] = React.useState("");

  React.useEffect(() => {
    requestJson(`/api/v1/posts/${id}`)
      .then((data) => {
        setPost(data);
        setTitle(data.title);
      })
      .catch(() => setNotFound(true));
  }, [id]);

  async function saveTitle() {
    const nextTitle = title.trim();
    if (!nextTitle) {
      alert("제목을 입력해 주세요.");
      return;
    }
    const data = await requestJson(`/api/v1/posts/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: nextTitle }),
    });
    setPost(data);
    setTitle(data.title);
    setEditing(false);
  }

  async function deletePost() {
    if (!confirm("게시글을 삭제할까요?")) return;
    await requestJson(`/api/v1/posts/${id}`, { method: "DELETE" });
    navigate("/board");
  }

  if (notFound) return <div className="empty-state">학습 기록을 찾을 수 없습니다.</div>;
  if (!post) return <div className="empty-state">불러오는 중입니다.</div>;
  const state = getConfidenceState(post.confidence);

  return (
    <main className="detail-shell">

      <article className="detail-card card">

        <img className="detail-image" src={post.image_url} alt={post.title} />

        <div className="detail-body">

          <p className="eyebrow">Saved ASL Prediction</p>

          <div className="detail-title-row">

            <h1>{post.title}</h1>

            <div className="detail-actions">

              <button className="secondary-btn" type="button" onClick={() => setEditing(true)}>수정</button>

              <button className="danger-btn" type="button" onClick={deletePost}><Trash2 size={18} /> 삭제</button>

            </div>

          </div>

          {editing && (

            <div className="detail-title-editor">

              <input className="title-input" value={title} aria-label="게시글 제목" onChange={(event) => setTitle(event.target.value)} />

              <button type="button" onClick={saveTitle}>저장</button>

              <button className="secondary-btn" type="button" onClick={() => setEditing(false)}>취소</button>

            </div>

          )}

          <div className="result-row"><span>예측 알파벳</span><strong>{post.prediction}</strong></div>

          <div className="result-row"><span>신뢰도</span><strong>{(post.confidence * 100).toFixed(1)}%</strong></div>

          <div className="result-row"><span>판단 상태</span><strong className={`confidence-badge ${state.className}`}>{state.label}</strong></div>

          <div className="detail-link-row">

            <Link className="button-link secondary-link" href={`/board?category=${encodeURIComponent(post.prediction)}`}>같은 알파벳 보기</Link>

            <Link className="button-link" href="/classify">다시 분류하기</Link>

          </div>

        </div>

      </article>

    </main>
  );
}

function LoveLearning() {
  const [stream, setStream] = React.useState(null);
  const [word, setWord] = React.useState("LOVE");
  const [activeIndex, setActiveIndex] = React.useState(0);
  const videoRef = React.useRef(null);
  const letters = React.useMemo(() => word.toUpperCase().replace(/[^A-Z]/g, "").split(""), [word]);
  const currentIndex = letters.length > 0 ? Math.min(activeIndex, letters.length - 1) : 0;
  const activeLetter = letters[currentIndex] || "";

  async function startPractice() {
    try {
      const nextStream = await navigator.mediaDevices.getUserMedia({ video: true });
      setStream(nextStream);
      if (videoRef.current) videoRef.current.srcObject = nextStream;
    } catch {
      alert("웹캠 권한을 허용해 주세요.");
    }
  }

  React.useEffect(() => {
    setActiveIndex(0);
  }, [word]);

  React.useEffect(() => {
    if (videoRef.current && stream) videoRef.current.srcObject = stream;
    return () => stream?.getTracks().forEach((track) => track.stop());
  }, [stream]);

  return (
    <>

      <section className="page-heading">

        <p className="eyebrow">Word Learning</p>

        <h1>단어 ASL 알파벳 학습</h1>

        <p>원하는 영어 단어를 입력하고 알파벳별 ASL 손 모양을 순서대로 확인하세요.</p>

      </section>

      <section className="word-learning">

        <div className="word-input-panel">

          <label htmlFor="wordInput">학습할 단어</label>

          <input

            id="wordInput"

            value={word}

            maxLength={18}

            placeholder="예: LOVE, APPLE, HELLO"

            onChange={(event) => setWord(event.target.value)}

          />

        </div>



        <div className="love-letters">

          {letters.map((letter, index) => (

            <button

              type="button"

              className={`letter letter-choice ${index === currentIndex ? "is-active" : ""}`}

              key={`${letter}-${index}`}

              onClick={() => setActiveIndex(index)}

            >

              <h3>{letter}</h3>

              <img

                src={`/test-images/${letter}_test.jpg`}

                alt={`${letter} 손 모양`}

                onError={(event) => { event.currentTarget.src = "/static/images/placeholder.jpg"; }}

              />

              <p>{index + 1}번째 글자</p>

            </button>

          ))}

        </div>



        {letters.length > 0 ? (

          <div className="practice-compare">

            <div className="letter focus-letter">

              <span className="letter-step">{currentIndex + 1} / {letters.length}</span>

              <h3>{activeLetter}</h3>

              <img

                src={`/test-images/${activeLetter}_test.jpg`}

                alt={`${activeLetter} 손 모양`}

                onError={(event) => { event.currentTarget.src = "/static/images/placeholder.jpg"; }}

              />

              <p>{activeLetter} 손 모양을 웹캠 거울로 비교해보세요.</p>

              <div className="letter-controls">

                <button type="button" className="secondary-btn" onClick={() => setActiveIndex(Math.max(0, currentIndex - 1))} disabled={currentIndex === 0}>

                  <ChevronLeft size={18} /> 이전

                </button>

                <button type="button" onClick={() => setActiveIndex(Math.min(letters.length - 1, currentIndex + 1))} disabled={currentIndex === letters.length - 1}>

                  다음

                </button>

              </div>

            </div>

            <div className="practice">

              <h3>거울 연습</h3>

              <p>판정 없이 웹캠 화면으로 내 손 모양을 샘플과 직접 비교합니다.</p>

              <button type="button" onClick={startPractice}><Camera size={18} /> 웹캠 켜기</button>

              <video ref={videoRef} width="640" height="480" autoPlay playsInline muted />

              <canvas width="640" height="480" />

            </div>

          </div>

        ) : (

          <p className="empty-state">A-Z 영어 알파벳으로 단어를 입력해 주세요.</p>

        )}

      </section>

      <footer><p>&copy; 2026 ASL Learning Board</p></footer>

    </>
  );
}

function WebcamTest() {
  const [cameras, setCameras] = React.useState([]);
  const [selectedDeviceId, setSelectedDeviceId] = React.useState("");
  const [status, setStatus] = React.useState("대기 중");
  const [stream, setStream] = React.useState(null);
  const videoRef = React.useRef(null);

  async function loadCameras() {
    if (!navigator.mediaDevices?.enumerateDevices) {
      setCameras([]);
      setStatus("장치 목록을 사용할 수 없습니다.");
      return [];
    }
    const devices = await navigator.mediaDevices.enumerateDevices();
    const nextCameras = devices.filter((device) => device.kind === "videoinput");
    setCameras(nextCameras);
    if (!selectedDeviceId && nextCameras[0]) {
      setSelectedDeviceId(nextCameras[0].deviceId);
    }
    return nextCameras;
  }

  function stopCamera() {
    if (stream) {
      stream.getTracks().forEach((track) => track.stop());
    }
    if (videoRef.current) {
      videoRef.current.srcObject = null;
    }
    setStream(null);
    setStatus("중지됨");
  }

  async function startCamera(mode) {
    stopCamera();
    if (!navigator.mediaDevices?.getUserMedia) {
      setStatus("실패: 이 브라우저에서 getUserMedia를 지원하지 않습니다.");
      return;
    }

    try {
      const availableCameras = await loadCameras();
      const useSafeMode = mode === "safe";
      const video = {
        width: useSafeMode ? { ideal: 640 } : { ideal: 1280 },
        height: useSafeMode ? { ideal: 480 } : { ideal: 720 },
      };
      if (selectedDeviceId) {
        video.deviceId = { exact: selectedDeviceId };
      }

      const nextStream = await navigator.mediaDevices.getUserMedia({ video, audio: false });
      setStream(nextStream);
      if (videoRef.current) {
        videoRef.current.srcObject = nextStream;
      }
      const track = nextStream.getVideoTracks()[0];
      const settings = track.getSettings();
      setStatus([
        "성공: 웹캠 스트림이 열렸습니다.",
        `카메라 개수: ${availableCameras.length}`,
        `사용 중: ${track.label || "이름 확인 불가"}`,
        `해상도: ${settings.width || "?"} x ${settings.height || "?"}`,
      ].join("\n"));
      await loadCameras();
    } catch (error) {
      setStatus([
        "실패: 웹캠을 열 수 없습니다.",
        `이름: ${error.name}`,
        `메시지: ${error.message}`,
        "",
        "확인:",
        "1. Windows 카메라 앱, Zoom, Teams, OBS, 다른 브라우저 탭을 모두 종료",
        "2. USB 웹캠이면 뺐다가 다시 연결",
        "3. 저해상도 테스트 버튼으로 다시 시도",
      ].join("\n"));
    }
  }

  React.useEffect(() => {
    loadCameras().catch((error) => setStatus(`장치 목록을 불러오지 못했습니다: ${error.message}`));
    return () => stream?.getTracks().forEach((track) => track.stop());
  }, []);

  return (
    <main className="webcam-test-shell">

      <section className="page-heading compact">

        <p className="eyebrow">Webcam Test</p>

        <h1>웹캠 테스트</h1>

      </section>

      <div className="toolbar webcam-test-toolbar">

        <select value={selectedDeviceId} onChange={(event) => setSelectedDeviceId(event.target.value)}>

          {cameras.length === 0 && <option>카메라 없음</option>}

          {cameras.map((camera, index) => (

            <option value={camera.deviceId} key={camera.deviceId}>{camera.label || `카메라 ${index + 1}`}</option>

          ))}

        </select>

        <button type="button" onClick={() => startCamera("normal")}>웹캠 테스트</button>

        <button className="secondary-btn" type="button" onClick={() => startCamera("safe")}>저해상도 테스트</button>

        <button className="secondary-btn" type="button" onClick={stopCamera}>중지</button>

      </div>

      <video className="webcam-test-video" ref={videoRef} autoPlay playsInline muted />

      <pre className="webcam-test-status">{status}</pre>

    </main>
  );
}

function App() {
  const [path, setPath] = React.useState(window.location.pathname);

  React.useEffect(() => {
    const onPopState = () => setPath(window.location.pathname);
    window.addEventListener("popstate", onPopState);
    return () => window.removeEventListener("popstate", onPopState);
  }, []);

  const postMatch = path.match(/^\/post\/(\d+)$/);

  return (
    <>

      <Navbar path={path} />

      {path === "/" && <Home />}

      {path === "/classify" && <Classify />}

      {path === "/board" && <Board />}

      {path === "/learning" && <LoveLearning />}

      {path === "/webcam-test" && <WebcamTest />}

      {postMatch && <PostDetail id={postMatch[1]} />}

      {!["/", "/classify", "/board", "/learning", "/webcam-test"].includes(path) && !postMatch && (

        <div className="empty-state">

          <p>페이지를 찾을 수 없습니다.</p>

          <button type="button" onClick={() => navigate("/")}>

            <ChevronLeft size={18} /> 홈으로

          </button>

        </div>

      )}

    </>
  );
}

createRoot(document.getElementById("root")).render(<App />);