"use client";

import Image from "next/image";
import { useState } from "react";
import { useAuth } from "@/lib/auth-context";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

export default function LoginPage() {
  const { loginDemo } = useAuth();
  const router = useRouter();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (!username || !password) {
      setError("Silakan isi username dan password");
      return;
    }
    loginDemo("admin");
    router.replace("/dashboard");
  };

  return (
    <div className="flex min-h-[125vh] flex-col items-center justify-center p-4">
      <div className="mb-8 flex justify-center">
        <Image
          src="/spekta-tech-nusantara-logo.png"
          alt="Spekta Tech Nusantara"
          width={520}
          height={166}
          priority
          className="h-auto w-full max-w-[13rem] object-contain"
        />
      </div>
      <Card className="w-full max-w-sm">
        <CardHeader className="text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary">SPEKTA TECH NUSANTARA</p>
          <p className="mt-1 text-sm text-muted-foreground">CRM Tender Workspace</p>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleLogin} className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">Username</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary"
                placeholder="Masukkan username"
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Password</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary"
                placeholder="Masukkan password"
              />
            </div>
            {error ? <p className="text-xs text-red-500">{error}</p> : null}
            <Button type="submit" className="w-full">
              Login
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}