import { useState } from 'react'
import { Link } from 'react-router'

import { EyeIcon } from '~/components/icons/eye'
import { Button } from '~/components/ui/button'
import { APP } from '~/configs/meta'

const AuthLayout = () => {
  const [showPassword, setShowPassword] = useState(false)

  return (
    <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
      <div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
        <div className="flex flex-col items-center">
          <Link to="/lg-admin">
            <img
              src={APP.logo}
              alt={APP.title}
              className="h-[80px]"
            />
          </Link>
        </div>
        <p className="text-center">
          Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
        </p>
        <div>
          <form>
            {/* Input Email / No Telepon */}
            <div className="mb-4">
              <label
                htmlFor="email"
                className="mb-1 block text-gray-700"
              >
                Email/No. Telepon
              </label>
              <input
                type="text"
                placeholder="Contoh: legal@legalgo.id"
                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
              />
            </div>

            {/* Input Password */}
            <div className="relative mb-4">
              <label
                htmlFor="password"
                className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
              >
                Kata Sandi
              </label>
              <input
                type={showPassword ? 'text' : 'password'}
                placeholder="Masukkan Kata Sandi"
                className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
              />
              <button
                type="button"
                className="absolute top-9 right-3 text-gray-500"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? (
                  <EyeIcon
                    width={15}
                    height={15}
                  />
                ) : (
                  <EyeIcon
                    width={15}
                    height={15}
                  />
                )}
              </button>
            </div>

            {/* Lupa Kata Sandi */}
            <div className="mb-4 flex justify-between">
              <span className="text-gray-600">Lupa Kata Sandi?</span>
              <Link
                to="/lg-admin/auth/reset-password"
                className="font-semibold text-[#2E2F7C]"
              >
                Reset Kata Sandi
              </Link>
            </div>

            {/* Tombol Masuk */}
            <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
              Masuk
            </Button>
          </form>
        </div>
      </div>
      {/* Link Daftar */}
      <div className="mt-4 text-center text-sm">
        Belum punya akun?{' '}
        <Button
          onClick={() => {}}
          className="font-semibold text-[#2E2F7C]"
          variant="link"
          size="fit"
        >
          Daftar Disini
        </Button>
      </div>
    </div>
  )
}
export default AuthLayout