"use client";

import { signIn } from "next-auth/react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense, useState } from "react";

function authErrorMessage(code: string | null): string | null {
  if (!code) return null;
  if (code === "Callback") {
    
  return (
    <div style={{ width: '100%', maxWidth: '440px', margin: '0 auto', position: 'relative', zIndex: 10 }}>
      {/* Logo */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '32px' }}>
        <span className="logo" style={{ fontSize: '20px' }}>
          <span className="logo-mark" style={{ width: '32px', height: '32px' }}>
            <svg viewBox="0 0 36 32" width="74%" height="74%" fill="currentColor" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" aria-hidden="true">
              <path d="M4 5 L10 5 L12 18 L14 5 L20 5 L12 27 Z" />
              <rect x="22.5" y="23" width="9.5" height="3.8" rx="0.7" className="logo-caret" />
            </svg>
          </span>
          <span>vibn</span>
        </span>
      </div>

      {/* Card */}
      <div className="card" style={{ padding: '40px 32px', display: 'flex', flexDirection: 'column', gap: '24px' }}>
        <div style={{ textAlign: 'center' }}>
          <h1 style={{ fontSize: '24px', fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: '8px' }}>
            {title}
          </h1>
          <p style={{ fontSize: '15px', color: 'var(--fg-dim)', lineHeight: 1.5 }}>
            {subtitle}
          </p>
        </div>

        {errorHint && (
          <div role="alert" style={{
            padding: "12px 14px", borderRadius: 10, fontSize: 13, lineHeight: 1.55,
            color: "#ffae9a", background: "oklch(0.74 0.175 35 / 0.15)", border: "1px solid oklch(0.74 0.175 35 / 0.3)"
          }}>
            {errorHint}
          </div>
        )}

        <button
          type="button"
          className="btn btn-ghost"
          style={{ width: '100%', justifyContent: 'center', height: '48px', fontSize: '15px', gap: '12px' }}
          onClick={handleGoogleSignIn}
          disabled={isLoading}
        >
          <svg width={18} height={18} viewBox="0 0 24 24" fill="none" aria-hidden>
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05" />
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
          </svg>
          {isLoading ? "Signing in…" : "Continue with Google"}
        </button>

        {showDevLocalSignIn && (
          <div style={{ marginTop: 8, paddingTop: 24, borderTop: "1px solid var(--hairline)" }}>
            <p style={{ fontSize: '13px', color: 'var(--fg-dim)', marginBottom: 12, textAlign: 'center' }}>
              Local only: sign in without Google as <br/>
              <strong style={{ color: 'var(--fg)' }}>{process.env.NEXT_PUBLIC_DEV_LOCAL_AUTH_EMAIL}</strong>
            </p>
            <form onSubmit={(e) => { e.preventDefault(); void handleDevLocalSignIn(); }} style={{ display: 'flex', gap: 8 }}>
              <input
                type="password"
                name="dev-local-secret"
                autoComplete="current-password"
                placeholder="Dev secret"
                value={devSecret}
                onChange={(e) => setDevSecret(e.target.value)}
                style={{
                  flex: 1, padding: "0 14px", height: "40px", borderRadius: "8px",
                  background: "oklch(0.16 0.008 60)", border: "1px solid var(--hairline)",
                  color: "var(--fg)", fontSize: "14px", outline: "none"
                }}
              />
              <button type="submit" disabled={isLoading} className="btn btn-primary" style={{ height: "40px", padding: "0 16px", borderRadius: "8px" }}>
                Sign in
              </button>
            </form>
          </div>
        )}
      </div>

      <div style={{ textAlign: "center", fontSize: "12px", color: "var(--fg-faint)", marginTop: "24px", lineHeight: 1.5 }}>
        By continuing, you agree to Vibn's <a href="#" style={{ color: "var(--fg-dim)", textDecoration: "underline" }}>Terms of Service</a> and <a href="#" style={{ color: "var(--fg-dim)", textDecoration: "underline" }}>Privacy Policy</a>.
      </div>
    </div>
  );
}