import { useState } from "react";
import { Header } from "./components/layout/Header";
import { Sidebar } from "./components/layout/Sidebar";
import { DashboardPage } from "./pages/DashboardPage";
import { roleOptions } from "./data/mockData";

const roleLabels = {
  super_admin: "System Administrator",
  ministry_justice: "Justice Officer",
  ministry_finance: "Finance Officer",
  owner: "Ahmed Owner",
  teller: "Teller Officer",
  payment: "Payment Officer",
  executive: "Executive Officer"
};

export default function App() {
  const [role, setRole] = useState("owner");
  const [authenticated, setAuthenticated] = useState(false);

  if (!authenticated) {
    return (
      <div className="login-shell">
        <section className="login-hero">
          <img src="/NESOS/logo.jpg" alt="State logo" className="hero-logo" />
          <h1>North East State of Somalia Justice & Notarial Services</h1>
          <p>
            Official platform for notary offices to manage legal transactions,
            tax calculations, and government reporting securely.
          </p>
        </section>

        <section className="login-panel">
          <div>
            <h2>Welcome back</h2>
            <p className="login-copy">Sign in to your E-Notary account</p>
          </div>

          <label>
            Email address
            <input defaultValue="owner@notary.so" />
          </label>

          <label>
            Password
            <input type="password" defaultValue="owner123" />
          </label>

          <label>
            Sign in as
            <select value={role} onChange={(event) => setRole(event.target.value)}>
              {roleOptions.map((option) => (
                <option key={option.id} value={option.id}>
                  {option.label}
                </option>
              ))}
            </select>
          </label>

          <button className="solid-button login-button" onClick={() => setAuthenticated(true)}>
            Sign in
          </button>

          <button className="link-button">Apply to register your notary office</button>

          <article className="card demo-card">
            <h3>Demo credentials</h3>
            <p>`admin@enotary.gov / admin123`</p>
            <p>`justice@enotary.gov / justice123`</p>
            <p>`finance@enotary.gov / finance123`</p>
            <p>`owner@notary.so / owner123`</p>
            <p>`teller@notary.so / teller123`</p>
            <p>`payment@notary.so / payment123`</p>
            <p>`executive@notary.so / exec123`</p>
          </article>
        </section>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <Sidebar role={role} />
      <main className="main-shell">
        <Header roleLabel={roleLabels[role]} />
        <section className="role-switcher">
          <div>
            <p className="eyebrow">Demo access</p>
            <h2>Switch system roles instantly</h2>
          </div>
          <div className="inline-actions">
            <select value={role} onChange={(event) => setRole(event.target.value)}>
              {roleOptions.map((option) => (
                <option key={option.id} value={option.id}>
                  {option.label}
                </option>
              ))}
            </select>
            <button className="ghost-button" onClick={() => setAuthenticated(false)}>
              Back to login
            </button>
          </div>
        </section>
        <DashboardPage role={role} />
      </main>
    </div>
  );
}
