import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import config from "../config";
import { useAuth } from "../AuthContext";
import PageWrapper from "../components/PageWrapper";

const styles = {
  form: {
    backgroundColor: "#2a2a2a",
    padding: "2rem",
    borderRadius: "8px",
    boxShadow: "0 0 10px rgba(0,0,0,0.5)",
    width: "100%",
    maxWidth: "350px",
    display: "flex",
    flexDirection: "column",
    gap: "1rem",
  },
  title: {
    textAlign: "center",
    color: "#f2f2f2",
    marginBottom: "1rem",
  },
  input: {
    padding: "0.75rem",
    borderRadius: "4px",
    border: "1px solid #444",
    backgroundColor: "#333",
    color: "#eee",
    outline: "none",
  },
  buttonRow: {
    display: "flex",
    justifyContent: "space-between",
    gap: "0.5rem",
  },
  button: {
    flex: 1,
    padding: "0.75rem",
    borderRadius: "4px",
    border: "none",
    backgroundColor: "#555",
    color: "#fff",
    cursor: "pointer",
    transition: "background 0.2s ease",
  },
};

const Login = () => {
  const navigate = useNavigate();
  const { login } = useAuth();

  const [form, setForm] = useState({
    username: "",
    password: "",
  });

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const payload = {
      username: form.username,
      password: form.password,
    };

    try {
      const res = await fetch(`${config.apiBaseUrl}/api/Auth/login`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.message || "Login failed");
      }

      const data = await res.json();
      login(data.accessToken);

      localStorage.setItem("token", data.accessToken);
      localStorage.setItem("role", data.role);
      localStorage.setItem("username", data.username);

      navigate("/dashboard");
    } catch (err) {
      console.error("Login error:", err);
    }
  };

  return (
    <PageWrapper center>
      <form onSubmit={handleSubmit} style={styles.form}>
        <h2 style={styles.title}>Login</h2>
        <input
          type="text"
          name="username"
          placeholder="Username"
          value={form.username}
          onChange={handleChange}
          style={styles.input}
          required
        />
        <input
          type="password"
          name="password"
          placeholder="Password"
          value={form.password}
          onChange={handleChange}
          style={styles.input}
          required
        />
        <div style={styles.buttonRow}>
          <button type="submit" style={styles.button}>
            Login
          </button>
          <button
            type="button"
            onClick={() => navigate("/register")}
            style={styles.button}
          >
            Register
          </button>
        </div>
      </form>
    </PageWrapper>
  );
};

export default Login;