import { Routes, Route, Navigate } from "react-router-dom";
import { useAuth } from "./auth/AuthContext";
import LoginPage from "./auth/LoginPage";
import MainLayout from "./layout/MainLayout";
import MelodyList from "./melodies/MelodyList";
import MelodyDetail from "./melodies/MelodyDetail";
import MelodyForm from "./melodies/MelodyForm";
import MelodySettings from "./melodies/MelodySettings";
import BuilderList from "./melodies/builder/BuilderList";
import BuilderForm from "./melodies/builder/BuilderForm";
import DeviceList from "./devices/DeviceList";
import DeviceDetail from "./devices/DeviceDetail";
import DeviceForm from "./devices/DeviceForm";
import UserList from "./users/UserList";
import UserDetail from "./users/UserDetail";
import UserForm from "./users/UserForm";
import MqttDashboard from "./mqtt/MqttDashboard";
import CommandPanel from "./mqtt/CommandPanel";
import LogViewer from "./mqtt/LogViewer";
import NoteList from "./equipment/NoteList";
import NoteDetail from "./equipment/NoteDetail";
import NoteForm from "./equipment/NoteForm";
import StaffList from "./settings/StaffList";
import StaffDetail from "./settings/StaffDetail";
import StaffForm from "./settings/StaffForm";

function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: "var(--bg-primary)" }}>
        <p style={{ color: "var(--text-muted)" }}>Loading...</p>
      </div>
    );
  }

  if (!user) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

function PermissionGate({ section, action = "view", children }) {
  const { hasPermission } = useAuth();

  if (!hasPermission(section, action)) {
    return (
      <div className="flex flex-col items-center justify-center py-20">
        <div className="rounded-lg border p-8 text-center max-w-md" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
          <svg className="w-12 h-12 mx-auto mb-4" style={{ color: "var(--text-muted)" }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <h2 className="text-lg font-semibold mb-2" style={{ color: "var(--text-heading)" }}>Access Denied</h2>
          <p className="text-sm" style={{ color: "var(--text-muted)" }}>
            You don't have permission to access this feature.
            Please contact an administrator if you need access.
          </p>
        </div>
      </div>
    );
  }

  return children;
}

function RoleGate({ roles, children }) {
  const { hasRole } = useAuth();

  if (!hasRole(...roles)) {
    return (
      <div className="flex flex-col items-center justify-center py-20">
        <div className="rounded-lg border p-8 text-center max-w-md" style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}>
          <svg className="w-12 h-12 mx-auto mb-4" style={{ color: "var(--text-muted)" }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <h2 className="text-lg font-semibold mb-2" style={{ color: "var(--text-heading)" }}>Access Denied</h2>
          <p className="text-sm" style={{ color: "var(--text-muted)" }}>
            You don't have permission to access this feature.
            Please contact an administrator if you need access.
          </p>
        </div>
      </div>
    );
  }

  return children;
}

function DashboardPage() {
  const { user } = useAuth();
  return (
    <div>
      <h1 className="text-2xl font-bold mb-4" style={{ color: "var(--text-heading)" }}>Dashboard</h1>
      <p style={{ color: "var(--text-secondary)" }}>
        Welcome, {user?.name}. You are logged in as{" "}
        <span className="font-medium" style={{ color: "var(--accent)" }}>{user?.role}</span>.
      </p>
    </div>
  );
}

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        element={
          <ProtectedRoute>
            <MainLayout />
          </ProtectedRoute>
        }
      >
        <Route index element={<DashboardPage />} />

        {/* Melodies */}
        <Route path="melodies" element={<PermissionGate section="melodies"><MelodyList /></PermissionGate>} />
        <Route path="melodies/settings" element={<PermissionGate section="melodies"><MelodySettings /></PermissionGate>} />
        <Route path="melodies/new" element={<PermissionGate section="melodies" action="add"><MelodyForm /></PermissionGate>} />
        <Route path="melodies/builder" element={<PermissionGate section="melodies" action="edit"><BuilderList /></PermissionGate>} />
        <Route path="melodies/builder/new" element={<PermissionGate section="melodies" action="edit"><BuilderForm /></PermissionGate>} />
        <Route path="melodies/builder/:id" element={<PermissionGate section="melodies" action="edit"><BuilderForm /></PermissionGate>} />
        <Route path="melodies/:id" element={<PermissionGate section="melodies"><MelodyDetail /></PermissionGate>} />
        <Route path="melodies/:id/edit" element={<PermissionGate section="melodies" action="edit"><MelodyForm /></PermissionGate>} />

        {/* Devices */}
        <Route path="devices" element={<PermissionGate section="devices"><DeviceList /></PermissionGate>} />
        <Route path="devices/new" element={<PermissionGate section="devices" action="add"><DeviceForm /></PermissionGate>} />
        <Route path="devices/:id" element={<PermissionGate section="devices"><DeviceDetail /></PermissionGate>} />
        <Route path="devices/:id/edit" element={<PermissionGate section="devices" action="edit"><DeviceForm /></PermissionGate>} />

        {/* App Users */}
        <Route path="users" element={<PermissionGate section="app_users"><UserList /></PermissionGate>} />
        <Route path="users/new" element={<PermissionGate section="app_users" action="add"><UserForm /></PermissionGate>} />
        <Route path="users/:id" element={<PermissionGate section="app_users"><UserDetail /></PermissionGate>} />
        <Route path="users/:id/edit" element={<PermissionGate section="app_users" action="edit"><UserForm /></PermissionGate>} />

        {/* MQTT */}
        <Route path="mqtt" element={<PermissionGate section="mqtt"><MqttDashboard /></PermissionGate>} />
        <Route path="mqtt/commands" element={<PermissionGate section="mqtt"><CommandPanel /></PermissionGate>} />
        <Route path="mqtt/logs" element={<PermissionGate section="mqtt"><LogViewer /></PermissionGate>} />

        {/* Equipment Notes */}
        <Route path="equipment/notes" element={<PermissionGate section="equipment"><NoteList /></PermissionGate>} />
        <Route path="equipment/notes/new" element={<PermissionGate section="equipment" action="add"><NoteForm /></PermissionGate>} />
        <Route path="equipment/notes/:id" element={<PermissionGate section="equipment"><NoteDetail /></PermissionGate>} />
        <Route path="equipment/notes/:id/edit" element={<PermissionGate section="equipment" action="edit"><NoteForm /></PermissionGate>} />

        {/* Settings - Staff Management */}
        <Route path="settings/staff" element={<RoleGate roles={["sysadmin", "admin"]}><StaffList /></RoleGate>} />
        <Route path="settings/staff/new" element={<RoleGate roles={["sysadmin", "admin"]}><StaffForm /></RoleGate>} />
        <Route path="settings/staff/:id" element={<RoleGate roles={["sysadmin", "admin"]}><StaffDetail /></RoleGate>} />
        <Route path="settings/staff/:id/edit" element={<RoleGate roles={["sysadmin", "admin"]}><StaffForm /></RoleGate>} />

        <Route path="*" element={<Navigate to="/" replace />} />
      </Route>
    </Routes>
  );
}