"use client"

import LogoBox from "@/components/dashboard/logo-box"
import { useState, useEffect } from "react"
import { useSearchParams } from "next/navigation"
import { Loading } from "@/components/ui/loading"

export default function OAuthCallbackContent() {
  const [copied, setCopied] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const searchParams = useSearchParams()

  const code = searchParams.get("code")
  const state = searchParams.get("state")

  useEffect(() => {
    // Validate the OAuth callback
    if (!code || !state) {
      setError("Invalid authentication response. Missing required parameters.")
    }
    setIsLoading(false)
  }, [code, state])

  const handleCopyCode = async () => {
    if (!code) return

    try {
      await navigator.clipboard.writeText(code)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error("Failed to copy:", err)
    }
  }

  if (isLoading) {
    return <Loading />
  }

  if (error || !code) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-primary/10 via-primary/5 to-background relative">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:24px_24px]" />
        <div className="min-h-screen flex flex-col items-center justify-center px-6 py-12 relative z-10">
          <div className="mb-16">
            <LogoBox />
          </div>
          <div className="max-w-md w-full">
            <div className="bg-card border border-border rounded-2xl shadow-xl overflow-hidden p-8">
              <div className="w-20 h-20 bg-amber-500/10 rounded-2xl flex items-center justify-center mx-auto relative">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="48"
                  height="48"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="text-amber-600 dark:text-amber-500"
                >
                  <circle cx="12" cy="12" r="10" />
                  <line x1="12" y1="8" x2="12" y2="12" />
                  <line x1="12" y1="16" x2="12.01" y2="16" />
                </svg>
              </div>
              <div className="space-y-3 text-center mt-6">
                <h2 className="text-2xl font-bold text-foreground">Authentication Error</h2>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  {error || "Invalid authentication response"}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-primary/10 via-primary/5 to-background relative">
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:24px_24px]" />
      <div className="min-h-screen flex flex-col items-center justify-center px-6 py-12 relative z-10">
        <div className="mb-16">
          <LogoBox />
        </div>

        <div className="max-w-2xl w-full space-y-8">
          {/* Header */}
          <div className="text-center space-y-4">
            <h1 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
              Authentication Code
            </h1>
            <p className="text-lg text-muted-foreground">Paste this into Codeflash CLI</p>
          </div>

          {/* Code Display Box */}
          <div className="bg-card border border-border rounded-2xl shadow-xl overflow-hidden">
            <div className="p-8 space-y-6">
              {/* Code Container */}
              <div className="bg-muted/50 border border-border rounded-xl p-6 font-mono text-sm break-all">
                <code className="text-foreground/90 select-all">{code}</code>
              </div>

              {/* Copy Button */}
              <button
                onClick={handleCopyCode}
                className="w-full px-6 py-3.5 bg-primary hover:bg-primary/90 active:scale-[0.99] text-primary-foreground font-semibold rounded-xl transition-all shadow-sm flex items-center justify-center gap-2 group"
              >
                {copied ? (
                  <>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="transition-transform group-hover:scale-110"
                    >
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                    Copied!
                  </>
                ) : (
                  <>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="transition-transform group-hover:scale-110"
                    >
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                    </svg>
                    Copy Code
                  </>
                )}
              </button>
            </div>
          </div>

          {/* Additional Info */}
          <div className="text-center space-y-2">
            <p className="text-sm text-muted-foreground">
              This code will authenticate your CodeFlash CLI.
            </p>
            <p className="text-xs text-muted-foreground/70">
              Keep this code secure and do not share it with anyone.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
