"use client"

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

export default function LoginPage() {
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [loading, setLoading] = useState(false)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError("")

    const result = await signIn("credentials", {
      email,
      password,
      redirect: false,
    })

    if (result?.error) {
      setError("Invalid email or password")
      setLoading(false)
      return
    }

    router.push("/dashboard")
    router.refresh()
  }

  return (
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

        * { box-sizing: border-box; margin: 0; padding: 0; }

        .login-root {
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) 0.8) 40%, hsl(var(--primary) 0.6) 100%);
          font-family: 'Nunito', sans-serif;
          padding: 24px;
        }

        .login-card {
          background: hsl(var(--card));
          border-radius: 24px;
          box-shadow: 0 24px 80px rgba(0,0,0,0.18);
          display: flex;
          width: 100%;
          max-width: 860px;
          min-height: 500px;
          overflow: hidden;
        }

        .login-illustration {
          flex: 1.2;
          background: linear-gradient(160deg, hsl(var(--muted) 0%), hsl(var(--background)) 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 40px 32px;
          position: relative;
          overflow: hidden;
        }

        .login-illustration::before {
          content: '';
          position: absolute;
          width: 420px;
          height: 360px;
          background: linear-gradient(135deg, hsl(var(--primary) 0.25) 0%, hsl(var(--primary) 0.15) 100%);
          border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .illustration-svg {
          position: relative;
          z-index: 1;
          width: 100%;
          max-width: 380px;
          height: auto;
        }

        .login-form-panel {
          flex: 1;
          padding: 56px 48px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .login-title {
          font-size: 28px;
          font-weight: 700;
          color: hsl(var(--foreground));
          text-align: center;
          margin-bottom: 6px;
          letter-spacing: 0.3px;
        }

        .login-subtitle {
          font-size: 14px;
          color: hsl(var(--muted-foreground));
          text-align: center;
          margin-bottom: 36px;
          font-weight: 500;
        }

        .input-wrapper {
          position: relative;
          margin-bottom: 16px;
        }

        .input-icon {
          position: absolute;
          left: 16px;
          top: 50%;
          transform: translateY(-50%);
          color: hsl(var(--muted-foreground));
          width: 16px;
          height: 16px;
        }

        .login-input {
          width: 100%;
          padding: 13px 16px 13px 44px;
          border: 1.5px solid hsl(var(--border));
          border-radius: 10px;
          font-size: 14px;
          font-family: 'Nunito', sans-serif;
          color: hsl(var(--foreground));
          background: hsl(var(--background));
          outline: none;
          transition: border-color 0.2s, box-shadow 0.2s;
        }

        .login-input::placeholder { color: hsl(var(--muted-foreground)); }

        .login-input:focus {
          border-color: hsl(var(--ring));
          box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
          background: hsl(var(--card));
        }

        .forgot-password {
          text-align: right;
          margin-bottom: 24px;
          margin-top: -4px;
        }

        .forgot-password a {
          font-size: 12.5px;
          color: hsl(var(--primary));
          text-decoration: none;
          font-weight: 600;
        }

        .forgot-password a:hover { text-decoration: underline; }

        .login-btn {
          width: 100%;
          padding: 14px;
          background: hsl(var(--primary));
          color: hsl(var(--primary-foreground));
          border: none;
          border-radius: 10px;
          font-size: 14px;
          font-weight: 700;
          font-family: 'Nunito', sans-serif;
          letter-spacing: 1.8px;
          text-transform: uppercase;
          cursor: pointer;
          transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
          box-shadow: 0 4px 16px hsl(var(--primary) / 0.35);
        }

        .login-btn:hover:not(:disabled) {
          background: hsl(var(--primary) 0.8);
          transform: translateY(-1px);
          box-shadow: 0 6px 20px hsl(var(--primary) / 0.4);
        }

        .login-btn:disabled { opacity: 0.65; cursor: not-allowed; }

        .error-msg {
          color: hsl(var(--destructive));
          font-size: 13px;
          margin-bottom: 14px;
          padding: 10px 14px;
          background: hsl(var(--destructive) / 0.1);
          border-radius: 8px;
          text-align: center;
        }

        @media (max-width: 640px) {
          .login-illustration { display: none; }
          .login-card { max-width: 420px; }
          .login-form-panel { padding: 40px 28px; }
        }
      `}</style>

      <div className="login-root">
        <div className="login-card">

          {/* Left: Illustration */}
          <div className="login-illustration">
            <svg className="illustration-svg" viewBox="0 0 380 320" fill="none" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <filter id="cardShadow" x="-20%" y="-20%" width="140%" height="140%">
                  <feDropShadow dx="0" dy="3" stdDeviation="6" floodColor="hsl(var(--primary))" floodOpacity="0.13" />
                </filter>
              </defs>

              {/* ── Monitor ── */}
              <rect x="40" y="48" width="224" height="152" rx="14" fill="hsl(var(--card))" stroke="hsl(var(--border))" strokeWidth="2" filter="url(#cardShadow)" />
              <rect x="130" y="200" width="44" height="16" rx="4" fill="hsl(var(--muted))" />
              <rect x="112" y="214" width="80" height="9" rx="4" fill="hsl(var(--muted))" />

              {/* screen header */}
              <rect x="52" y="60" width="200" height="24" rx="7" fill="hsl(var(--primary))" />
              <circle cx="70" cy="72" r="6" fill="hsl(var(--background))" opacity="0.55" />
              <rect x="84" y="68" width="56" height="8" rx="4" fill="hsl(var(--background))" opacity="0.45" />
              <rect x="210" y="68" width="30" height="8" rx="4" fill="hsl(var(--background))" opacity="0.35" />

              {/* chart bars */}
              <rect x="58" y="143" width="20" height="38" rx="4" fill="hsl(var(--primary) 0.7)" />
              <rect x="86" y="122" width="20" height="59" rx="4" fill="hsl(var(--primary))" />
              <rect x="114" y="133" width="20" height="48" rx="4" fill="hsl(var(--primary) 0.7)" />
              <rect x="142" y="108" width="20" height="73" rx="4" fill="hsl(var(--primary) 0.8)" />
              <rect x="170" y="120" width="20" height="61" rx="4" fill="hsl(var(--primary) 0.7)" />
              <rect x="198" y="137" width="20" height="44" rx="4" fill="hsl(var(--primary))" />
              <rect x="226" y="128" width="20" height="53" rx="4" fill="hsl(var(--primary) 0.8)" />

              {/* baseline */}
              <line x1="52" y1="183" x2="252" y2="183" stroke="hsl(var(--border))" strokeWidth="1.5" />

              {/* orange trend line */}
              <polyline
                points="68,158 96,134 124,146 152,120 180,132 208,148 236,138"
                stroke="hsl(var(--destructive))" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none"
              />
              {/* trend dots */}
              <circle cx="68" cy="158" r="3.5" fill="hsl(var(--destructive))" />
              <circle cx="152" cy="120" r="3.5" fill="hsl(var(--destructive))" />
              <circle cx="236" cy="138" r="3.5" fill="hsl(var(--destructive))" />

              {/* ── Floating stat cards ── */}
              {/* Card top-right */}
              <rect x="272" y="40" width="98" height="60" rx="11" fill="hsl(var(--card))" stroke="hsl(var(--border))" strokeWidth="1.5" filter="url(#cardShadow)" />
              <rect x="284" y="52" width="74" height="8" rx="4" fill="hsl(var(--border))" />
              <rect x="284" y="64" width="44" height="13" rx="5" fill="hsl(var(--primary))" />
              <rect x="284" y="82" width="60" height="7" rx="3" fill="hsl(var(--muted))" />
              <circle cx="353" cy="52" r="8" fill="hsl(var(--muted))" />
              <path d="M349 52 L352 55 L357 49" stroke="hsl(var(--primary))" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

              {/* Card mid-right */}
              <rect x="282" y="116" width="90" height="56" rx="11" fill="hsl(var(--card))" stroke="hsl(var(--border))" strokeWidth="1.5" filter="url(#cardShadow)" />
              <rect x="294" y="128" width="58" height="8" rx="4" fill="hsl(var(--border))" />
              <rect x="294" y="140" width="36" height="13" rx="5" fill="hsl(var(--destructive))" />
              <rect x="294" y="158" width="50" height="7" rx="3" fill="hsl(var(--muted))" />
              <circle cx="361" cy="128" r="8" fill="hsl(var(--destructive) / 0.1)" />
              <path d="M357 128 L360 124 L364 132" stroke="hsl(var(--destructive))" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

              {/* Card bottom-right */}
              <rect x="272" y="188" width="98" height="56" rx="11" fill="hsl(var(--card))" stroke="hsl(var(--border))" strokeWidth="1.5" filter="url(#cardShadow)" />
              <rect x="284" y="200" width="70" height="8" rx="4" fill="hsl(var(--border))" />
              <rect x="284" y="212" width="42" height="13" rx="5" fill="hsl(var(--primary))" />
              <rect x="284" y="230" width="60" height="7" rx="3" fill="hsl(var(--muted))" />
              <circle cx="353" cy="200" r="8" fill="hsl(var(--primary) / 0.1)" />
              <path d="M349 200 L352 203 L357 197" stroke="hsl(var(--primary))" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

              {/* ── HR avatars row ── */}
              <circle cx="70" cy="272" r="24" fill="hsl(var(--primary) 0.7)" />
              <circle cx="70" cy="261" r="10" fill="hsl(var(--background))" opacity="0.88" />
              <ellipse cx="70" cy="284" rx="15" ry="9" fill="hsl(var(--background))" opacity="0.72" />

              <circle cx="128" cy="276" r="21" fill="hsl(var(--primary))" />
              <circle cx="128" cy="266" r="9" fill="hsl(var(--background))" opacity="0.88" />
              <ellipse cx="128" cy="287" rx="13" ry="8" fill="hsl(var(--background))" opacity="0.72" />

              <circle cx="182" cy="272" r="24" fill="hsl(var(--primary) 0.8)" />
              <circle cx="182" cy="261" r="10" fill="hsl(var(--background))" opacity="0.88" />
              <ellipse cx="182" cy="284" rx="15" ry="9" fill="hsl(var(--background))" opacity="0.72" />

              {/* connectors */}
              <line x1="94" y1="272" x2="107" y2="274" stroke="hsl(var(--muted))" strokeWidth="2" strokeDasharray="3 3" />
              <line x1="149" y1="274" x2="158" y2="272" stroke="hsl(var(--muted))" strokeWidth="2" strokeDasharray="3 3" />

              {/* label pill */}
              <rect x="44" y="302" width="164" height="14" rx="7" fill="hsl(var(--background))" opacity="0.65" />
              <rect x="56" y="306" width="60" height="6" rx="3" fill="hsl(var(--muted))" />
              <rect x="124" y="306" width="72" height="6" rx="3" fill="hsl(var(--primary) 0.7)" />

              {/* decorative dots */}
              <circle cx="24" cy="96" r="5" fill="hsl(var(--muted))" opacity="0.55" />
              <circle cx="16" cy="128" r="3" fill="hsl(var(--primary) 0.7)" opacity="0.4" />
              <circle cx="28" cy="162" r="4" fill="hsl(var(--muted))" opacity="0.5" />
              <circle cx="358" cy="268" r="5" fill="hsl(var(--muted))" opacity="0.45" />
              <circle cx="370" cy="292" r="3" fill="hsl(var(--primary) 0.7)" opacity="0.35" />
            </svg>
          </div>

          {/* Right: Form */}
          <div className="login-form-panel">
            <h1 className="login-title">Welcome!</h1>
            <p className="login-subtitle">Sign in to your Account</p>

            <form onSubmit={handleSubmit}>
              <div className="input-wrapper">
                <svg className="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                  <polyline points="22,6 12,13 2,6" />
                </svg>
                <input
                  className="login-input"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  placeholder="Email Address"
                />
              </div>

              <div className="input-wrapper">
                <svg className="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                </svg>
                <input
                  className="login-input"
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  placeholder="Password"
                />
              </div>

              {/* <div className="forgot-password">
                <a href="#">Forgot Password?</a>
              </div> */}

              {error && <p className="error-msg">{error}</p>}

              <button type="submit" className="login-btn" disabled={loading}>
                {loading ? "Signing in..." : "Sign In"}
              </button>
            </form>
          </div>

        </div>
      </div>
    </>
  )
}