import React, { useState } from 'react';
import styled from 'styled-components';
import CreateOrderStatus from './components/CreateOrderStatus';
import CustomOrderStatus from './components/CustomOrderStatus';
import Notification from './components/Notification';

const Container = styled.div`
  min-height: 100vh;
  background: #f3f4f6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
`;

const Card = styled.div`
  background: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  width: 100%;
  max-width: 1200px;
  min-height: 600px;
`;

const Sidebar = styled.div`
  width: 250px;
  border-right: 1px solid #e5e7eb;
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
`;

const TabButton = styled.button`
  padding: 1rem;
  background: ${({ active }) => (active ? '#4f46e5' : 'transparent')};
  color: ${({ active, disabled }) => {
    if (disabled) return '#9CA3AF';
    return active ? 'white' : '#374151';
  }};
  font-weight: bold;
  border: none;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: ${({ disabled }) => disabled ? 'not-allowed' : 'pointer'};
  text-align: left;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: ${({ disabled }) => disabled ? 0.7 : 1};

  &:hover {
    background: ${({ active, disabled }) => {
      if (disabled) return 'transparent';
      return active ? '#4338ca' : '#e5e7eb';
    }};
  }
`;

const ContentArea = styled.div`
  flex-grow: 1;
  padding-left: 2rem;
`;

const Content = styled.div`
  background: #f9fafb;
  padding: 2rem;
  border-radius: 0.5rem;
  height: 90%;
`;

const PageTitle = styled.h1`
  font-size: 1.25rem;
  color: #1f2937;
  margin: 32px 15px 1.5rem 110px;
  font-weight: 600;
  display: block;
`;

const FeatureCard = styled.div`
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
`;

const FeatureTitle = styled.h3`
  color: #4f46e5;
  font-size: 1.25rem;
  margin-bottom: 1rem;
`;

const FeatureDescription = styled.p`
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1rem;
`;

const WebsiteLink = styled.a`
  color: #4f46e5;
  text-decoration: none;
  font-weight: 500;

  &:hover {
    text-decoration: underline;
  }
`;

const ProBadge = styled.span`
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: bold;
  margin-left: 0.5rem;
  vertical-align: middle;
`;

const LockIcon = styled.span`
  margin-left: auto;
  color: #9CA3AF;
`;

const ProModal = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 1000;
  max-width: 400px;
  width: 90%;
  text-align: center;
`;

const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
`;

const App = () => {
  const [activeTab, setActiveTab] = useState('create');
  const [editStatus, setEditStatus] = useState(null);
  const [notifications, setNotifications] = useState([]);
  const [showProModal, setShowProModal] = useState(false);

  const addNotification = (message, type = 'success') => {
    const id = Date.now();
    setNotifications((prev) => [...prev, { id, message, type }]);
    setTimeout(() => {
      removeNotification(id);
    }, 3000);
  };

  const removeNotification = (id) => {
    setNotifications((prev) => prev.filter((notification) => notification.id !== id));
  };

  const handleEditStatus = (status) => {
    setEditStatus(status);
    setActiveTab('create');
  };

  const handleAutomateClick = (e) => {
    e.preventDefault();
    setShowProModal(true);
  };

  return (
    <>
      <PageTitle>Advanced Order Status</PageTitle>
      <Container>
        <Card>
          <Sidebar>
            <TabButton
              active={activeTab === 'create'}
              onClick={() => setActiveTab('create')}
            >
              Create Status
            </TabButton>
            <TabButton
              active={activeTab === 'custom'}
              onClick={() => setActiveTab('custom')}
            >
              Custom Statuses
            </TabButton>
            <TabButton
              active={activeTab === 'automate'}
              onClick={handleAutomateClick}
            >
              <span>Automate Status <ProBadge>PRO</ProBadge></span>
              <LockIcon>
                <i className="dashicons dashicons-lock"></i>
              </LockIcon>
            </TabButton>
          </Sidebar>

          <ContentArea>
            <Content>
              {activeTab === 'create' && (
                <CreateOrderStatus
                  status={editStatus}
                  onNotification={addNotification}
                />
              )}
              {activeTab === 'custom' && (
                <CustomOrderStatus
                  onEdit={handleEditStatus}
                  onNotification={addNotification}
                />
              )}
              {activeTab === 'automate' && (
                <>
                  <FeatureCard>
                    <FeatureTitle>🚀 Coming Soon: Order Status Automation</FeatureTitle>
                    <FeatureDescription>
                      We're working on exciting new features to help you automate your WooCommerce order statuses:
                    </FeatureDescription>
                    <ul style={{ color: '#6b7280', marginLeft: '1.5rem', marginBottom: '1rem' }}>
                      <li>Automatic status changes based on time triggers</li>
                      <li>Custom email notifications for each status</li>
                      <li>Conditional status workflows</li>
                      <li>Integration with popular shipping providers</li>
                    </ul>
                    <WebsiteLink
                      href="https://advancedorderstatus.com"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      Learn more about upcoming features &rarr;
                    </WebsiteLink>
                  </FeatureCard>
                </>
              )}
            </Content>
          </ContentArea>
        </Card>

        {showProModal && (
          <>
            <Overlay onClick={() => setShowProModal(false)} />
            <ProModal>
              <FeatureTitle>🔒 Pro Feature</FeatureTitle>
              <FeatureDescription>
                This feature is available in the PRO version. Upgrade to access automated order status management.
              </FeatureDescription>
              <WebsiteLink
                href="https://advancedorderstatus.com/pro"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn more about PRO features &rarr;
              </WebsiteLink>
            </ProModal>
          </>
        )}

        <Notification
          notifications={notifications}
          removeNotification={removeNotification}
        />
      </Container>
    </>
  );
};

export default App;
