import { Button } from "@cv/ui";
import { useState } from "react";
import { usePlatformCapabilitiesQuery } from "@/generated/graphql";
import type { ParsedCVDataWithResolution } from "../schemas/draft.schema";
import { FileUploadStep } from "./FileUploadStep";
import { OnboardingMethodSelector } from "./OnboardingMethodSelector";
import { ReviewStep } from "./ReviewStep";

type SubStep = "select" | "file-upload" | "review";

interface Props {
  onComplete: () => void;
  onSkip: () => void;
}

export const ImportStep = ({ onComplete, onSkip }: Props) => {
  const [subStep, setSubStep] = useState<SubStep>("select");
  const [parsedData, setParsedData] =
    useState<ParsedCVDataWithResolution | null>(null);
  const { data: capabilities } = usePlatformCapabilitiesQuery();

  const aiParsing = capabilities?.platformCapabilities?.aiParsing ?? false;

  const handleMethodSelect = (method: string) => {
    if (method === "manual") {
      onSkip();
      return;
    }
    if (method === "file-upload") {
      setSubStep("file-upload");
    }
  };

  const handleFileParsed = (data: ParsedCVDataWithResolution) => {
    setParsedData(data);
    setSubStep("review");
  };

  if (subStep === "file-upload") {
    return (
      <div className="space-y-6">
        <div>
          <h2 className="text-2xl font-bold text-ctp-text">Upload Your CV</h2>
          <p className="text-ctp-subtext0 mt-1">
            We'll extract your work history and education automatically.
          </p>
        </div>
        <FileUploadStep
          onComplete={handleFileParsed}
          onBack={() => setSubStep("select")}
        />
      </div>
    );
  }

  if (subStep === "review" && parsedData) {
    return (
      <div className="space-y-6">
        <ReviewStep
          parsedData={parsedData}
          onComplete={onComplete}
          onBack={() => setSubStep("file-upload")}
          onDataChange={setParsedData}
        />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-start">
        <div>
          <h2 className="text-2xl font-bold text-ctp-text">Import Your Data</h2>
          <p className="text-ctp-subtext0 mt-1">
            Jump-start your CV by importing existing data, or add everything
            manually in the next steps.
          </p>
        </div>
        <button
          type="button"
          onClick={onSkip}
          className="text-sm text-ctp-subtext0 hover:text-ctp-text underline shrink-0"
        >
          Skip for now
        </button>
      </div>

      <OnboardingMethodSelector
        onMethodSelect={handleMethodSelect}
        aiPreference={aiParsing ? ("PLATFORM" as never) : ("NO_AI" as never)}
      />

      <div className="flex justify-center pt-4">
        <Button variant="ghost" onClick={onSkip}>
          Skip — I'll add my data manually
        </Button>
      </div>
    </div>
  );
};