import React from 'react';
import styled from 'styled-components';
import Header from './Header';

const LayoutContainer = styled.div`
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
`;

const MainContent = styled.main`
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 2rem;
  
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
`;

const LeftSidebar = styled.aside`
  @media (max-width: 1024px) {
    display: none;
  }
`;

const CenterColumn = styled.div`
  min-height: 400px;
`;

const RightSidebar = styled.aside`
  @media (max-width: 1024px) {
    display: none;
  }
`;

const SidebarCard = styled.div`
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
`;

const SidebarTitle = styled.h3`
  margin: 0 0 1rem 0;
  color: #2d3748;
  font-size: 1.1rem;
`;

const Layout = ({ children, user, onLogout }) => {
  return (
    <LayoutContainer>
      <Header user={user} onLogout={onLogout} />
      
      <MainContent>
        <LeftSidebar>
          <SidebarCard>
            <SidebarTitle>Navigation</SidebarTitle>
            <div>
              <p>Quick access to different timelines and features.</p>
            </div>
          </SidebarCard>
          
          {user && (
            <SidebarCard>
              <SidebarTitle>Your Profile</SidebarTitle>
              <div style={{ textAlign: 'center' }}>
                {user.avatar && (
                  <img 
                    src={user.avatar} 
                    alt="Avatar" 
                    style={{ 
                      width: '60px', 
                      height: '60px', 
                      borderRadius: '50%',
                      marginBottom: '0.5rem'
                    }}
                  />
                )}
                <p><strong>{user.display_name || user.username}</strong></p>
                <p style={{ fontSize: '0.9rem', color: '#666' }}>@{user.username}</p>
                <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '1rem' }}>
                  <div style={{ textAlign: 'center' }}>
                    <strong>{user.followers_count || 0}</strong>
                    <div style={{ fontSize: '0.8rem', color: '#666' }}>Followers</div>
                  </div>
                  <div style={{ textAlign: 'center' }}>
                    <strong>{user.following_count || 0}</strong>
                    <div style={{ fontSize: '0.8rem', color: '#666' }}>Following</div>
                  </div>
                  <div style={{ textAlign: 'center' }}>
                    <strong>{user.statuses_count || 0}</strong>
                    <div style={{ fontSize: '0.8rem', color: '#666' }}>Posts</div>
                  </div>
                </div>
              </div>
            </SidebarCard>
          )}
        </LeftSidebar>
        
        <CenterColumn>
          {children}
        </CenterColumn>
        
        <RightSidebar>
          <SidebarCard>
            <SidebarTitle>About GoToSocial</SidebarTitle>
            <p style={{ fontSize: '0.9rem', color: '#666', lineHeight: '1.5' }}>
              A fast, fun, and small ActivityPub social network server. 
              Connect with friends and discover new communities!
            </p>
          </SidebarCard>
          
          <SidebarCard>
            <SidebarTitle>Trending</SidebarTitle>
            <div>
              <div style={{ padding: '0.5rem 0', borderBottom: '1px solid #e2e8f0' }}>
                <span style={{ color: '#667eea', fontWeight: 'bold' }}>#opensource</span>
                <div style={{ fontSize: '0.8rem', color: '#666' }}>42 posts</div>
              </div>
              <div style={{ padding: '0.5rem 0', borderBottom: '1px solid #e2e8f0' }}>
                <span style={{ color: '#667eea', fontWeight: 'bold' }}>#federation</span>
                <div style={{ fontSize: '0.8rem', color: '#666' }}>28 posts</div>
              </div>
              <div style={{ padding: '0.5rem 0' }}>
                <span style={{ color: '#667eea', fontWeight: 'bold' }}>#mastodon</span>
                <div style={{ fontSize: '0.8rem', color: '#666' }}>15 posts</div>
              </div>
            </div>
          </SidebarCard>
        </RightSidebar>
      </MainContent>
    </LayoutContainer>
  );
};

export default Layout;