import { useState, useContext } from "react"
import { authLogin, authRegister } from "../auth/authService"
import { AuthContext } from "../context/AuthContext"

export default function LoginPage() {
  const { login } = useContext(AuthContext)
  const [mode, setMode] = useState("login")
  const [nama, setNama] = useState("")
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [loading, setLoading] = useState(false)

  const handleLogin = async (e) => {
    e.preventDefault()
    setLoading(true)
    const result = await authLogin(username, password)
    setLoading(false)
    if (result.success) {
      login({ username: result.username, nama: result.nama, role: result.role })
    } else {
      alert(result.message)
    }
  }

  const handleRegister = async (e) => {
    e.preventDefault()
    setLoading(true)
    const result = await authRegister(nama, username, password)
    setLoading(false)
    if (result.success) {
      alert("Registrasi berhasil")
      setMode("login")
    } else {
      alert(result.message)
    }
  }

  return (
    <div style={s.page}>
      <div style={s.card}>

        <div style={s.logoRow}>
          <span style={s.logoEmoji}>🥚</span>
          <span style={s.logoName}>Sadewa</span>
        </div>

        <p style={s.tagline}>
          {mode === "login" ? "Masuk ke akun kamu" : "Buat akun baru"}
        </p>

        <div style={s.tabs}>
          <button
            onClick={() => setMode("login")}
            style={{ ...s.tab, ...(mode === "login" ? s.tabActive : {}) }}
          >
            Login
          </button>
          <button
            onClick={() => setMode("register")}
            style={{ ...s.tab, ...(mode === "register" ? s.tabActive : {}) }}
          >
            Register
          </button>
        </div>

        <div style={s.form}>
          {mode === "register" && (
            <div style={s.fieldGroup}>
              <label style={s.label}>Nama lengkap</label>
              <input
                style={s.input}
                placeholder="Masukkan nama"
                value={nama}
                onChange={e => setNama(e.target.value)}
              />
            </div>
          )}

          <div style={s.fieldGroup}>
            <label style={s.label}>Username</label>
            <input
              style={s.input}
              placeholder="Masukkan username"
              value={username}
              onChange={e => setUsername(e.target.value)}
            />
          </div>

          <div style={s.fieldGroup}>
            <label style={s.label}>Password</label>
            <input
              style={s.input}
              type="password"
              placeholder="Masukkan password"
              value={password}
              onChange={e => setPassword(e.target.value)}
            />
          </div>

          <button
            onClick={mode === "login" ? handleLogin : handleRegister}
            style={{ ...s.submitBtn, opacity: loading ? 0.7 : 1 }}
            disabled={loading}
          >
            {loading ? "Memproses..." : mode === "login" ? "Masuk" : "Daftar"}
          </button>
        </div>
      </div>
    </div>
  )
}

const s = {
  page: {
    minHeight: "100vh",
background: "radial-gradient(circle at top left, #f59e0b22, transparent 25%), linear-gradient(135deg, #1c1917, #431407, #1e293b)", display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontFamily: "system-ui, sans-serif",
  },
  card: {
    width: 360,
    background: "#161b22",
    border: "1px solid #21262d",
    borderRadius: 14,
    padding: "32px 28px",
    boxSizing: "border-box",
  },
  logoRow: {
    display: "flex",
    alignItems: "center",
    gap: 8,
    marginBottom: 4,
  },
  logoEmoji: {
    fontSize: 28,
  },
  logoName: {
    fontSize: 22,
    fontWeight: 700,
    color: "#f0f6fc",
    letterSpacing: "-0.5px",
  },
  tagline: {
    fontSize: 13,
    color: "#6e7681",
    marginBottom: 24,
    marginTop: 2,
  },
  tabs: {
    display: "flex",
    background: "#0d1117",
    borderRadius: 8,
    padding: 3,
    marginBottom: 24,
    border: "1px solid #21262d",
  },
  tab: {
    flex: 1,
    padding: "7px 0",
    border: "none",
    background: "transparent",
    color: "#6e7681",
    fontSize: 13,
    cursor: "pointer",
    borderRadius: 6,
    fontWeight: 500,
    transition: "all 0.15s",
  },
  tabActive: {
  background: "linear-gradient(135deg, #f59e0b, #ef4444)",
  color: "#ffffff",
  boxShadow: "0 4px 14px rgba(245, 158, 11, 0.35)",
},
  form: {
    display: "flex",
    flexDirection: "column",
    gap: 16,
  },
  fieldGroup: {
    display: "flex",
    flexDirection: "column",
    gap: 6,
  },
  label: {
    fontSize: 12,
    color: "#8b949e",
    fontWeight: 500,
  },
  input: {
    background: "#0d1117",
    border: "1px solid #21262d",
    borderRadius: 8,
    padding: "10px 12px",
    color: "#f0f6fc",
    fontSize: 14,
    outline: "none",
    transition: "border 0.15s",
    fontFamily: "system-ui, sans-serif",
  },
  submitBtn: {
    marginTop: 4,
    background: "linear-gradient(135deg, #f59e0b, #ef4444)",
    border: "none",
    borderRadius: 8,
    padding: "11px 0",
    color: "white",
    fontWeight: 600,
    fontSize: 14,
    cursor: "pointer",
    transition: "opacity 0.15s",
    letterSpacing: "0.2px",
  },
}