import { Routes, Route, Navigate } from "react-router-dom";
import { useAuth } from "./auth/AuthContext";
import CloudFlashPage from "./cloudflash/CloudFlashPage";
import SerialMonitorPage from "./serial/SerialMonitorPage";
import SerialLogViewer from "./serial/SerialLogViewer";
import PublicFeaturesSettings from "./settings/PublicFeaturesSettings";
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 MelodyComposer from "./melodies/MelodyComposer";
import ArchetypeList from "./melodies/archetypes/ArchetypeList";
import ArchetypeForm from "./melodies/archetypes/ArchetypeForm";
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";
import DeviceInventory from "./manufacturing/DeviceInventory";
import BatchCreator from "./manufacturing/BatchCreator";
import DeviceInventoryDetail from "./manufacturing/DeviceInventoryDetail";
import ProvisioningWizard from "./manufacturing/ProvisioningWizard";
import FirmwareManager from "./firmware/FirmwareManager";
import DashboardPage from "./dashboard/DashboardPage";
import ApiReferencePage from "./developer/ApiReferencePage";
import { ProductList, ProductForm } from "./crm/products";
import { CustomerList, CustomerForm, CustomerDetail } from "./crm/customers";
import { OrderList } from "./crm/orders";
import { QuotationForm, AllQuotationsList } from "./crm/quotations";
import CommsPage from "./crm/inbox/CommsPage";
import MailPage from "./crm/mail/MailPage";

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;
}


export default function App() {
  return (
    <Routes>
      {/* Public routes — no login required */}
      <Route path="/cloudflash" element={<CloudFlashPage />} />
      <Route path="/serial-monitor" element={<SerialMonitorPage />} />

      <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/composer" element={<PermissionGate section="melodies" action="edit"><MelodyComposer /></PermissionGate>} />
        <Route path="melodies/new" element={<PermissionGate section="melodies" action="add"><MelodyForm /></PermissionGate>} />
        <Route path="melodies/archetypes" element={<PermissionGate section="melodies" action="edit"><ArchetypeList /></PermissionGate>} />
        <Route path="melodies/archetypes/new" element={<PermissionGate section="melodies" action="edit"><ArchetypeForm /></PermissionGate>} />
        <Route path="melodies/archetypes/:id" element={<PermissionGate section="melodies" action="edit"><ArchetypeForm /></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>} />

        {/* Manufacturing */}
        <Route path="manufacturing" element={<PermissionGate section="manufacturing"><DeviceInventory /></PermissionGate>} />
        <Route path="manufacturing/batch/new" element={<PermissionGate section="manufacturing" action="add"><BatchCreator /></PermissionGate>} />
        <Route path="manufacturing/provision" element={<PermissionGate section="manufacturing" action="edit"><ProvisioningWizard /></PermissionGate>} />
        <Route path="manufacturing/devices/:sn" element={<PermissionGate section="manufacturing"><DeviceInventoryDetail /></PermissionGate>} />
        <Route path="firmware" element={<PermissionGate section="manufacturing"><FirmwareManager /></PermissionGate>} />

        {/* Mail */}
        <Route path="mail" element={<PermissionGate section="crm"><MailPage /></PermissionGate>} />

        {/* CRM */}
        <Route path="crm/comms" element={<PermissionGate section="crm"><CommsPage /></PermissionGate>} />
        <Route path="crm/inbox" element={<Navigate to="/crm/comms" replace />} />
        <Route path="crm/products" element={<PermissionGate section="crm"><ProductList /></PermissionGate>} />
        <Route path="crm/products/new" element={<PermissionGate section="crm" action="edit"><ProductForm /></PermissionGate>} />
        <Route path="crm/products/:id" element={<PermissionGate section="crm"><ProductForm /></PermissionGate>} />
        <Route path="crm/customers" element={<PermissionGate section="crm"><CustomerList /></PermissionGate>} />
        <Route path="crm/customers/new" element={<PermissionGate section="crm" action="edit"><CustomerForm /></PermissionGate>} />
        <Route path="crm/customers/:id" element={<PermissionGate section="crm"><CustomerDetail /></PermissionGate>} />
        <Route path="crm/customers/:id/edit" element={<PermissionGate section="crm" action="edit"><CustomerForm /></PermissionGate>} />
        <Route path="crm/orders" element={<PermissionGate section="crm"><OrderList /></PermissionGate>} />
        <Route path="crm/quotations" element={<PermissionGate section="crm"><AllQuotationsList /></PermissionGate>} />
        <Route path="crm/quotations/new" element={<PermissionGate section="crm" action="edit"><QuotationForm /></PermissionGate>} />
        <Route path="crm/quotations/:id" element={<PermissionGate section="crm" action="edit"><QuotationForm /></PermissionGate>} />

        {/* Developer */}
        {/* TODO: replace RoleGate with a dedicated "developer" permission once granular permissions are implemented */}
        <Route path="developer/api" element={<RoleGate roles={["sysadmin", "admin"]}><ApiReferencePage /></RoleGate>} />

        {/* 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>} />

        {/* Settings - Public Features */}
        <Route path="settings/public-features" element={<RoleGate roles={["sysadmin", "admin"]}><PublicFeaturesSettings /></RoleGate>} />

        {/* Settings - Serial Log Viewer */}
        <Route path="settings/serial-logs" element={<RoleGate roles={["sysadmin", "admin"]}><SerialLogViewer /></RoleGate>} />

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


