import { useEffect, useState } from "react";
import { invoke } from "@tauri-apps/api/core";
import { useToast } from "./Toast";

export function FirstRunWizard({ onComplete }: { onComplete: () => void }) {
  const [step, setStep] = useState("welcome");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [models, setModels] = useState<string[]>([]);
  const [selectedModel, setSelectedModel] = useState<string>("");
  // ponytail: wizard defaults to local Ollama; no API-key UI here (Settings covers remote).
  const apiUrl = "http://localhost:11434";
  const apiKey = "";
  const { addToast } = useToast();

  useEffect(() => {
    if (step === "check") {
      checkOllama();
    }
  }, [step]);

  async function checkOllama() {
    setLoading(true);
    setError("");
    try {
      // Test connection to the default Ollama URL
      const result = await invoke<{ ok: boolean; models: string[]; error: string }>(
        "test_connection",
        { config: { api_url: apiUrl, api_key: apiKey, model: "", temperature: 0.7, max_tokens: 512, top_p: 0.9, image_api_url: "", embed_model: "" } }
      );
      if (result.ok) {
        setModels(result.models);
        setStep("model");
      } else {
        setError(result.error || "Failed to connect to Ollama");
        setStep("error");
      }
    } catch (e) {
      setError(String(e));
      setStep("error");
    }
    setLoading(false);
  }

  async function pullModel(model: string) {
    setLoading(true);
    setError("");
    try {
      // We don't have a direct pull command, but we can suggest the user to run `ollama pull` in terminal.
      // For now, we'll just set the model in config and hope it exists.
      // Alternatively, we could invoke a generate command to trigger a pull? Not sure.
      // We'll just set the config and complete.
      await invoke("set_llm_config", {
        config: {
          api_url: apiUrl,
          api_key: apiKey,
          model: model,
          temperature: 0.7,
          max_tokens: 512,
          top_p: 0.9,
          image_api_url: "http://localhost:1234",
          embed_model: "nomic-embed-text",
        }
      });
      addToast(`Model ${model} selected. You may need to run 'ollama pull ${model}' if not already downloaded.`, "success");
      setStep("done");
    } catch (e) {
      setError(String(e));
      setStep("error");
    }
    setLoading(false);
  }

  function skip() {
    // Skip wizard and go to settings
    onComplete();
  }

  function back() {
    if (step === "model") {
      setStep("welcome");
    } else if (step === "error") {
      setStep("welcome");
    } else if (step === "done") {
      // Should not happen
    }
  }

  async function handleSubmit() {
    if (step === "welcome") {
      setStep("check");
      return;
    }
    if (step === "model") {
      if (!selectedModel) {
        setError("Please select a model");
        return;
      }
      await pullModel(selectedModel);
      return;
    }
    if (step === "done") {
      onComplete();
      return;
    }
  }

  if (step === "welcome") {
    return (
      <div className="glass-card p-6 max-w-md w-full mx-auto">
        <h2 className="font-heading text-[var(--color-gold-bright)] text-lg font-semibold mb-4">
          Welcome to DM-Pal
        </h2>
        <p className="text-[var(--color-text-primary)] text-sm mb-4">
          To generate content, DM-Pal needs a language model. Let's set up a local model using Ollama (recommended for privacy and offline use).
        </p>
        <div className="flex flex-col gap-3">
          <button
            onClick={() => setStep("check")}
            disabled={loading}
            className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
          >
            {loading ? "Checking…" : "Check for Ollama"}
          </button>
          <button
            onClick={skip}
            className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-4 py-2 text-sm hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer"
          >
            Skip for now (go to Settings)
          </button>
        </div>
        {error && (
          <p className="text-[var(--color-danger)] text-sm mt-4">{error}</p>
        )}
      </div>
    );
  }

  if (step === "check") {
    return (
      <div className="glass-card p-6 max-w-md w-full mx-auto">
        <h2 className="font-heading text-[var(--color-gold-bright)] text-lg font-semibold mb-4">
          Checking for Ollama
        </h2>
        <p className="text-[var(--color-text-primary)] text-sm mb-4">
          We're checking if Ollama is running at {apiUrl}...
        </p>
        {loading ? (
          <div className="flex flex-col items-center gap-2">
            <div className="w-4 h-4 border-2 border-[var(--color-gold-bright)] border-t-transparent rounded-full animate-spin" />
            <p className="text-[var(--color-text-dim)] text-xs">Checking…</p>
          </div>
        ) : (
          <>
            {error ? (
              <p className="text-[var(--color-danger)] text-sm">{error}</p>
            ) : (
              <p className="text-[var(--color-success)] text-sm">Ollama is running!</p>
            )}
            <div className="flex flex-col gap-3 mt-6">
              <button
                onClick={() => setStep("model")}
                disabled={loading}
                className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
              >
                Continue to model selection
              </button>
              <button
                onClick={skip}
                className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-4 py-2 text-sm hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer"
              >
                Skip for now (go to Settings)
              </button>
            </div>
          </>
        )}
      </div>
    );
  }

  if (step === "model") {
    return (
      <div className="glass-card p-6 max-w-md w-full mx-auto">
        <h2 className="font-heading text-[var(--color-gold-bright)] text-lg font-semibold mb-4">
          Select a Model
        </h2>
        <p className="text-[var(--color-text-primary)] text-sm mb-4">
          Ollama is running. Choose a model to use for text generation.
        </p>
        <div className="flex flex-col gap-3">
          <div className="flex flex-col gap-1">
            <label className="text-[var(--color-text-secondary)] text-xs font-medium">Model</label>
            <select
              value={selectedModel}
              onChange={(e) => setSelectedModel(e.target.value)}
              className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] text-xs cursor-pointer"
            >
              {models.map((m) => (
                <option key={m} value={m}>
                  {m}
                  {m === "llama3.2" && " (recommended)"}
                </option>
              ))}
            </select>
          </div>
          <div className="flex flex-col gap-3">
            <button
              onClick={handleSubmit}
              disabled={loading || !selectedModel}
              className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
            >
              {loading ? "Setting model…" : "Set Model"}
            </button>
            <button
              onClick={back}
              className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-4 py-2 text-sm hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer"
            >
              Back
            </button>
            <button
              onClick={skip}
              className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-4 py-2 text-sm hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer"
            >
              Skip for now (go to Settings)
            </button>
          </div>
        </div>
        {error && (
          <p className="text-[var(--color-danger)] text-sm mt-4">{error}</p>
        )}
        <p className="text-[var(--color-text-dim)] text-sm mt-4">
          If you don't see your model, you may need to download it first. In a terminal, run:{' '}
          <code className="font-mono text-[var(--color-gold-bright)]">ollama pull llama3.2</code>
        </p>
      </div>
    );
  }

  if (step === "done") {
    return (
      <div className="glass-card p-6 max-w-md w-full mx-auto">
        <h2 className="font-heading text-[var(--color-gold-bright)] text-lg font-semibold mb-4">
          Setup Complete
        </h2>
        <p className="text-[var(--color-text-primary)] text-sm mb-4">
          DM-Pal is now configured to use {selectedModel} for text generation.
          Image generation runs via a stable-diffusion.cpp `sd-server` at http://localhost:1234 (cross-platform).
          Embedding model for lore search is set to nomic-embed-text.
        </p>
        <div className="flex flex-col gap-3">
          <button
            onClick={() => onComplete()}
            className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer"
          >
            Go to Dashboard
          </button>
          <button
            onClick={() => {
              // Go to settings to review
              // We'll just complete and let the user navigate to settings if they want
              onComplete();
            }}
            className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-4 py-2 text-sm hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer"
          >
            Review Settings
          </button>
        </div>
      </div>
    );
  }

  if (step === "error") {
    return (
      <div className="glass-card p-6 max-w-md w-full mx-auto">
        <h2 className="font-heading text-[var(--color-gold-bright)] text-lg font-semibold mb-4">
          Error
        </h2>
        <p className="text-[var(--color-text-primary)] text-sm mb-4">
          {error}
        </p>
        <div className="flex flex-col gap-3">
          <button
            onClick={() => setStep("welcome")}
            className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer"
          >
            Try Again
          </button>
          <button
            onClick={skip}
            className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-4 py-2 text-sm hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer"
          >
            Skip for now (go to Settings)
          </button>
        </div>
      </div>
    );
  }

  return null;
}