'use client'

import { useActionState } from 'react'
import { login } from './actions'
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 { Loader2, Eye, EyeOff, Activity } from 'lucide-react'
import { useState } from 'react'

export default function LoginPage() {
  const [state, formAction, isPending] = useActionState(login, null)
  const [showPassword, setShowPassword] = useState(false)

  return (
    <div className="flex min-h-screen bg-black text-white font-sans overflow-hidden">
      {/* Left Side - Guide */}
      <div className="hidden lg:flex w-1/2 flex-col justify-center p-12 relative overflow-hidden">
        {/* Background Accents */}
        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-gray-900 via-black to-black -z-10"></div>
        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gray-800 rounded-full blur-3xl opacity-20"></div>

        <div className="mb-12">
          <div className="flex items-center gap-2 mb-2">
            <div className="bg-white/10 p-2 rounded-full border border-white/20">
              <Activity className="h-6 w-6 text-white" />
            </div>
            <h1 className="text-2xl font-bold tracking-tight">HealthPortal</h1>
          </div>
          <p className="text-gray-400 text-sm tracking-widest uppercase">SISTEM INFORMASI KESEHATAN</p>
        </div>

        <h2 className="text-4xl font-bold mb-8">Panduan Login</h2>

        <div className="space-y-8 relative">
          <div className="absolute left-3.5 top-2 bottom-2 w-0.5 bg-gray-800 -z-10"></div>

          <div className="flex gap-4">
            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center font-bold text-sm">1</div>
            <div>
              <h3 className="text-lg font-semibold text-white">Masukkan Username</h3>
              <p className="text-gray-400 text-sm mt-1">Gunakan username yang telah diberikan oleh administrator sistem.</p>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center font-bold text-sm">2</div>
            <div>
              <h3 className="text-lg font-semibold text-white">Masukkan Password</h3>
              <p className="text-gray-400 text-sm mt-1">Ketik password Anda dengan benar. Password bersifat case-sensitive.</p>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center font-bold text-sm">3</div>
            <div>
              <h3 className="text-lg font-semibold text-white">Klik Tombol Masuk</h3>
              <p className="text-gray-400 text-sm mt-1">Setelah mengisi data, klik tombol "Masuk" untuk mengakses sistem.</p>
            </div>
          </div>
        </div>

        <div className="mt-12 bg-gray-900/50 border border-gray-800 rounded-lg p-6 flex gap-4 backdrop-blur-sm">
          <div className="mt-1">
            <div className="w-5 h-5 rounded-full border border-gray-500 flex items-center justify-center text-xs text-gray-500 font-bold">?</div>
          </div>
          <div>
            <h4 className="font-semibold text-white">Lupa Password?</h4>
            <p className="text-gray-400 text-sm mt-1">Hubungi administrator untuk reset password atau gunakan fitur "Lupa Password" di form login.</p>
          </div>
        </div>

        <div className="mt-12 text-gray-500 text-sm">
          <p>Bantuan: (021) 555-1234</p>
          <div className="mt-4 border-t border-gray-800 pt-4 flex items-center gap-2">
            <div className="p-1 bg-white/5 rounded-full">
              <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-gray-500"><path d="M7.49999 0.875C3.84099 0.875 0.874992 3.841 0.874992 7.5C0.874992 11.159 3.84099 14.125 7.49999 14.125C11.159 14.125 14.125 11.159 14.125 7.5C14.125 3.841 11.159 0.875 7.49999 0.875ZM7.49999 1.875C10.6066 1.875 13.125 4.3934 13.125 7.5C13.125 10.6066 10.6066 13.125 7.49999 13.125C4.39339 13.125 1.87499 10.6066 1.87499 7.5C1.87499 4.3934 4.39339 1.875 7.49999 1.875ZM6.89999 10.5H8.09999V11.7H6.89999V10.5ZM6.89999 3.3H8.09999V9.3H6.89999V3.3Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
            </div>
            <span>Sistem ini dilindungi dan diawasi. Akses tidak sah akan ditindak sesuai hukum yang berlaku.</span>
          </div>
        </div>

      </div>

      {/* Right Side - Login Form */}
      <div className="w-full lg:w-1/2 bg-white text-black flex flex-col items-center justify-center p-4 md:p-8 relative">
        <div className="w-full max-w-md bg-white p-6 md:p-8 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] border border-gray-100 relative z-10 mb-10">
          {/* Decorative Elements for Card style */}
          <div className="absolute top-0 left-0 w-full h-2 bg-black rounded-t-2xl"></div>

          <div className="text-center mb-10">
            <h2 className="text-3xl font-bold mb-2">Login</h2>
            <p className="text-gray-500 text-sm">Masukkan Akun Anda untuk melanjutkan</p>
          </div>

          <form action={formAction} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="username" className="text-xs font-bold uppercase tracking-wider text-gray-700">Nama Pengguna</Label>
              <div className="relative">
                <div className="absolute left-3 top-2.5 text-gray-400">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                </div>
                <Input
                  id="username"
                  name="username"
                  placeholder="Masukkan nama pengguna"
                  required
                  className="pl-10 h-12 bg-gray-50 border-gray-200 focus:border-black focus:ring-black transition-all"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="password" className="text-xs font-bold uppercase tracking-wider text-gray-700">Kata Sandi</Label>
              <div className="relative">
                <div className="absolute left-3 top-2.5 text-gray-400">
                  <svg width="20" height="20" 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"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                </div>
                <Input
                  id="password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="Masukkan kata sandi"
                  required
                  className="pl-10 pr-10 h-12 bg-gray-50 border-gray-200 focus:border-black focus:ring-black transition-all"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-3 text-gray-400 hover:text-black transition-colors"
                >
                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                </button>
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="kode_unik_nik" className="text-xs font-bold uppercase tracking-wider text-gray-700">Kode Unik / NIK</Label>
              <div className="relative">
                <div className="absolute left-3 top-2.5 text-gray-400">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                </div>
                <Input
                  id="kode_unik_nik"
                  name="kode_unik_nik"
                  placeholder="Masukkan Kode Unik / NIK"
                  required
                  className="pl-10 h-12 bg-gray-50 border-gray-200 focus:border-black focus:ring-black transition-all"
                />
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Checkbox id="remember" name="remember" className="data-[state=checked]:bg-black data-[state=checked]:border-black" />
                <label
                  htmlFor="remember"
                  className="text-xs font-bold uppercase tracking-wider text-gray-500 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                >
                  Ingat Saya
                </label>
              </div>
              <a href="#" className="text-xs font-bold uppercase tracking-wider text-black hover:underline">Lupa Kata Sandi?</a>
            </div>

            {state?.message && (
              <div className="bg-red-50 text-red-600 p-3 rounded-md text-sm font-medium flex items-center gap-2">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
                {state.message}
              </div>
            )}

            <Button type="submit" className="w-full h-12 bg-black hover:bg-gray-800 text-white font-bold uppercase tracking-wider text-sm shadow-lg shadow-black/20" disabled={isPending}>
              {isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : 'Masuk'}
            </Button>

            <div className="text-center pt-2">
              <p className="text-xs text-gray-400 font-medium flex items-center justify-center gap-2">
                <svg width="12" height="12" 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"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                KONEKSI AMAN & TERENKRIPSI
              </p>
            </div>

          </form>

        </div>
        <div className="flex flex-wrap justify-center gap-4 md:gap-6 text-xs font-bold text-gray-400 uppercase tracking-widest mt-auto mb-4 px-4 text-center">
          <a href="#" className="hover:text-black transition-colors">Privasi</a>
          <span className="hidden md:inline text-gray-300">•</span>
          <a href="#" className="hover:text-black transition-colors">Ketentuan</a>
          <span className="hidden md:inline text-gray-300">•</span>
          <a href="#" className="hover:text-black transition-colors">Bantuan</a>
        </div>
        <div className="text-[10px] text-gray-300 mb-6">
          © 2024 HealthPortal. Hak Cipta Dilindungi.
        </div>
      </div>
    </div>
  )
}