---
import PublicLayout from '../layouts/PublicLayout.astro';
import { API_BASE } from '../lib/api';
---

<PublicLayout title="Demo" description="Explore Likwid's governance features with a live demo instance featuring pre-populated communities and real governance history.">
  <article class="demo-page">
    <header class="page-header">
      <span class="page-label">Live Demo</span>
      <h1>Experience Governance in Action</h1>
      <p class="lead">
        A governance platform cannot be understood from screenshots or empty interfaces. 
        Explore a live instance with real communities, ongoing decisions, and visible history.
      </p>
    </header>

    <section class="demo-intro">
      <div class="intro-content">
        <h2>Why a Demo Instance?</h2>
        <p>
          Governance only makes sense when it has context. Decisions need history. 
          Delegation needs visible relationships. Moderation needs traceable events. 
          An empty system communicates nothing.
        </p>
        <p>
          Our demo instance includes pre-seeded communities with:
        </p>
        <ul>
          <li>Past, ongoing, and scheduled decisions</li>
          <li>Active delegation networks</li>
          <li>Visible moderation history</li>
          <li>Multiple voting methods in use</li>
          <li>Real governance narratives, not random data</li>
        </ul>
      </div>
    </section>

    <section class="demo-communities">
      <h2>Demo Communities</h2>
      <p class="section-intro">
        Explore different types of organizations and see how they use Likwid for governance.
      </p>

      <div class="community-cards" id="community-cards">
        <div class="community-card">
          <div class="card-header">
            <h3>Aurora Framework</h3>
            <span class="card-tag">Open Source Project</span>
          </div>
          <p>
            A fictional open source project demonstrating technical decision-making. 
            See RFC processes, feature prioritization, and maintainer elections using 
            Schulze voting and liquid delegation.
          </p>
          <div class="card-stats" id="stats-aurora">
            <span class="loading-text">Loading...</span>
          </div>
          <a href="/communities/aurora" class="card-link">Explore Aurora →</a>
        </div>

        <div class="community-card">
          <div class="card-header">
            <h3>Civic Commons Network</h3>
            <span class="card-tag">Political Movement</span>
          </div>
          <p>
            A grassroots civic organization showing policy development and delegate assemblies. 
            Observe quadratic voting for priority setting and transparent moderation 
            for community standards.
          </p>
          <div class="card-stats" id="stats-civic-commons">
            <span class="loading-text">Loading...</span>
          </div>
          <a href="/communities/civic-commons" class="card-link">Explore Civic Commons →</a>
        </div>

        <div class="community-card">
          <div class="card-header">
            <h3>Regional Makers Collective</h3>
            <span class="card-tag">Federation</span>
          </div>
          <p>
            A network of local chapters demonstrating federated governance. 
            See cross-community coordination, shared resources decisions, 
            and chapter autonomy in practice.
          </p>
          <div class="card-stats" id="stats-makers">
            <span class="loading-text">Loading...</span>
          </div>
          <a href="/communities/makers" class="card-link">Explore Makers →</a>
        </div>
      </div>
    </section>

    <section class="demo-access">
      <h2>How to Explore</h2>
      
      <div class="access-modes">
        <div class="access-mode">
          <div class="mode-icon">👁️</div>
          <h4>Browse Freely</h4>
          <p>
            Navigate communities, read proposals, view voting results, and explore 
            delegation networks without any account. Full read access is public.
          </p>
          <a href="/communities" class="mode-link">Browse Communities →</a>
        </div>

        <div class="access-mode">
          <div class="mode-icon">🧪</div>
          <h4>Demo Accounts</h4>
          <p>
            Click a demo account below to log in instantly and experience participation: 
            vote on proposals, create delegations, and see the member experience firsthand.
          </p>
          <div class="demo-accounts">
            <button class="demo-login-btn" data-username="contributor">
              <div class="btn-icon">👤</div>
              <div class="btn-info">
                <strong>Contributor</strong>
                <span>Standard member - can vote and participate</span>
              </div>
            </button>
            <button class="demo-login-btn" data-username="moderator">
              <div class="btn-icon">🛡️</div>
              <div class="btn-info">
                <strong>Moderator</strong>
                <span>Can moderate content and view logs</span>
              </div>
            </button>
            <button class="demo-login-btn" data-username="observer">
              <div class="btn-icon">👁️</div>
              <div class="btn-info">
                <strong>Observer</strong>
                <span>Read-only access to explore</span>
              </div>
            </button>
          </div>
          <p class="demo-hint">All demo accounts use password: <code>demo123</code></p>
        </div>
      </div>

      <div class="demo-notice">
        <h4>Demo Reset Notice</h4>
        <p>
          The demo instance resets periodically to maintain a known state. 
          Any changes you make will be reverted. This ensures every visitor 
          experiences meaningful governance data, not accumulated noise.
        </p>
      </div>
    </section>

    <section class="demo-journey">
      <h2>Suggested Exploration Path</h2>
      
      <div class="journey-steps">
        <div class="journey-step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h4>Browse a Community</h4>
            <p>Start with Aurora Framework. See the community overview, active members, and governance structure.</p>
          </div>
        </div>
        <div class="journey-step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h4>Read a Completed Decision</h4>
            <p>Find a closed proposal. See the deliberation history, voting results, and how the outcome was reached.</p>
          </div>
        </div>
        <div class="journey-step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h4>Explore Delegations</h4>
            <p>View the delegation network. See who trusts whom on which topics and how votes flow.</p>
          </div>
        </div>
        <div class="journey-step">
          <div class="step-number">4</div>
          <div class="step-content">
            <h4>Check the Moderation Log</h4>
            <p>See transparent moderation in action. Every action has a reason, a rule reference, and accountability.</p>
          </div>
        </div>
        <div class="journey-step">
          <div class="step-number">5</div>
          <div class="step-content">
            <h4>Cast a Vote</h4>
            <p>Log in with a demo account and vote on an active proposal. Experience different voting methods.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="demo-cta">
      <h2>Ready to Explore?</h2>
      <p>
        The demo is live and waiting. No registration required to browse. 
        Use demo accounts to participate.
      </p>
      <div class="cta-buttons">
        <a href="/communities" class="btn-primary btn-large">Enter the Demo</a>
        <a href="/login" class="btn-secondary">Sign In with Demo Account</a>
      </div>
    </section>

    <section class="demo-next">
      <h2>What's Next?</h2>
      <div class="next-options">
        <a href="/about" class="next-card">
          <h4>Learn More</h4>
          <p>Understand what Likwid is, who it's for, and how it works.</p>
        </a>
        <a href="/manifesto" class="next-card">
          <h4>Read the Manifesto</h4>
          <p>Explore the technical and political vision behind Likwid.</p>
        </a>
        <a href="/docs" class="next-card">
          <h4>Documentation</h4>
          <p>Technical guides for deployment, configuration, and development.</p>
        </a>
      </div>
    </section>
  </article>
