import { BuildDownloadButton } from "@/components/BuildDownloadButton"
import { Button } from "@/components/ui/button"
import { getImplicitDependencies, humanizeStatus } from "@/lib/utils"
import { useMutation, useQuery } from "convex/react"
import { AlertCircle, ArrowLeft, CheckCircle, Loader2, Share2, XCircle } from "lucide-react"
import { useState } from "react"
import { toast } from "sonner"
import { usePageContext } from "vike-react/usePageContext"
import { navigate } from "vike/client/router"
import { TARGETS } from "../../../constants/targets"
import { api } from "../../../convex/_generated/api"
import { ArtifactType } from "../../../convex/builds"
import modulesData from "../../../convex/modules.json"
import registryData from "../../../public/registry.json"

export default function BuildProgress() {
  const pageContext = usePageContext()
  const buildHash = pageContext.routeParams?.buildHash as string | undefined
  const build = useQuery(api.builds.getByHash, buildHash ? { buildHash } : "skip")
  const isAdmin = useQuery(api.admin.isAdmin)
  const retryBuild = useMutation(api.admin.retryBuild)
  const [shareUrlCopied, setShareUrlCopied] = useState(false)

  if (!buildHash) {
    return (
      <div className="min-h-screen bg-slate-950 text-white p-8">
        <div className="max-w-4xl mx-auto">
          <p className="text-slate-300">
            Build hash missing.{" "}
            <a href="/builds/new" className="text-cyan-400">
              Start a new build
            </a>
            .
          </p>
        </div>
      </div>
    )
  }

  if (build === undefined) {
    return (
      <div className="min-h-screen bg-slate-950 text-white p-8 flex items-center justify-center">
        <Loader2 className="w-8 h-8 animate-spin text-cyan-500" />
      </div>
    )
  }

  if (!build) {
    return (
      <div className="min-h-screen bg-slate-950 text-white p-8">
        <div className="max-w-4xl mx-auto space-y-4">
          <a href={`/builds/new/${buildHash}`} className="inline-flex items-center text-slate-400 hover:text-white">
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Quick Build
          </a>
          <div className="bg-slate-900/60 border border-slate-800 rounded-lg p-6">
            <p className="text-slate-300">
              No build found for hash <span className="font-mono">{buildHash}</span>
            </p>
          </div>
        </div>
      </div>
    )
  }

  const targetMeta = build.config.target ? TARGETS[build.config.target] : undefined
  const targetLabel = targetMeta?.name ?? build.config.target
  const status = build.status || "queued"

  const getStatusIcon = () => {
    if (status === "success") {
      return <CheckCircle className="w-6 h-6 text-green-500" />
    }
    if (status === "failure") {
      return <XCircle className="w-6 h-6 text-red-500" />
    }
    return <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />
  }

  const getStatusColor = () => {
    if (status === "success") return "text-green-400"
    if (status === "failure") return "text-red-400"
    return "text-blue-400"
  }

  const githubActionUrl =
    build.githubRunId && build.githubRunId > 0
      ? `https://github.com/MeshEnvy/mesh-forge/actions/runs/${build.githubRunId}`
      : null

  const shareUrl = `${window.location.origin}/builds/new/${build.buildHash}`

  const handleShare = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl)
      setShareUrlCopied(true)
      toast.success("Share link copied to clipboard")
      setTimeout(() => setShareUrlCopied(false), 2000)
    } catch {
      toast.error("Failed to copy link", {
        description: "Please copy the URL manually",
      })
    }
  }

  // Compute build flags from config (same logic as computeFlagsFromConfig in convex/builds.ts)
  const computeFlagsFromConfig = (config: typeof build.config): string => {
    return Object.keys(config.modulesExcluded)
      .sort()
      .filter(module => config.modulesExcluded[module])
      .map((moduleExcludedName: string) => `-D${moduleExcludedName}=1`)
      .join(" ")
  }

  // Generate GitHub discussion URL with prefilled body
  const generateDiscussionUrl = (): string => {
    const flags = computeFlagsFromConfig(build.config)
    const plugins = build.config.pluginsEnabled?.join(", ") || "(none)"
    const timestamp = new Date(build.startedAt).toISOString()
    const githubRunLink = githubActionUrl ? `[View run](${githubActionUrl})` : "(not available)"
    const buildPageUrl = `${window.location.origin}/builds/${build.buildHash}`

    // Format plugins as +plugin@version
    const formattedPlugins =
      build.config.pluginsEnabled
        ?.map(plugin => {
          // Plugin might be "slug@version" or just "slug"
          return plugin.includes("@") ? `+${plugin}` : `+${plugin}`
        })
        .join(" ") || ""

    const bracketContent = [
      build.config.target,
      `v${build.config.version}`,
      ...(formattedPlugins ? [formattedPlugins] : []),
    ].join(" ")

    const discussionTitle = `Build ${build.status === "failure" ? "Failed" : "Issue"}: ${targetLabel} [${bracketContent}]`

    const discussionBody = `## Build ${build.status === "failure" ? "Failed" : "Information"}

**Build Hash**: \`${build.buildHash}\`
**Target Board**: ${build.config.target}
**Firmware Version**: ${build.config.version}
**Build Flags**: ${flags || "(none)"}
**Plugins**: ${plugins}
**Build Timestamp**: ${timestamp}

**Build Page**: [View build page](${buildPageUrl})
**GitHub Run**: ${githubRunLink}

## Additional Information
(Please add any additional details about the issue here)`

    const baseUrl = "https://github.com/MeshEnvy/mesh-forge/discussions/new"
    const params = new URLSearchParams({
      category: "q-a",
      title: discussionTitle,
      body: discussionBody,
    })

    return `${baseUrl}?${params.toString()}`
  }

  const handleReportIssue = () => {
    window.open(generateDiscussionUrl(), "_blank", "noopener,noreferrer")
  }

  const handleRetry = async () => {
    if (!build?._id) return
    try {
      await retryBuild({ buildId: build._id })
      toast.success("Build retry initiated", {
        description: "The build has been queued with the latest YAML.",
      })
    } catch (error) {
      toast.error("Failed to retry build", {
        description: String(error),
      })
    }
  }

  const getStatusBadge = (status: string) => {
    const statusConfig = {
      success: {
        bg: "bg-green-500/20",
        text: "text-green-400",
        label: "Success",
      },
      failure: { bg: "bg-red-500/20", text: "text-red-400", label: "Failed" },
      queued: {
        bg: "bg-yellow-500/20",
        text: "text-yellow-400",
        label: "Queued",
      },
    }
    const config = statusConfig[status as keyof typeof statusConfig] || {
      bg: "bg-slate-500/20",
      text: "text-slate-400",
      label: status,
    }
    return <span className={`px-2 py-1 ${config.bg} ${config.text} rounded text-sm`}>{config.label}</span>
  }

  const formatDate = (timestamp: number) => {
    return new Date(timestamp).toLocaleString()
  }

  // Get excluded modules
  const excludedModules = modulesData.modules.filter(module => build.config.modulesExcluded[module.id] === true)

  // Get explicitly selected plugins from stored config
  // The stored config only contains explicitly selected plugins (not resolved dependencies)
  const explicitPluginSlugs = (build.config.pluginsEnabled || []).map(pluginId => {
    // Extract slug from "slug@version" format if present
    return pluginId.includes("@") ? pluginId.split("@")[0] : pluginId
  })

  // Get implicit dependencies (dependencies that are not explicitly selected)
  const implicitDeps = getImplicitDependencies(
    explicitPluginSlugs,
    registryData as Record<string, { dependencies?: Record<string, string> }>
  )

  // Separate explicit and implicit plugins
  const explicitPlugins: Array<{
    id: string
    name: string
    description: string
    version: string
  }> = []
  const implicitPlugins: Array<{
    id: string
    name: string
    description: string
    version: string
  }> = []

  // Process explicitly selected plugins
  ;(build.config.pluginsEnabled || []).forEach(pluginId => {
    // Extract slug from "slug@version" format if present
    const slug = pluginId.includes("@") ? pluginId.split("@")[0] : pluginId
    const pluginData = (registryData as Record<string, { name: string; description: string; version: string }>)[slug]
    const pluginInfo = {
      id: slug,
      name: pluginData?.name || slug,
      description: pluginData?.description || "",
      version: pluginId.includes("@") ? pluginId.split("@")[1] : pluginData?.version || "",
    }
    explicitPlugins.push(pluginInfo)
  })

  // Process implicit dependencies (resolved but not in stored config)
  for (const slug of implicitDeps) {
    const pluginData = (registryData as Record<string, { name: string; description: string; version: string }>)[slug]
    if (pluginData) {
      implicitPlugins.push({
        id: slug,
        name: pluginData.name || slug,
        description: pluginData.description || "",
        version: pluginData.version || "",
      })
    }
  }

  return (
    <div className="min-h-screen bg-slate-950 text-white p-8">
      <div className="max-w-4xl mx-auto space-y-6">
        <div className="flex items-center justify-between flex-wrap gap-4">
          <a
            href={`/builds/new/${build.buildHash}`}
            className="inline-flex items-center text-slate-400 hover:text-white"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Quick Build
          </a>
        </div>

        <div className="bg-slate-900/60 rounded-lg border border-slate-800 p-6 space-y-4">
          <div className="flex items-center justify-between flex-wrap gap-4">
            <div className="flex items-center gap-4">
              {getStatusIcon()}
              <div>
                <p className="text-sm uppercase tracking-wide text-slate-500">Target</p>
                <h2 className="text-2xl font-semibold">{targetLabel}</h2>
                <div className="flex items-center gap-2 text-slate-400 mt-1 text-sm">
                  <span className={getStatusColor()}>{humanizeStatus(status)}</span>
                  <span>•</span>
                  <span>{new Date(build.updatedAt).toLocaleString()}</span>
                  {githubActionUrl && (
                    <>
                      <span>•</span>
                      <a
                        href={githubActionUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-slate-500 hover:text-slate-300"
                      >
                        View run
                      </a>
                    </>
                  )}
                </div>
              </div>
            </div>
            <div className="flex gap-2">
              <Button onClick={handleReportIssue} variant="outline" className="border-slate-600 hover:bg-slate-800">
                <AlertCircle className="w-4 h-4 mr-2" />
                Report a Problem
              </Button>
              <Button onClick={handleShare} className="bg-green-600 hover:bg-green-700">
                <Share2 className="w-4 h-4 mr-2" />
                {shareUrlCopied ? "Copied!" : "Share Build"}
              </Button>
            </div>
          </div>

          {/* Admin Controls Section */}
          {isAdmin === true && build && (
            <div className="border-t border-slate-800 pt-4 mt-4 space-y-4">
              <div className="flex items-center justify-between flex-wrap gap-4">
                <div>
                  <h3 className="text-lg font-semibold mb-2">Admin Controls</h3>
                  <div className="flex items-center gap-3 mb-2">
                    <span className="text-sm font-mono font-semibold text-white">
                      {build.buildHash.substring(0, 8)}
                    </span>
                    {getStatusBadge(build.status)}
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button
                    onClick={() => navigate(`/builds/new/${build.buildHash}`)}
                    variant="outline"
                    size="sm"
                    className="border-slate-600 hover:bg-slate-800"
                  >
                    Clone
                  </Button>
                  <Button onClick={handleRetry} className="bg-cyan-600 hover:bg-cyan-700" size="sm">
                    Re-run Build
                  </Button>
                </div>
              </div>

              {/* Build Configuration Details */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <div>
                    <span className="text-sm text-slate-500">Target</span>
                    <div className="text-sm font-mono text-white mt-1">{build.config.target}</div>
                  </div>
                  <div>
                    <span className="text-sm text-slate-500">Version</span>
                    <div className="text-sm font-mono text-white mt-1">{build.config.version}</div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div>
                    <span className="text-sm text-slate-500">{build.completedAt ? "Completed" : "Started"}</span>
                    <div className="text-sm text-white mt-1">
                      {build.completedAt
                        ? formatDate(build.completedAt)
                        : build.startedAt
                          ? formatDate(build.startedAt)
                          : "Unknown"}
                    </div>
                  </div>
                </div>
              </div>

              {/* Run History Section */}
              {(build.githubRunId || (build.githubRunIdHistory?.length ?? 0) > 0) && (
                <div className="pt-4 border-t border-slate-800">
                  <span className="text-xs text-slate-500 mb-2 block">
                    Run History
                    {(build.githubRunIdHistory?.length ?? 0) > 0 &&
                      ` (${(build.githubRunIdHistory?.length ?? 0) + (build.githubRunId ? 1 : 0)} total)`}
                  </span>
                  <div className="flex flex-wrap gap-2">
                    {build.githubRunId && (
                      <a
                        href={`https://github.com/MeshEnvy/mesh-forge/actions/runs/${build.githubRunId}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-xs text-cyan-400 hover:text-cyan-300 underline font-semibold"
                        title="Current run"
                      >
                        {build.githubRunId}
                      </a>
                    )}
                    {build.githubRunIdHistory?.map(id => (
                      <a
                        key={id}
                        href={`https://github.com/MeshEnvy/mesh-forge/actions/runs/${id}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-xs text-cyan-400 hover:text-cyan-300 underline"
                      >
                        {id}
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

          {status !== "success" && status !== "failure" && (
            <div className="rounded-lg border border-slate-800/70 bg-slate-950/60 p-4">
              <p className="text-sm text-slate-400">
                Builds run in GitHub Actions. When the status is
                <span className="text-green-400 font-medium"> success</span>, your firmware artifact will be ready to
                download.
              </p>
            </div>
          )}

          {/* Build Configuration Summary */}
          {(excludedModules.length > 0 || explicitPlugins.length > 0 || implicitPlugins.length > 0) && (
            <div className="space-y-6 border-t border-slate-800 pt-6">
              {/* Excluded Modules */}
              {excludedModules.length > 0 && (
                <div>
                  <h3 className="text-lg font-semibold mb-3">Excluded Modules</h3>
                  <div className="bg-slate-900/50 rounded-lg border border-slate-800 p-6">
                    <div className="space-y-4">
                      {excludedModules.map(module => (
                        <div key={module.id} className="border-b border-slate-800 pb-4 last:border-b-0 last:pb-0">
                          <h4 className="text-base font-medium mb-1">{module.name}</h4>
                          <p className="text-slate-400 text-sm">{module.description}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {/* Enabled Plugins */}
              {explicitPlugins.length > 0 && (
                <div>
                  <h3 className="text-lg font-semibold mb-3">Enabled Plugins</h3>
                  <div className="bg-slate-900/50 rounded-lg border border-slate-800 p-6">
                    <div className="space-y-4">
                      {explicitPlugins.map(plugin => (
                        <div key={plugin.id} className="border-b border-slate-800 pb-4 last:border-b-0 last:pb-0">
                          <div className="flex items-center gap-2 mb-1">
                            <h4 className="text-base font-medium">{plugin.name}</h4>
                            {plugin.version && <span className="text-xs text-slate-500">v{plugin.version}</span>}
                          </div>
                          {plugin.description && <p className="text-slate-400 text-sm">{plugin.description}</p>}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {/* Required Plugins (Implicit Dependencies) */}
              {implicitPlugins.length > 0 && (
                <div>
                  <h3 className="text-lg font-semibold mb-3">Required Plugins</h3>
                  <div className="bg-slate-900/50 rounded-lg border border-slate-800 p-6">
                    <div className="space-y-4">
                      {implicitPlugins.map(plugin => (
                        <div key={plugin.id} className="border-b border-slate-800 pb-4 last:border-b-0 last:pb-0">
                          <div className="flex items-center gap-2 mb-1">
                            <h4 className="text-base font-medium">{plugin.name}</h4>
                            {plugin.version && <span className="text-xs text-slate-500">v{plugin.version}</span>}
                          </div>
                          {plugin.description && <p className="text-slate-400 text-sm">{plugin.description}</p>}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {status === "success" && build.buildHash && (
            <BuildDownloadButton
              build={build}
              type={ArtifactType.Firmware}
              className="w-full bg-cyan-600 hover:bg-cyan-700"
            />
          )}

          {build.buildHash && (
            <BuildDownloadButton
              build={build}
              type={ArtifactType.Source}
              variant="outline"
              className="w-full bg-slate-700 hover:bg-slate-600"
            />
          )}

          {status === "failure" && (
            <div className="rounded-lg border border-red-500/40 bg-red-500/10 p-4 text-sm text-red-100">
              <p className="font-medium text-red-200">
                Build failed. Please try tweaking your configuration or re-running the build.
              </p>
            </div>
          )}

          {status !== "success" && status !== "failure" && (
            <div className="rounded-lg border border-blue-500/30 bg-blue-500/5 p-4 text-sm text-blue-100">
              <p className="font-medium text-blue-200">
                This build is still running. Leave this tab open or come back later using the URL above.
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}