"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { COMPANY_NAME } from "@/lib/constants"
import { Eye, EyeOff, Loader2 } from "lucide-react"

function LoginForm() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [remember, setRemember] = useState(false)

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

    await new Promise((resolve) => setTimeout(resolve, 1200))

    router.push("/dashboard")
  }

  return (
    <>
      <style>{`
.left-panel {
  background: #0a0a0f;
  position: relative;
  overflow: hidden;
}
.right-panel {
  background: #111118;
  width: 420px;
  flex: none;
  position: relative;
}
.panel-divider {
  width: 1px;
  background: rgba(180, 192, 210, 0.1);
  flex: none;
}
.growth-word {
  position: relative;
  color: #1BB0CE;
}
.growth-word::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1BB0CE;
  animation: pulseUnderline 2.5s ease-in-out infinite;
}
@keyframes pulseUnderline {
  0%, 100% { background-color: #1BB0CE; }
  50% { background-color: rgba(180, 192, 210, 0.6); }
}
.stats-row {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  gap: 0;
}
.stat {
  flex: 1;
  max-width: 120px;
  text-align: center;
  position: relative;
  padding-top: 12px;
}
.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1BB0CE, rgba(180,192,210,1), #1BB0CE);
  background-size: 200% 100%;
  animation: statSweep 2.5s ease-in-out infinite;
}
.stat:nth-child(2)::before {
  animation-delay: 0.6s;
}
.stat:nth-child(3)::before {
  animation-delay: 1.2s;
}
@keyframes statSweep {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1BB0CE;
  line-height: 1.2;
}
.stat-label {
  font-size: 11px;
  color: rgba(232,232,239,0.3);
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.testimonial {
  border-left: 2px solid rgba(27,176,206,0.25);
  background: rgba(27,176,206,0.06);
  padding: 10px 14px;
}
.stars-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.wave-canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 0;
  pointer-events: none;
  background: #0a0a0f;
}
.accent-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1BB0CE, rgba(232,232,239,0.15), transparent);
  animation: pulseAccent 3s ease-in-out infinite;
}
@keyframes pulseAccent {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.input-sheen {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.input-sheen::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -100%;
  width: 60%;
  height: 120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: rotate(-15deg);
  animation: sheenFloat 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.input-sheen-delayed::before {
  animation-delay: 1s;
}
.input-sheen:focus-within::before {
  animation: none;
  opacity: 0;
}
@keyframes sheenFloat {
  0% { left: -100%; }
  100% { left: 200%; }
}
.login-input {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, #0d0d15, #151520, #0d0d15);
  background-size: 200% 200%;
  animation: bgShift 6s ease-in-out infinite;
  border: 1.5px solid rgba(180,192,210,0.15);
  border-radius: 4px;
  font-size: 13px;
  color: #e8e8ef;
  padding: 0 12px;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.login-input::placeholder {
  color: rgba(232,232,239,0.2);
}
.login-input:focus {
  border-color: #1BB0CE;
  outline: none;
  background: #111118;
  animation: none;
}
@keyframes bgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(232,232,239,0.3);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  z-index: 3;
}
.password-toggle:hover {
  color: rgba(232,232,239,0.5);
}
.login-checkbox {
  accent-color: #1BB0CE;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.auth-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1BB0CE;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 13px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease;
}
.auth-btn:hover {
  background: #17a0bc;
}
.auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.auth-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: btnSweep 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnSweep {
  0% { left: -100%; }
  100% { left: 200%; }
}
.login-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(232,232,239,0.4);
  display: block;
  margin-bottom: 6px;
}
.body-text { color: rgba(232,232,239,0.5); }
.subheading-text { color: rgba(232,232,239,0.38); }
.checkbox-text { color: rgba(232,232,239,0.38); }
.footer-text { color: rgba(232,232,239,0.2); }
      `}</style>

      <div className="flex min-h-screen bg-[#0a0a0f]">
        <div className="left-panel flex flex-1 flex-col p-12">
          <div className="relative z-10">
            <img
              src="/logo/CompanyLogo.png"
              alt={COMPANY_NAME}
              className="h-44 w-auto object-contain"
            />
          </div>

          <div className="relative z-10 flex-1 flex items-center justify-center">
            <div className="text-center">
              <h1 className="text-[34px] font-extrabold text-[#e8e8ef] leading-tight tracking-[-0.6px]">
                Your Agency&apos;s{" "}
                <span className="growth-word">Growth</span>{" "}
                Starts Here
              </h1>
              <p className="mt-4 text-[13px] leading-[1.7] max-w-[360px] mx-auto body-text">
                Manage leads, track conversions, and grow your web development business with our CRM.
              </p>
              <div className="stats-row">
                <div className="stat">
                  <div className="stat-number">{counts.leads.toLocaleString()}</div>
                  <div className="stat-label">leads tracked</div>
                </div>
                <div className="stat">
                  <div className="stat-number">{counts.conversion}%</div>
                  <div className="stat-label">conversion lift</div>
                </div>
                <div className="stat">
                  <div className="stat-number">{counts.users}</div>
                  <div className="stat-label">active users</div>
                </div>
              </div>
            </div>
          </div>

          <div className="relative z-10 testimonial">
            <p className="text-[12px] italic" style={{ color: "#0a0a0f" }}>
              &ldquo;This CRM transformed how we manage our sales pipeline. We&apos;ve seen a 40% increase in lead conversion.&rdquo;
            </p>
            <p className="text-[11px] mt-1" style={{ color: "#0a0a0f" }}>
              Marcus Johnson, Sales Lead at Coast IT
            </p>
          </div>

          <canvas ref={canvasRef} className="wave-canvas" />
        </div>

        <div className="panel-divider" />

        <div className="right-panel flex items-center justify-center p-10">
          <canvas ref={starsCanvasRightRef} className="stars-canvas" />
          <div className="accent-line" />

          <div className="w-full" style={{ maxWidth: 340 }}>
            <h2 className="text-[24px] font-bold text-[#e8e8ef] tracking-[-0.3px] mb-[5px]">
              Welcome back
            </h2>
            <p className="text-[13px] mb-[26px] subheading-text">
              Sign in to your account to continue
            </p>

          <form onSubmit={handleSubmit} className="space-y-5">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="name@company.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                autoComplete="email"
              />
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <button
                  type="button"
                  className="text-xs text-primary hover:underline"
                >
                  Forgot password?
                </button>
              </div>
              <div className="relative">
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="Enter your password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  autoComplete="current-password"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="remember"
                checked={remember}
                onCheckedChange={(checked) => setRemember(checked as boolean)}
              />
              <label
                htmlFor="remember"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Remember me
              </label>
            </div>

            <Button type="submit" className="w-full" disabled={loading}>
              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              {loading ? "Signing in..." : "Sign in"}
            </Button>
          </form>

            <p className="text-center text-[11px] mt-4 footer-text">
              By signing in, you agree to our{" "}
              <button type="button" className="text-[#1BB0CE] hover:underline">
                Terms of Service
              </button>{" "}
              and{" "}
              <button type="button" className="text-[#1BB0CE] hover:underline">
                Privacy Policy
              </button>
            </p>
          </div>
        </div>
      </div>
    </>
  )
}