// page.tsx
import { getSession } from "@auth0/nextjs-auth0"
import { redirect } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { CopyButton } from "./copy-button"
import PostHogClient from "@/app/app/posthog"
import Link from "next/link"

export default async function GettingStarted() {
  const session = await getSession()
  if (session == null) {
    redirect("/login")
  }

  const userId = session.user.sub
  const posthog = PostHogClient()
  posthog.capture({
    distinctId: userId,
    properties: { username: session.nickname },
    event: "webapp-loaded-getting-started",
  })

  await posthog.shutdown()

  return (
    <div className="min-h-screen">
      <main className="max-w-3xl mx-auto px-4 py-8">
        <div className="space-y-6">
          <div className="space-y-2">
            <h1 className="text-4xl font-semibold">Quick Start Guide</h1>
            <p className="text-muted-foreground">
              Follow these steps to set up Codeflash in your project
            </p>
          </div>

          <Separator />

          <div className="space-y-8">
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <div className="bg-primary text-primary-foreground w-6 h-6 rounded-full flex items-center justify-center font-semibold">
                  1
                </div>
                <span>Generate an API key from the API Keys page</span>
              </div>
              <Button
                variant="outline"
                className="bg-primary/20 text-primary hover:bg-primary/30 border-0"
                asChild
              >
                <Link href="/app/apikeys">Generate API Key</Link>
              </Button>
            </div>

            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <div className="bg-primary text-primary-foreground w-6 h-6 rounded-full flex items-center justify-center font-semibold">
                  2
                </div>
                <span>Install the Codeflash package in your project&apos;s Python environment</span>
              </div>
              <Card className="bg-muted border p-4 rounded-lg">
                <div className="flex justify-between items-center font-mono">
                  <pre className="text-sm">
                    <span className="text-green-600">pip install codeflash</span>
                  </pre>
                  <CopyButton text="pip install codeflash" />
                </div>
              </Card>
            </div>

            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <div className="bg-primary text-primary-foreground w-6 h-6 rounded-full flex items-center justify-center font-semibold">
                  3
                </div>
                <span>Configure codeflash for your codebase - at your project&apos;s root, run:</span>
              </div>
              <Card className="bg-muted border p-4 rounded-lg">
                <div className="flex justify-between items-center font-mono">
                  <pre className="text-sm">
                    <span className="text-green-600">codeflash init</span>
                  </pre>
                  <CopyButton
                    text="codeflash init"
                  />
                </div>
              </Card>
            </div>

            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <div className="bg-primary text-primary-foreground w-6 h-6 rounded-full flex items-center justify-center font-semibold">
                  4
                </div>
                <span>
                  To optimize all future GitHub PRs, add Codeflash as a Github Action by running:{" "}
                </span>
              </div>
              <Card className="bg-muted border p-4 rounded-lg">
                <div className="flex justify-between items-center font-mono">
                  <pre className="text-sm">
                    <span className="text-green-600">codeflash init-actions</span>
                  </pre>
                  <CopyButton
                    text="codeflash init-actions"
                  />
                </div>
              </Card>
            </div>
          </div>

          <div className="mt-8">
            <p className="text-muted-foreground">
              Need help? For more details check out our{" "}
              <a
                href="https://docs.codeflash.ai"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline"
              >
                documentation
              </a>{" "}
              or{" "}
              <a
                href="https://calendly.com/codeflash-saurabh/codeflash-setup"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline"
              >
                book a call
              </a>{" "}
              with the founder.
            </p>
          </div>
        </div>
      </main>
    </div>
  )
}
