import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { FcGoogle } from "react-icons/fc";
import { MdEmail } from "react-icons/md";
 
export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [rememberMe, setRememberMe] = useState(false);
 
  useEffect(() => {
    const savedEmail = localStorage.getItem("savedEmail");
    const savedPassword = localStorage.getItem("savedPassword");
    if (savedEmail && savedPassword) {
      setEmail(savedEmail);
      setPassword(savedPassword);
      setRememberMe(true);
    }
  }, []);
 
  const handleLogin = () => {
    console.log("Logging in with", email, password);
    if (rememberMe) {
      localStorage.setItem("savedEmail", email);
      localStorage.setItem("savedPassword", password);
    } else {
      localStorage.removeItem("savedEmail");
      localStorage.removeItem("savedPassword");
    }
  };
 
  return (
    <div className="flex items-center justify-center min-h-screen bg-blue-50">
      <Card className="w-full max-w-md p-6 rounded-2xl shadow-lg bg-white">
        <CardContent>
          <h2 className="text-2xl font-bold text-center mb-4 text-blue-600">
            เข้าสู่ระบบ
          </h2>
          <p className="text-center text-gray-600 mb-6">
            สำหรับครูและนักเรียน เพื่อจับคู่ที่เหมาะสม
          </p>
          <div className="space-y-4">
            <div className="relative">
              <MdEmail className="absolute left-3 top-3 text-gray-400" />
              <Input
                type="email"
                placeholder="อีเมล"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="pl-10"
              />
            </div>
            <Input
              type="password"
              placeholder="รหัสผ่าน"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
            <div className="flex items-center space-x-2">
              <Checkbox
                checked={rememberMe}
                onCheckedChange={() => setRememberMe(!rememberMe)}
              />
              <label className="text-gray-700 text-sm">จำฉันไว้</label>
            </div>
            <Button className="w-full bg-blue-600 text-white" onClick={handleLogin}>
              เข้าสู่ระบบ
            </Button>
            <div className="text-center text-gray-500 text-sm">หรือ</div>
            <Button className="w-full flex items-center justify-center border bg-white text-gray-700 shadow-sm hover:bg-gray-100">
              <FcGoogle className="mr-2" /> เข้าสู่ระบบด้วย Google
            </Button>
            <p className="text-center text-sm text-gray-600 mt-4">
              ยังไม่มีบัญชี? <a href="#" className="text-blue-500">สมัครสมาชิก</a>
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
 
 

aW1wb3J0IHsgdXNlU3RhdGUsIHVzZUVmZmVjdCB9IGZyb20gInJlYWN0IjsKaW1wb3J0IHsgQ2FyZCwgQ2FyZENvbnRlbnQgfSBmcm9tICJAL2NvbXBvbmVudHMvdWkvY2FyZCI7CmltcG9ydCB7IElucHV0IH0gZnJvbSAiQC9jb21wb25lbnRzL3VpL2lucHV0IjsKaW1wb3J0IHsgQnV0dG9uIH0gZnJvbSAiQC9jb21wb25lbnRzL3VpL2J1dHRvbiI7CmltcG9ydCB7IENoZWNrYm94IH0gZnJvbSAiQC9jb21wb25lbnRzL3VpL2NoZWNrYm94IjsKaW1wb3J0IHsgRmNHb29nbGUgfSBmcm9tICJyZWFjdC1pY29ucy9mYyI7CmltcG9ydCB7IE1kRW1haWwgfSBmcm9tICJyZWFjdC1pY29ucy9tZCI7CgpleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBMb2dpblBhZ2UoKSB7CiAgY29uc3QgW2VtYWlsLCBzZXRFbWFpbF0gPSB1c2VTdGF0ZSgiIik7CiAgY29uc3QgW3Bhc3N3b3JkLCBzZXRQYXNzd29yZF0gPSB1c2VTdGF0ZSgiIik7CiAgY29uc3QgW3JlbWVtYmVyTWUsIHNldFJlbWVtYmVyTWVdID0gdXNlU3RhdGUoZmFsc2UpOwoKICB1c2VFZmZlY3QoKCkgPT4gewogICAgY29uc3Qgc2F2ZWRFbWFpbCA9IGxvY2FsU3RvcmFnZS5nZXRJdGVtKCJzYXZlZEVtYWlsIik7CiAgICBjb25zdCBzYXZlZFBhc3N3b3JkID0gbG9jYWxTdG9yYWdlLmdldEl0ZW0oInNhdmVkUGFzc3dvcmQiKTsKICAgIGlmIChzYXZlZEVtYWlsICYmIHNhdmVkUGFzc3dvcmQpIHsKICAgICAgc2V0RW1haWwoc2F2ZWRFbWFpbCk7CiAgICAgIHNldFBhc3N3b3JkKHNhdmVkUGFzc3dvcmQpOwogICAgICBzZXRSZW1lbWJlck1lKHRydWUpOwogICAgfQogIH0sIFtdKTsKCiAgY29uc3QgaGFuZGxlTG9naW4gPSAoKSA9PiB7CiAgICBjb25zb2xlLmxvZygiTG9nZ2luZyBpbiB3aXRoIiwgZW1haWwsIHBhc3N3b3JkKTsKICAgIGlmIChyZW1lbWJlck1lKSB7CiAgICAgIGxvY2FsU3RvcmFnZS5zZXRJdGVtKCJzYXZlZEVtYWlsIiwgZW1haWwpOwogICAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgic2F2ZWRQYXNzd29yZCIsIHBhc3N3b3JkKTsKICAgIH0gZWxzZSB7CiAgICAgIGxvY2FsU3RvcmFnZS5yZW1vdmVJdGVtKCJzYXZlZEVtYWlsIik7CiAgICAgIGxvY2FsU3RvcmFnZS5yZW1vdmVJdGVtKCJzYXZlZFBhc3N3b3JkIik7CiAgICB9CiAgfTsKCiAgcmV0dXJuICgKICAgIDxkaXYgY2xhc3NOYW1lPSJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBtaW4taC1zY3JlZW4gYmctYmx1ZS01MCI+CiAgICAgIDxDYXJkIGNsYXNzTmFtZT0idy1mdWxsIG1heC13LW1kIHAtNiByb3VuZGVkLTJ4bCBzaGFkb3ctbGcgYmctd2hpdGUiPgogICAgICAgIDxDYXJkQ29udGVudD4KICAgICAgICAgIDxoMiBjbGFzc05hbWU9InRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWNlbnRlciBtYi00IHRleHQtYmx1ZS02MDAiPgogICAgICAgICAgICDguYDguILguYnguLLguKrguLnguYjguKPguLDguJrguJoKICAgICAgICAgIDwvaDI+CiAgICAgICAgICA8cCBjbGFzc05hbWU9InRleHQtY2VudGVyIHRleHQtZ3JheS02MDAgbWItNiI+CiAgICAgICAgICAgIOC4quC4s+C4q+C4o+C4seC4muC4hOC4o+C4ueC5geC4peC4sOC4meC4seC4geC5gOC4o+C4teC4ouC4mSDguYDguJ7guLfguYjguK3guIjguLHguJrguITguLnguYjguJfguLXguYjguYDguKvguKHguLLguLDguKrguKEKICAgICAgICAgIDwvcD4KICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSJzcGFjZS15LTQiPgogICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0icmVsYXRpdmUiPgogICAgICAgICAgICAgIDxNZEVtYWlsIGNsYXNzTmFtZT0iYWJzb2x1dGUgbGVmdC0zIHRvcC0zIHRleHQtZ3JheS00MDAiIC8+CiAgICAgICAgICAgICAgPElucHV0CiAgICAgICAgICAgICAgICB0eXBlPSJlbWFpbCIKICAgICAgICAgICAgICAgIHBsYWNlaG9sZGVyPSLguK3guLXguYDguKHguKUiCiAgICAgICAgICAgICAgICB2YWx1ZT17ZW1haWx9CiAgICAgICAgICAgICAgICBvbkNoYW5nZT17KGUpID0+IHNldEVtYWlsKGUudGFyZ2V0LnZhbHVlKX0KICAgICAgICAgICAgICAgIGNsYXNzTmFtZT0icGwtMTAiCiAgICAgICAgICAgICAgLz4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDxJbnB1dAogICAgICAgICAgICAgIHR5cGU9InBhc3N3b3JkIgogICAgICAgICAgICAgIHBsYWNlaG9sZGVyPSLguKPguKvguLHguKrguJzguYjguLLguJkiCiAgICAgICAgICAgICAgdmFsdWU9e3Bhc3N3b3JkfQogICAgICAgICAgICAgIG9uQ2hhbmdlPXsoZSkgPT4gc2V0UGFzc3dvcmQoZS50YXJnZXQudmFsdWUpfQogICAgICAgICAgICAvPgogICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0iZmxleCBpdGVtcy1jZW50ZXIgc3BhY2UteC0yIj4KICAgICAgICAgICAgICA8Q2hlY2tib3gKICAgICAgICAgICAgICAgIGNoZWNrZWQ9e3JlbWVtYmVyTWV9CiAgICAgICAgICAgICAgICBvbkNoZWNrZWRDaGFuZ2U9eygpID0+IHNldFJlbWVtYmVyTWUoIXJlbWVtYmVyTWUpfQogICAgICAgICAgICAgIC8+CiAgICAgICAgICAgICAgPGxhYmVsIGNsYXNzTmFtZT0idGV4dC1ncmF5LTcwMCB0ZXh0LXNtIj7guIjguLPguInguLHguJnguYTguKfguYk8L2xhYmVsPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPEJ1dHRvbiBjbGFzc05hbWU9InctZnVsbCBiZy1ibHVlLTYwMCB0ZXh0LXdoaXRlIiBvbkNsaWNrPXtoYW5kbGVMb2dpbn0+CiAgICAgICAgICAgICAg4LmA4LiC4LmJ4Liy4Liq4Li54LmI4Lij4Liw4Lia4LiaCiAgICAgICAgICAgIDwvQnV0dG9uPgogICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT0idGV4dC1jZW50ZXIgdGV4dC1ncmF5LTUwMCB0ZXh0LXNtIj7guKvguKPguLfguK08L2Rpdj4KICAgICAgICAgICAgPEJ1dHRvbiBjbGFzc05hbWU9InctZnVsbCBmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBib3JkZXIgYmctd2hpdGUgdGV4dC1ncmF5LTcwMCBzaGFkb3ctc20gaG92ZXI6YmctZ3JheS0xMDAiPgogICAgICAgICAgICAgIDxGY0dvb2dsZSBjbGFzc05hbWU9Im1yLTIiIC8+IOC5gOC4guC5ieC4suC4quC4ueC5iOC4o+C4sOC4muC4muC4lOC5ieC4p+C4oiBHb29nbGUKICAgICAgICAgICAgPC9CdXR0b24+CiAgICAgICAgICAgIDxwIGNsYXNzTmFtZT0idGV4dC1jZW50ZXIgdGV4dC1zbSB0ZXh0LWdyYXktNjAwIG10LTQiPgogICAgICAgICAgICAgIOC4ouC4seC4h+C5hOC4oeC5iOC4oeC4teC4muC4seC4jeC4iuC4tT8gPGEgaHJlZj0iIyIgY2xhc3NOYW1lPSJ0ZXh0LWJsdWUtNTAwIj7guKrguKHguLHguITguKPguKrguKHguLLguIrguLTguIE8L2E+CiAgICAgICAgICAgIDwvcD4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvQ2FyZENvbnRlbnQ+CiAgICAgIDwvQ2FyZD4KICAgIDwvZGl2PgogICk7Cn0KCg==