import Button from "../../ui/Button";
import Gauge from "../Gauge";
import Stamp from "../Stamp";

interface AnalysisResult {
  genAIScore: number;
}

interface Verdict {
  key: "synthetic" | "authentic" | "uncertain";
  label: string;
  colorClass: string;
}

interface DoneStageProps {
  result: AnalysisResult;
  previewUrl: string;
  verdict: Verdict;
  primaryScore: number;
  reset: () => void;
}

export default function DoneStage({
  result,
  previewUrl,
  verdict,
  primaryScore,
  reset,
}: DoneStageProps) {
  return (
    <div className="relative grid gap-6 p-6 sm:grid-cols-2 sm:p-7">
      <div className="flex flex-col gap-3 max-w-3xs mx-auto">
        <div className="relative overflow-hidden rounded-md ">
          <img
            src={previewUrl}
            alt="Inspected photo"
            className="w-full object-cover object-top"
          />
          <Stamp verdict={verdict.key} />
        </div>
        <Button
          className="gap-2"
          BtnInnerclassName="capitalize"
          onClick={reset}
        >
          Upload another
        </Button>
      </div>

      <div>
        <div className="mb-5 flex items-center justify-between gap-4">
          <div>
            <p className=" text-xs uppercase  text-text/90">Verdict</p>
            <p className={`font-heading text-xl italic ${verdict.colorClass}`}>
              {verdict.label}
            </p>
          </div>
        </div>
        <div className="flex gap-4 items-center mb-4">
          <Gauge value={primaryScore} colorClass={verdict.colorClass} />
          <div className="flex-1 divide-line  divide-y space-y-2">
            <div className="pb-2">
              <p className=" text-xs uppercase text-text/80">GenAI</p>
              <p className="text-sm text-heading font-semibold">
                {result.genAIScore}%
              </p>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}