const campusLoginPersonas = [
  {
    role: "student",
    label: "Student",
    icon: "user",
    name: "Ademola Oladipo",
    email: "student@greenfield.edu.ng",
    password: "ovo-demo",
    scope: "Timetable, attendance, eligibility, device profile"
  },
  {
    role: "lecturer",
    label: "Lecturer",
    icon: "live",
    name: "Dr. Amina Bello",
    email: "lecturer@greenfield.edu.ng",
    password: "ovo-demo",
    scope: "Open sessions, live roster, alerts, class report"
  },
  {
    role: "admin",
    label: "Admin",
    icon: "shield",
    name: "Campus Admin",
    email: "admin@greenfield.edu.ng",
    password: "ovo-demo",
    scope: "Quick dashboard, approvals, monitoring, alerts"
  }
];

function CampusLoginView({ defaultRole = "student", onLogin }) {
  const initialPersona = campusLoginPersonas.find((persona) => persona.role === defaultRole) || campusLoginPersonas[0];
  const [selectedRole, setSelectedRole] = React.useState(initialPersona.role);
  const [email, setEmail] = React.useState(initialPersona.email);
  const [password, setPassword] = React.useState(initialPersona.password);
  const [showPassword, setShowPassword] = React.useState(false);
  const [error, setError] = React.useState("");
  const [hint, setHint] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  function choosePersona(persona) {
    if (busy) return;
    setSelectedRole(persona.role);
    setEmail(persona.email);
    setPassword(persona.password);
    setError("");
    setHint("");
  }

  function submitLogin(event) {
    event.preventDefault();
    if (busy) return;
    setHint("");
    if (!email.trim() || !password) {
      setError("Enter your university email and password to continue.");
      return;
    }
    const matchedPersona = campusLoginPersonas.find((persona) => persona.email === email.trim().toLowerCase() && persona.password === password);
    if (!matchedPersona) {
      setError("Incorrect email or password. Use one of the demo accounts above.");
      return;
    }
    setError("");
    setBusy(true);
    setTimeout(() => onLogin(matchedPersona.role), 700);
  }

  function forgotPassword() {
    setError("");
    setHint("Password resets are handled by your school administrator. Demo accounts are pre-filled for you.");
  }

  return (
    <form className="campus-login" onSubmit={submitLogin}>
      <div className="campus-login-brand">
        <div className="login-mark">OVO</div>
        <div>
          <span>CampusOS · Mobile</span>
          <h2>Welcome back</h2>
        </div>
      </div>

      <p className="login-explainer">
        <Icon name="lock" size={13} />
        Your role is decided by the account you sign in with — there is no in-app role switching after login.
      </p>

      <div className="login-role-tabs" role="radiogroup" aria-label="CampusOS role selector">
        {campusLoginPersonas.map((persona) => (
          <button
            aria-pressed={selectedRole === persona.role}
            className={`login-role-tab ${selectedRole === persona.role ? "active" : ""}`}
            disabled={busy}
            key={persona.role}
            onClick={() => choosePersona(persona)}
            type="button"
          >
            <Icon name={persona.icon} size={15} />
            <span>{persona.label}</span>
          </button>
        ))}
      </div>

      <label className="login-field">
        <span>University email</span>
        <input
          autoComplete="username"
          disabled={busy}
          inputMode="email"
          onChange={(event) => setEmail(event.target.value)}
          placeholder="name@greenfield.edu.ng"
          type="email"
          value={email}
        />
      </label>

      <label className="login-field">
        <span>Password</span>
        <span className="login-password-wrap">
          <input
            autoComplete="current-password"
            disabled={busy}
            onChange={(event) => setPassword(event.target.value)}
            placeholder="Enter password"
            type={showPassword ? "text" : "password"}
            value={password}
          />
          <button
            aria-label={showPassword ? "Hide password" : "Show password"}
            className="login-eye"
            onClick={() => setShowPassword(!showPassword)}
            type="button"
          >
            <Icon name={showPassword ? "eyeoff" : "eye"} size={16} />
          </button>
        </span>
      </label>

      <div className="login-aux-row">
        <label className="login-remember">
          <input checked readOnly type="checkbox" />
          Remember me
        </label>
        <button className="login-forgot" disabled={busy} onClick={forgotPassword} type="button">Forgot password?</button>
      </div>

      {error && (
        <div className="login-error">
          <Icon name="alert" size={14} />
          <span>{error}</span>
        </div>
      )}
      {hint && !error && (
        <div className="login-hint">
          <Icon name="bell" size={14} />
          <span>{hint}</span>
        </div>
      )}

      <button className={`button success login-submit`} disabled={busy} type="submit">
        {busy && <span className="login-spinner"></span>}
        {busy ? "Signing in…" : `Sign in as ${campusLoginPersonas.find((p) => p.role === selectedRole)?.label || "Student"}`}
      </button>

      <div className="login-credential-card">
        <span>Demo credentials</span>
        <strong>{initialScopeName(selectedRole)}</strong>
        <p>{campusLoginPersonas.find((p) => p.role === selectedRole)?.scope}</p>
        <code>{email.trim().toLowerCase()} / ovo-demo</code>
      </div>

      <div className="login-footer">Greenfield University demo tenant · CampusOS preview build · Mock data only</div>
    </form>
  );
}

function initialScopeName(role) {
  const persona = campusLoginPersonas.find((item) => item.role === role);
  return persona ? persona.name : "Ademola Oladipo";
}

function initialsForName(name) {
  return name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
}

function MobileAccountHeader({ dataset, role, product = "CampusOS", accountName, accountScope, onAccount }) {
  const campusIdentity = {
    student: "Ademola Oladipo",
    lecturer: dataset.lecturer,
    admin: "Campus Admin"
  }[role];
  const identity = accountName || campusIdentity;
  const productName = product === "Workforce" ? "OVO Workforce" : "OVO CampusOS";
  const organisation = product === "Workforce" ? "Mobile app" : dataset.tenant;

  return (
    <div className={`mobile-account-header ${product === "Workforce" ? "workforce" : ""}`}>
      <div className="mobile-app-brand">
        <div className="login-mark mobile-app-mark">OVO</div>
        <div>
          <span>{productName}</span>
          <strong>{organisation}</strong>
          <small>{accountScope || `${role} account`}</small>
        </div>
      </div>
      <button aria-label={`${identity} account`} className="mobile-account-trigger" onClick={onAccount} type="button">
        <span className={`student-avatar small ${product === "Workforce" ? "workforce-avatar" : ""}`}>{initialsForName(identity)}</span>
      </button>
    </div>
  );
}

function MobileAccountSheet({ accountName, role, product = "CampusOS", scope, manageLabel, onManage, onLogout }) {
  return (
    <div className={`mobile-account-sheet ${product === "Workforce" ? "workforce" : ""}`}>
      <div>
        <span>Signed in as</span>
        <strong>{accountName}</strong>
        <small>{scope || `${role} account`}</small>
      </div>
      <div className="mobile-account-actions">
        {onManage && (
          <button onClick={onManage} type="button">
            <Icon name="user" size={13} />
            {manageLabel || "Manage account"}
          </button>
        )}
        <button className="danger" onClick={onLogout} type="button">
          <Icon name="logout" size={13} />
          Sign out
        </button>
      </div>
    </div>
  );
}

Object.assign(window, {
  CampusLoginView,
  initialScopeName,
  initialsForName,
  MobileAccountHeader,
  MobileAccountSheet,
  campusLoginPersonas
});