'use client'

import { useState, useCallback, useEffect, type FormEvent } from 'react'
import { useAuth } from '../hooks/useAuth'
import { Logo } from './Logo'

export function Login() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { login, config, bootstrapStandardAgents, redirectToStandardAgents } = useAuth()

  // Mirror the builder login: platform-connected instances sign in only with
  // Standard Agents; the password form is for local-password instances.
  const standardAgentsSignIn = !!config && (config.standardAgentsLogin || config.platformConnected)
  const showPasswordForm = !!config && !config.hosted && !standardAgentsSignIn && config.localPassword

  const handleStandardAgents = useCallback(async () => {
    setError('')
    if (config?.standardAgentsLogin) {
      redirectToStandardAgents()
      return
    }
    setIsSubmitting(true)
    const result = await bootstrapStandardAgents()
    if (!result.success) {
      setError(result.error || 'Standard Agents sign-in failed.')
      setIsSubmitting(false)
    }
  }, [config, bootstrapStandardAgents, redirectToStandardAgents])

  useEffect(() => {
    const saError = new URLSearchParams(window.location.search).get('sa_error')
    if (saError) {
      setError(saError === 'forbidden'
        ? "Your Standard Agents account doesn't have access to this instance."
        : "Standard Agents sign-in didn't complete. Please try again.")
    }
  }, [])

  const handleSubmit = useCallback(async (e: FormEvent) => {
    e.preventDefault()
    setError('')
    setIsSubmitting(true)

    const result = await login(username, password)

    if (!result.success) {
      setError(result.error || 'Login failed')
      setIsSubmitting(false)
    }
  }, [username, password, login])

  return (
    <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden bg-[var(--bg-primary)]">
      {/* Subtle gradient background */}
      <div
        className="absolute inset-0 opacity-50"
        style={{
          background: 'radial-gradient(ellipse at top, var(--bg-secondary) 0%, transparent 50%), radial-gradient(ellipse at bottom right, var(--bg-tertiary) 0%, transparent 50%)',
        }}
      />

      {/* Noise texture overlay */}
      <div
        className="absolute inset-0 opacity-[0.015] pointer-events-none"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
        }}
      />

      {/* Content */}
      <div className="w-full max-w-md relative z-10">
        {/* Logo above the card */}
        <div className="flex justify-center mb-10">
          <Logo className="w-72 h-auto text-[var(--text-secondary)] drop-shadow-sm" />
        </div>

        {/* Login card */}
        <div className="bg-[var(--bg-secondary)]/80 backdrop-blur-xl rounded-3xl border border-[var(--border-primary)] shadow-2xl shadow-black/10 p-8">
          {error && !showPasswordForm && (
            <div className="mb-5 p-4 rounded-2xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
              {error}
            </div>
          )}

          {standardAgentsSignIn && (
            <button
              type="button"
              onClick={handleStandardAgents}
              disabled={isSubmitting}
              className="w-full py-3.5 px-4 rounded-xl bg-[var(--text-primary)] text-[var(--bg-primary)] font-semibold hover:opacity-90 disabled:opacity-40 transition-all duration-150 shadow-lg shadow-black/10"
            >
              {isSubmitting ? 'Signing in...' : 'Continue with Standard Agents'}
            </button>
          )}

          {config && !standardAgentsSignIn && !showPasswordForm && (
            <p className="text-sm text-[var(--text-secondary)] text-center">
              This instance has no sign-in method available to the chat.
            </p>
          )}

          {showPasswordForm && (
          <form onSubmit={handleSubmit} className="space-y-5">
            {error && (
              <div className="p-4 rounded-2xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm flex items-center gap-3">
                <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                </svg>
                {error}
              </div>
            )}

            <div className="space-y-2">
              <label
                htmlFor="username"
                className="block text-sm font-medium text-[var(--text-secondary)]"
              >
                Username
              </label>
              <input
                id="username"
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-4 py-3 rounded-xl bg-[var(--bg-primary)] border border-[var(--border-primary)] text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--text-secondary)]/20 focus:border-[var(--border-secondary)] transition-all"
                placeholder="Enter your username"
                required
                autoComplete="username"
                disabled={isSubmitting}
              />
            </div>

            <div className="space-y-2">
              <label
                htmlFor="password"
                className="block text-sm font-medium text-[var(--text-secondary)]"
              >
                Password
              </label>
              <input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-4 py-3 rounded-xl bg-[var(--bg-primary)] border border-[var(--border-primary)] text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--text-secondary)]/20 focus:border-[var(--border-secondary)] transition-all"
                placeholder="Enter your password"
                required
                autoComplete="current-password"
                disabled={isSubmitting}
              />
            </div>

            <button
              type="submit"
              disabled={isSubmitting || !username || !password}
              className="w-full py-3.5 px-4 rounded-xl bg-[var(--text-primary)] text-[var(--bg-primary)] font-semibold hover:opacity-90 hover:scale-[1.01] active:scale-[0.99] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100 transition-all duration-150 shadow-lg shadow-black/10"
            >
              {isSubmitting ? (
                <span className="flex items-center justify-center gap-2">
                  <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                  </svg>
                  Signing in...
                </span>
              ) : (
                'Sign in'
              )}
            </button>
          </form>
          )}
        </div>

        {/* Subtle footer */}
        <p className="text-center text-xs text-[var(--text-muted)] mt-6">
          Powered by{' '}
          <a
            href="https://standardagentbuilder.com"
            target="_blank"
            rel="noopener noreferrer"
            className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
          >
            Standard Agents
          </a>
        </p>
      </div>
    </div>
  )
}