</PublicLayout>

<style>
  .demo-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .page-header {
    text-align: center;
    padding: 3rem 0 3.5rem;
    border-bottom: 1px solid var(--color-border);
  }

  .page-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-success);
    background: var(--color-success-muted);
    padding: 0.375rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
  }

  .page-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
  }

  .lead {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Intro Section */
  .demo-intro {
    padding: 3rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .intro-content h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }

  .intro-content p {
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  .intro-content ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
  }

  .intro-content li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    color: var(--color-text);
  }

  .intro-content li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 600;
  }

  /* Communities Section */
  .demo-communities {
    padding: 3rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .demo-communities h2 {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 0.75rem;
  }

  .section-intro {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
  }

  .community-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  @media (max-width: 900px) {
    .community-cards {
      grid-template-columns: 1fr;
    }
  }

  .community-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--motion-normal) var(--easing-standard);
  }

  .community-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .card-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .card-header h3 {
    font-size: 1.25rem;
    margin: 0;
  }

  .card-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-primary-muted);
    color: var(--color-primary);
    border-radius: 999px;
    font-weight: 500;
    width: fit-content;
  }

  .community-card p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  .card-stats {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }

  /* Access Section */
  .demo-access {
    padding: 3rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .demo-access h2 {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  .access-modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
  }

  @media (max-width: 768px) {
    .access-modes {
      grid-template-columns: 1fr;
    }
  }

  .access-mode {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
  }

  .mode-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .access-mode h4 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .access-mode p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .mode-link {
    display: inline-block;
    font-weight: 500;
  }

  .demo-accounts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .demo-login-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--motion-fast) var(--easing-standard);
    text-align: left;
  }

  .demo-login-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-muted);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15);
  }

  .demo-login-btn:active {
    transform: translateY(0);
  }

  .demo-login-btn .btn-icon {
    font-size: 1.5rem;
    width: 2.5rem;
    text-align: center;
  }

  .demo-login-btn .btn-info {
    flex: 1;
  }

  .demo-login-btn .btn-info strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.25rem;
  }

  .demo-login-btn .btn-info span {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }

  .demo-login-btn.loading {
    opacity: 0.7;
    pointer-events: none;
  }

  .demo-hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 0.5rem;
  }

  .demo-hint code {
    background: var(--color-bg-alt);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: monospace;
  }

  .demo-notice {
    background: var(--color-warning-muted);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
  }

  .demo-notice h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-warning);
  }

  .demo-notice p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0;
  }

  /* Journey Section */
  .demo-journey {
    padding: 3rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .demo-journey h2 {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  .journey-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .journey-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .step-number {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-on-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(129, 140, 248, 0.25);
  }

  .step-content h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

  .step-content p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0;
  }

  /* CTA Section */
  .demo-cta {
    text-align: center;
    padding: 4rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .demo-cta h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .demo-cta p {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
  }

  .cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all var(--motion-fast) var(--easing-standard);
  }

  .btn-primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(129, 140, 248, 0.3);
  }

  .btn-primary.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
  }

  .btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--color-text);
    padding: 0.875rem 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--motion-fast) var(--easing-standard);
  }

  .btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  /* Next Section */
  .demo-next {
    padding: 3rem 0;
  }

  .demo-next h2 {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  .next-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  @media (max-width: 768px) {
    .next-options {
      grid-template-columns: 1fr;
    }
  }

  .next-card {
    display: block;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--motion-fast) var(--easing-standard);
  }

  .next-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
  }

  .next-card h4 {
    font-size: 1.125rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
  }

  .next-card p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0;
  }

  .card-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-primary);
  }

  .card-link:hover {
    text-decoration: underline;
  }

  .loading-text {
    color: var(--color-text-muted);
    font-style: italic;
  }

  .demo-status-banner {
    background: var(--color-success-muted);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  .demo-status-banner.inactive {
    background: var(--color-warning-muted);
    border-color: var(--color-warning);
  }

  .demo-status-banner p {
    margin: 0;
    font-size: 0.9375rem;
  }
</style>

<script define:vars={{ API_BASE }}>
  async function loadDemoData() {
    try {
      // Fetch demo status
      const statusRes = await fetch(API_BASE + '/api/demo/status');
      const status = await statusRes.json();
      
      // Update demo status indicator if needed
      const statusBanner = document.getElementById('demo-status');
      if (statusBanner) {
        if (status.demo_mode) {
          statusBanner.innerHTML = '<p>✓ Demo mode is active. Explore freely!</p>';
          statusBanner.classList.remove('inactive');
        } else {
          statusBanner.innerHTML = '<p>Demo mode is not currently enabled on this instance.</p>';
          statusBanner.classList.add('inactive');
        }
      }

      // Fetch communities data
      const commRes = await fetch(API_BASE + '/api/demo/communities');
      const commData = await commRes.json();
      
      if (commData.communities && commData.communities.length > 0) {
        // Map slugs to stat element IDs
        const slugToId = {
          'aurora': 'stats-aurora',
          'civic-commons': 'stats-civic-commons', 
          'makers': 'stats-makers'
        };
        
        commData.communities.forEach(function(comm) {
          const statsEl = document.getElementById(slugToId[comm.slug]);
          if (statsEl) {
            statsEl.innerHTML = '<span>' + comm.member_count + ' members</span><span>' + comm.proposal_count + ' proposals</span>';
          }
        });
      }
    } catch (error) {
      console.log('Demo API not available:', error.message);
      // Show fallback stats
      ['stats-aurora', 'stats-civic-commons', 'stats-makers'].forEach(function(id) {
        const el = document.getElementById(id);
        if (el) {
          el.innerHTML = '<span>View community for details</span>';
        }
      });
    }
  }

  // Demo login handler
  async function handleDemoLogin(username) {
    const btn = document.querySelector('[data-username="' + username + '"]');
    if (btn) {
      btn.classList.add('loading');
      btn.querySelector('.btn-info span').textContent = 'Logging in...';
    }

    try {
      const response = await fetch(API_BASE + '/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          username: username,
          password: 'demo123'
        }),
      });

      if (!response.ok) {
        throw new Error('Login failed');
      }

      const data = await response.json();
      
      // Store token in localStorage (use 'token' to match rest of app)
      localStorage.setItem('token', data.token);
      localStorage.setItem('user', JSON.stringify(data.user));

      // Update button to show success
      if (btn) {
        btn.querySelector('.btn-info span').textContent = 'Success! Redirecting...';
      }

      // Redirect to dashboard or communities
      setTimeout(() => {
        window.location.href = '/communities';
      }, 500);

    } catch (error) {
      console.error('Demo login failed:', error);
      if (btn) {
        btn.classList.remove('loading');
        btn.querySelector('.btn-info span').textContent = 'Login failed - try again';
        setTimeout(() => {
          // Reset button text
          const texts = {
            'contributor': 'Standard member - can vote and participate',
            'moderator': 'Can moderate content and view logs',
            'observer': 'Read-only access to explore'
          };
          btn.querySelector('.btn-info span').textContent = texts[username] || '';
        }, 2000);
      }
    }
  }

  // Attach click handlers to demo login buttons
  function setupDemoLoginButtons() {
    var buttons = document.querySelectorAll('.demo-login-btn');
    for (var i = 0; i < buttons.length; i++) {
      (function(btn) {
        btn.addEventListener('click', function() {
          var username = btn.dataset.username;
          if (username) {
            handleDemoLogin(username);
          }
        });
      })(buttons[i]);
    }
  }

  // Load on page ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
      loadDemoData();
      setupDemoLoginButtons();
    });
  } else {
    loadDemoData();
    setupDemoLoginButtons();
  }
</script>