@extends('admin.layouts.app')

@section('content')
  <div class="admin-dashboard">
    <aside class="admin-sidebar">
      <a href="{{ route('admin.dashboard') }}" class="admin-brand">PHEARUM Admin</a>

      <nav class="admin-sidebar-nav" aria-label="Admin navigation">
        <a href="{{ route('admin.dashboard') }}" class="is-active">Overview</a>
        <a href="#content-studio">Content Studio</a>
        <a href="{{ route('admin.settings') }}">Administrator</a>
        <a href="#workflow">Workflow</a>
        <a href="#actions">Quick Actions</a>
      </nav>

      <div class="admin-sidebar-panel">
        <span>Current role</span>
        <strong>Administrator</strong>
        <p>Secure access for content planning, blog updates, and future dashboard tools.</p>
        <div class="admin-sidebar-actions">
          <a href="{{ route('admin.settings') }}" class="admin-link-btn admin-link-btn-outline">Open Settings</a>
        </div>
      </div>
    </aside>

    <div class="admin-main">
      <header class="admin-topbar">
        <div>
          <span class="admin-topbar-kicker">Dashboard</span>
          <h1>Welcome back, {{ auth()->user()->name }}</h1>
          <p>{{ now()->format('l, d M Y') }} • Admin route protected with authentication</p>
        </div>

        <div class="admin-topbar-actions">
          <button type="button" class="admin-theme-toggle" data-admin-theme-toggle aria-pressed="false">
            <span class="admin-theme-toggle-icon" data-theme-icon>🌙</span>
            <span class="admin-theme-toggle-label" data-theme-label>Dark Mode</span>
          </button>

          <div class="admin-user-chip">
            <strong>{{ auth()->user()->email }}</strong>
            <span>Authenticated session</span>
          </div>

          <form method="POST" action="{{ route('admin.logout') }}">
            @csrf
            <button type="submit" class="admin-logout-btn">Logout</button>
          </form>
        </div>
      </header>

      <main class="admin-body">
        <section class="admin-metrics" aria-label="Admin overview metrics">
          @foreach ($metrics as $metric)
            <article class="admin-metric-card">
              <span>{{ $metric['label'] }}</span>
              <strong>{{ $metric['value'] }}</strong>
              <p>{{ $metric['detail'] }}</p>
            </article>
          @endforeach
        </section>

        <section class="admin-content-grid">
          <article class="admin-panel" id="content-studio">
            <span class="admin-panel-kicker">Content Studio</span>
            <h2>Create and edit site sections</h2>
            <p>
              Jump into Home, Blog, Experiments, About, and Contact from one admin workspace. Each section now has dedicated
              create and edit entry points to organize your next updates.
            </p>

            <div class="admin-manage-grid">
              @foreach ($sections as $section)
                <article class="admin-manage-card">
                  <div class="admin-manage-head">
                    <span class="admin-manage-badge">{{ $section['kind'] }}</span>
                    <h3>{{ $section['label'] }}</h3>
                  </div>

                  <p>{{ $section['description'] }}</p>

                  <ul class="admin-manage-list">
                    @foreach ($section['highlights'] as $highlight)
                      <li>{{ $highlight }}</li>
                    @endforeach
                  </ul>

                  <div class="admin-manage-actions">
                    <a href="{{ route('admin.content.create', $section['key']) }}" class="admin-link-btn">{{ $section['create_label'] }}</a>
                    <a href="{{ route('admin.content.edit', $section['key']) }}" class="admin-link-btn admin-link-btn-outline">{{ $section['edit_label'] }}</a>
                  </div>
                </article>
              @endforeach
            </div>
          </article>

          <article class="admin-panel admin-panel-idea" id="idea">
            <span class="admin-panel-kicker">Idea</span>
            <h2>Create a calm, useful admin center</h2>
            <p>
              This dashboard is designed as the foundation for managing the public website. It combines a top navigation bar,
              a sidebar for section movement, and a clean body layout where future modules can grow.
            </p>
            <ul class="admin-checklist">
              <li>Use one protected route group for all admin tools</li>
              <li>Keep the interface readable, focused, and easy to expand</li>
              <li>Add create and edit entry points for each public section</li>
            </ul>
          </article>
        </section>

        <section class="admin-content-grid">
          <article class="admin-panel" id="workflow">
            <span class="admin-panel-kicker">Workflow</span>
            <h2>Recommended admin workflow</h2>
            <div class="admin-flow-list">
              @foreach ($workflow as $step)
                <div class="admin-flow-item">
                  <strong>{{ $loop->iteration }}. {{ $step['title'] }}</strong>
                  <p>{{ $step['description'] }}</p>
                </div>
              @endforeach
            </div>
          </article>

          <article class="admin-panel" id="actions">
            <span class="admin-panel-kicker">Quick Actions</span>
            <h2>Next steps for this dashboard</h2>
            <div class="admin-action-grid">
              @foreach ($quickActions as $action)
                <div class="admin-action-card">
                  <strong>{{ $action }}</strong>
                  <p>Ready to turn into a dedicated admin module.</p>
                </div>
              @endforeach
            </div>
          </article>

          <article class="admin-panel admin-panel-accent">
            <span class="admin-panel-kicker">Security</span>
            <h2>Admin route structure</h2>
            <ul class="admin-route-list">
              <li><code>GET /admin/login</code> for the login page</li>
              <li><code>POST /admin/login</code> to authenticate the admin</li>
              <li><code>GET /admin/dashboard</code> protected by <code>auth</code> and <code>admin</code> middleware</li>
              <li><code>POST /admin/logout</code> to close the session safely</li>
            </ul>
          </article>
        </section>
      </main>
    </div>
  </div>
@endsection