"use client";

import IdleStage from "./stages/IdleStage";
import AnalyzingStage from "./stages/AnalyzingStage";
import DoneStage from "./stages/DoneStage";
import useDetectorPanel from "../../hooks/features/image-scan/useDetectorPanel";

function DetectorPanel() {
  const {
    stage,
    dragging,
    setDragging,
    previewUrl,
    result,
    scanLine,
    loadError,
    inputRef,
    onDrop,
    onPick,
    reset,
    primaryScore,
    verdict,
  } = useDetectorPanel();

  return (
    <div className="flex flex-col max-w-2xl w-full mx-auto font-dm order-1 lg:order-2">
      <div className="mb-4 flex flex-wrap items-center justify-center lg:justify-start gap-2">
        <button
          className={`rounded-full px-3.5 py-1.5  text-[11px] uppercase tracking-wide transition-colors border-link-1/50 bg-link-1/[0.07] text-link-1`}
        >
          <span
            className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full bg-link-1`}
          />
          AI Image Detector
        </button>
      </div>

      <div
        className={`glass-card relative overflow-hidden shadow-card transition-all duration-500 ${
          stage === "idle"
            ? "border-2 border-dashed border-link-1"
            : stage === "analyzing"
              ? ""
              : ""
        }`}
      >
        {stage === "idle" && (
          <IdleStage
            dragging={dragging}
            setDragging={setDragging}
            onDrop={onDrop}
            onPick={onPick}
            inputRef={inputRef}
            loadError={loadError}
          />
        )}

        {stage === "analyzing" && previewUrl && (
          <AnalyzingStage previewUrl={previewUrl} scanLine={scanLine} />
        )}

        {stage === "done" && result && previewUrl && (
          <DoneStage
            result={result}
            previewUrl={previewUrl}
            verdict={verdict}
            primaryScore={primaryScore}
            reset={reset}
          />
        )}
      </div>
    </div>
  );
}

export default DetectorPanel;