// app/onboarding/page.tsx
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useSession } from "next-auth/react"

export default function OnboardingPage() {
  const router = useRouter()
  const { data: session } = useSession()
  const [activeTab, setActiveTab] = useState<"accept" | "create">("accept")
  const [inviteCode, setInviteCode] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

  const handleAcceptInvite = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")

    try {
      const response = await fetch("/api/invites/accept", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ inviteCode: inviteCode.trim() })
      })

      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.error || "Erro ao aceitar convite")
      }

      router.push(`/workspace/${data.workspace.slug}`)
    } catch (err: any) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div style={{
      minHeight: "100vh",
      background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      padding: "2rem"
    }}>
      <div style={{
        maxWidth: "600px",
        width: "100%",
        background: "white",
        borderRadius: "1rem",
        boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
        overflow: "hidden"
      }}>
        {/* Header */}
        <div style={{ padding: "2rem", textAlign: "center" }}>
          <h1 style={{ fontSize: "2rem", marginBottom: "0.5rem" }}>
            🚀 Bem-vindo ao PDIMaker
          </h1>
          <p style={{ color: "#666" }}>
            Escolha como deseja começar
          </p>
        </div>

        {/* Tabs */}
        <div style={{ display: "flex", borderBottom: "1px solid #e2e8f0" }}>
          <button
            onClick={() => setActiveTab("accept")}
            style={{
              flex: 1,
              padding: "1rem",
              background: activeTab === "accept" ? "white" : "#f7fafc",
              border: "none",
              borderBottom: activeTab === "accept" ? "3px solid #667eea" : "none",
              fontWeight: activeTab === "accept" ? "600" : "normal",
              cursor: "pointer",
              color: activeTab === "accept" ? "#667eea" : "#666"
            }}
          >
            Tenho um código
          </button>
          <button
            onClick={() => setActiveTab("create")}
            style={{
              flex: 1,
              padding: "1rem",
              background: activeTab === "create" ? "white" : "#f7fafc",
              border: "none",
              borderBottom: activeTab === "create" ? "3px solid #667eea" : "none",
              fontWeight: activeTab === "create" ? "600" : "normal",
              cursor: "pointer",
              color: activeTab === "create" ? "#667eea" : "#666"
            }}
          >
            Criar workspace
          </button>
        </div>

        {/* Content */}
        <div style={{ padding: "2rem" }}>
          {activeTab === "accept" ? (
            <div>
              <h2 style={{ fontSize: "1.5rem", marginBottom: "1rem" }}>
                Aceitar Convite
              </h2>
              <p style={{ color: "#666", marginBottom: "1.5rem" }}>
                Cole o código de convite que você recebeu do seu mentor ou mentorado:
              </p>

              <form onSubmit={handleAcceptInvite}>
                <input
                  type="text"
                  value={inviteCode}
                  onChange={(e) => setInviteCode(e.target.value)}
                  placeholder="cmhrtjzk6001jox4z9dzb5al"
                  required
                  style={{
                    width: "100%",
                    padding: "1rem",
                    border: "2px solid #e2e8f0",
                    borderRadius: "0.5rem",
                    fontSize: "1rem",
                    fontFamily: "monospace",
                    marginBottom: "1rem"
                  }}
                />

                {error && (
                  <div style={{
                    padding: "1rem",
                    background: "#fee2e2",
                    border: "1px solid #fecaca",
                    borderRadius: "0.375rem",
                    color: "#dc2626",
                    marginBottom: "1rem",
                    fontSize: "0.875rem"
                  }}>
                    {error}
                  </div>
                )}

                <button
                  type="submit"
                  disabled={loading}
                  style={{
                    width: "100%",
                    padding: "1rem",
                    background: loading ? "#cbd5e0" : "#667eea",
                    color: "white",
                    border: "none",
                    borderRadius: "0.5rem",
                    fontSize: "1rem",
                    fontWeight: "600",
                    cursor: loading ? "not-allowed" : "pointer"
                  }}
                >
                  {loading ? "Aceitando..." : "Aceitar Convite"}
                </button>
              </form>
            </div>
          ) : (
            <div>
              <h2 style={{ fontSize: "1.5rem", marginBottom: "1rem" }}>
                Criar Novo Workspace
              </h2>
              <p style={{ color: "#666", marginBottom: "1.5rem" }}>
                Crie um workspace e convide seu mentor ou mentorado para colaborar.
              </p>

              <button
                onClick={() => router.push("/workspace/create")}
                style={{
                  width: "100%",
                  padding: "1rem",
                  background: "#667eea",
                  color: "white",
                  border: "none",
                  borderRadius: "0.5rem",
                  fontSize: "1rem",
                  fontWeight: "600",
                  cursor: "pointer"
                }}
              >
                Criar Workspace
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}