import streamlit as st
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
from datetime import datetime
import os
from utils import load_data, create_project_card, create_impact_metric

# Page configuration
st.set_page_config(
    page_title="Mera Apna Shahar - Building Inclusive Communities",
    page_icon="🏘️",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Custom CSS for better styling
st.markdown("""
<style>
    .main-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 2rem;
        border-radius: 10px;
        margin-bottom: 2rem;
        text-align: center;
        color: white;
    }
    .mission-card {
        background: #f8f9fa;
        padding: 1.5rem;
        border-radius: 10px;
        border-left: 4px solid #667eea;
        margin: 1rem 0;
    }
    .impact-metric {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1rem;
        border-radius: 10px;
        text-align: center;
        margin: 0.5rem;
    }
    .project-card {
        background: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin: 1rem 0;
        border: 1px solid #e0e0e0;
    }
    .stButton > button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 0.75rem 2rem;
        border-radius: 25px;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    .stButton > button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
</style>
""", unsafe_allow_html=True)

# Load data
def load_ngo_data():
    """Load and cache NGO data"""
    projects = {
        'Discrimination in Society': {
            'description': 'Fighting against social discrimination and promoting equality for all',
            'icon': '⚖️',
            'activities': [
                'Anti-discrimination awareness campaigns',
                'Community dialogue sessions',
                'Legal aid and support',
                'Educational workshops',
                'Social integration programs'
            ],
            'impact': 1500
        },
        'Women Environment': {
            'description': 'Creating safe and empowering spaces for women in urban environments',
            'icon': '👩',
            'activities': [
                'Women safety audits',
                'Self-defense training',
                'Safe spaces creation',
                'Women\'s skill development',
                'Leadership programs'
            ],
            'impact': 800
        },
        'Sustainable Environment': {
            'description': 'Promoting environmental sustainability and climate action',
            'icon': '🌱',
            'activities': [
                'Tree plantation drives',
                'Waste management initiatives',
                'Renewable energy awareness',
                'Green building campaigns',
                'Climate education'
            ],
            'impact': 2500
        },
        'Cleaner City': {
            'description': 'Working towards a cleaner, healthier urban environment',
            'icon': '🏙️',
            'activities': [
                'Cleanliness drives',
                'Plastic waste reduction',
                'Public space maintenance',
                'Community cleaning events',
                'Waste segregation awareness'
            ],
            'impact': 3200
        }
    }
    return projects

# Main header
st.markdown("""
<div class="main-header">
    <h1>🏘️ Mera Apna Shahar</h1>
    <h3>Building Inclusive, Sustainable Communities</h3>
    <p>Together we create a better tomorrow for everyone</p>
</div>
""", unsafe_allow_html=True)

# Header with anycoder credit
col1, col2, col3 = st.columns([1, 2, 1])
with col2:
    st.markdown("### Transforming Communities Through Action")
    st.markdown("*Built with [anycoder](https://huggingface.co/spaces/akhaliq/anycoder)*")

# Navigation sidebar
st.sidebar.title("Navigation")
page = st.sidebar.radio("Go to", ["Home", "About Us", "Our Projects", "Get Involved", "Impact & Success", "Contact"])

# Load data
projects_data = load_ngo_data()

if page == "Home":
    # Hero section
    st.markdown("## Welcome to Mera Apna Shahar")
    st.markdown("""
    We are a non-profit organization dedicated to creating positive change in our communities. 
    Our mission is to build inclusive, sustainable, and equitable urban environments where every person 
    can thrive and contribute to the betterment of society.
    """)
    
    # Mission statement
    st.markdown("### Our Mission")
    st.markdown("""
    <div class="mission-card">
        <h4>🌟 Vision Statement</h4>
        <p>To create inclusive, sustainable communities where discrimination has no place, 
        women feel safe and empowered, the environment is protected for future generations, 
        and our cities are clean, healthy places to live.</p>
    </div>
    """, unsafe_allow_html=True)
    
    # Quick stats
    st.markdown("### Our Impact at a Glance")
    col1, col2, col3, col4 = st.columns(4)
    
    with col1:
        st.markdown("""
        <div class="impact-metric">
            <h2>8000+</h2>
            <p>People Impacted</p>
        </div>
        """, unsafe_allow_html=True)
    
    with col2:
        st.markdown("""
        <div class="impact-metric">
            <h2>150+</h2>
            <p>Projects Completed</p>
        </div>
        """, unsafe_allow_html=True)
    
    with col3:
        st.markdown("""
        <div class="impact-metric">
            <h2>50+</h2>
            <p>Active Volunteers</p>
        </div>
        """, unsafe_allow_html=True)
    
    with col4:
        st.markdown("""
        <div class="impact-metric">
            <h2>5+</h2>
            <p>Years of Service</p>
        </div>
        """, unsafe_allow_html=True)

elif page == "About Us":
    st.markdown("## About Mera Apna Shahar")
    
    # Organization story
    st.markdown("### Our Story")
    st.markdown("""
    Founded with a vision of creating inclusive communities, Mera Apna Shahar began as a small grassroots 
    initiative addressing the pressing social and environmental challenges in our urban areas. 
    What started as community volunteers coming together for local clean-up drives has evolved into 
    a comprehensive non-profit organization tackling multiple interconnected issues.
    """)
    
    st.markdown("### Our Core Values")
    col1, col2 = st.columns(2)
    
    with col1:
        st.markdown("#### 🤝 Inclusivity")
        st.markdown("We believe in creating spaces where everyone feels welcome and valued, regardless of their background, gender, or socioeconomic status.")
        
        st.markdown("#### 🌍 Sustainability")
        st.markdown("Environmental protection and sustainable practices are at the heart of everything we do, ensuring a better future for generations to come.")
    
    with col2:
        st.markdown("#### 💪 Empowerment")
        st.markdown("We focus on empowering communities, especially women and marginalized groups, to take charge of their own development.")
        
        st.markdown("#### 🔄 Community-Driven")
        st.markdown("Our solutions are developed with and for the community, ensuring they are relevant, sustainable, and locally owned.")
    
    # Team section
    st.markdown("### Our Leadership")
    team_data = {
        'Role': ['Executive Director', 'Program Manager', 'Community Outreach Coordinator', 'Environmental Specialist'],
        'Name': ['Dr. Priya Sharma', 'Rajesh Kumar', 'Fatima Ali', 'Arjun Patel'],
        'Experience': ['15+ years', '10+ years', '8+ years', '12+ years']
    }
    
    team_df = pd.DataFrame(team_data)
    st.table(team_df)

elif page == "Our Projects":
    st.markdown("## Our Project Areas")
    st.markdown("We work on four key areas that are interconnected and essential for building better communities:")
    
    # Project cards
    for project_name, project_info in projects_data.items():
        st.markdown(f"""
        <div class="project-card">
            <h3>{project_info['icon']} {project_name}</h3>
            <p>{project_info['description']}</p>
            <h4>Key Activities:</h4>
            <ul>
        """, unsafe_allow_html=True)
        
        for activity in project_info['activities']:
            st.markdown(f"<li>{activity}</li>", unsafe_allow_html=True)
        
        st.markdown("</ul>", unsafe_allow_html=True)
        
        # Show impact metric
        col1, col2 = st.columns([3, 1])
        with col1:
            st.markdown(f"**People directly impacted: {project_info['impact']}+**")
        with col2:
            if st.button(f"Learn More About {project_name}", key=project_name):
                st.info(f"Detailed information about {project_name} projects will be available soon!")
        
        st.markdown("</div>", unsafe_allow_html=True)

elif page == "Get Involved":
    st.markdown("## Get Involved")
    st.markdown("Join us in making a difference! There are many ways you can contribute to our mission:")
    
    tab1, tab2, tab3, tab4 = st.tabs(["🤝 Volunteer", "💰 Donate", "📢 Partner", "📧 Contact Us"])
    
    with tab1:
        st.markdown("### Become a Volunteer")
        st.markdown("""
        Our volunteers are the backbone of our organization. Whether you can spare a few hours a month 
        or want to make a more significant commitment, your contribution makes a real difference.
        """)
        
        with st.form("volunteer_form"):
            col1, col2 = st.columns(2)
            with col1:
                name = st.text_input("Full Name")
                email = st.text_input("Email Address")
                phone = st.text_input("Phone Number")
            with col2:
                skills = st.multiselect("Skills/Interests", 
                    ["Event Organization", "Social Media", "Teaching/Training", 
                     "Environmental Work", "Community Outreach", "Admin Support"])
                availability = st.selectbox("Availability", 
                    ["Weekly", "Bi-weekly", "Monthly", "Occasionally", "Project-based"])
            
            experience = st.text_area("Tell us about any relevant experience or motivation to volunteer")
            
            submitted = st.form_submit_button("Submit Application")
            if submitted:
                st.success("Thank you for your interest in volunteering! We'll contact you soon.")
    
    with tab2:
        st.markdown("### Support Our Work")
        st.markdown("""
        Your donations directly support our programs and initiatives. Every contribution, 
        no matter the size, helps us create lasting change in communities.
        """)
        
        donation_amount = st.selectbox("Choose donation amount", 
            ["₹500", "₹1,000", "₹2,500", "₹5,000", "₹10,000", "Custom Amount"])
        
        if donation_amount == "Custom Amount":
            custom_amount = st.number_input("Enter custom amount (₹)", min_value=100)
        
        donation_purpose = st.selectbox("Direct donation to", 
            ["General Fund", "Anti-Discrimination Programs", "Women Empowerment", 
             "Environmental Projects", "Clean City Initiatives"])
        
        if st.button("Donate Now"):
            st.info("Thank you for your generosity! You will be redirected to our secure payment gateway.")
    
    with tab3:
        st.markdown("### Partnership Opportunities")
        st.markdown("""
        We welcome partnerships with like-minded organizations, government agencies, 
        and corporate entities who share our vision of creating inclusive communities.
        """)
        
        partnership_type = st.selectbox("Partnership Type", 
            ["Corporate Social Responsibility", "Government Collaboration", 
             "NGO Partnership", "Academic Institution", "Other"])
        
        with st.form("partnership_form"):
            organization = st.text_input("Organization Name")
            contact_person = st.text_input("Contact Person")
            partnership_details = st.text_area("Describe potential collaboration areas")
            
            submitted = st.form_submit_button("Submit Partnership Inquiry")
            if submitted:
                st.success("Thank you for your interest in partnership! We'll review and respond within 48 hours.")
    
    with tab4:
        st.markdown("### Contact Us")
        
        contact_info = {
            "📧 Email": "contact@meraapnashahar.org",
            "📱 Phone": "+91 98765 43210",
            "📍 Address": "123 Community Center, Green Park, New Delhi - 110016",
            "🕐 Office Hours": "Monday - Friday: 9:00 AM - 6:00 PM"
        }
        
        for key, value in contact_info.items():
            st.markdown(f"**{key}** {value}")
        
        # Contact form
        with st.form("contact_form"):
            subject = st.selectbox("Subject", ["General Inquiry", "Volunteer Application", "Partnership", "Media Request", "Other"])
            message = st.text_area("Your Message")
            
            submitted = st.form_submit_button("Send Message")
            if submitted:
                st.success("Your message has been sent! We'll respond within 24 hours.")

elif page == "Impact & Success":
    st.markdown("## Our Impact & Success Stories")
    
    # Impact metrics visualization
    st.markdown("### Impact Metrics")
    
    # Create impact data
    impact_data = {
        'Project Area': ['Discrimination in Society', 'Women Environment', 'Sustainable Environment', 'Cleaner City'],
        'People Impacted': [1500, 800, 2500, 3200],
        'Projects Completed': [25, 18, 35, 42]
    }
    
    fig1 = px.bar(impact_data, x='Project Area', y='People Impacted', 
                  title='People Impacted by Project Area',
                  color='People Impacted', color_continuous_scale='viridis')
    st.plotly_chart(fig1, use_container_width=True)
    
    fig2 = px.bar(impact_data, x='Project Area', y='Projects Completed',
                  title='Projects Completed by Area',
                  color='Projects Completed', color_continuous_scale='plasma')
    st.plotly_chart(fig2, use_container_width=True)
    
    # Success stories
    st.markdown("### Success Stories")
    
    success_stories = [
        {
            "title": "Community Integration Program Success",
            "description": "Our anti-discrimination initiative in the local community led to the successful integration of 200+ families from diverse backgrounds, fostering mutual understanding and reducing conflicts.",
            "impact": "200+ families integrated",
            "location": "South Delhi Communities"
        },
        {
            "title": "Women's Safety Initiative",
            "description": "Implemented comprehensive safety measures in 5 major residential areas, including improved lighting, emergency response systems, and women's self-defense training programs.",
            "impact": "1,200+ women trained",
            "location": "Multiple residential areas"
        },
        {
            "title": "Green City Transformation",
            "description": "Our environmental sustainability program resulted in the plantation of 5,000+ trees and establishment of 15 community gardens, significantly improving air quality and green cover.",
            "impact": "5,000+ trees planted",
            "location": "City-wide initiative"
        },
        {
            "title": "Clean City Campaign",
            "description": "Monthly cleanliness drives involving 500+ volunteers have transformed 25 public spaces, creating healthier and more attractive community areas.",
            "impact": "25 public spaces transformed",
            "location": "Various city locations"
        }
    ]
    
    for i, story in enumerate(success_stories):
        with st.expander(f"📖 {story['title']}"):
            col1, col2 = st.columns([3, 1])
            with col1:
                st.markdown(f"**Impact:** {story['impact']}")
                st.markdown(f"**Location:** {story['location']}")
                st.markdown(story['description'])
            with col2:
                if st.button("Share Story", key=f"share_{i}"):
                    st.info("Share functionality will be available soon!")

elif page == "Contact":
    st.markdown("## Contact Information")
    
    # Contact details
    col1, col2 = st.columns(2)
    
    with col1:
        st.markdown("### Get in Touch")
        st.markdown("""
        **📧 Email:** contact@meraapnashahar.org
        
        **📱 Phone:** +91 98765 43210
        
        **📍 Address:** 
        123 Community Center
        Green Park, New Delhi - 110016
        India
        
        **🕐 Office Hours:**
        Monday - Friday: 9:00 AM - 6:00 PM
        Saturday: 10:00 AM - 4:00 PM
        Sunday: Closed
        """)
    
    with col2:
        st.markdown("### Follow Our Work")
        st.markdown("""
        **📱 Social Media:**
        - Facebook: @MeraApnaShahar
        - Instagram: @meraapnashahar
        - Twitter: @MeraApnaShahar
        - LinkedIn: Mera Apna Shahar Foundation
        
        **📰 Newsletter:** Subscribe to our monthly updates
        """)
        
        # Newsletter subscription
        with st.form("newsletter_form"):
            email = st.text_input("Email for newsletter")
            interests = st.multiselect("Areas of interest", list(projects_data.keys()))
            subscribe = st.form_submit_button("Subscribe")
            if subscribe:
                st.success("Thank you for subscribing to our newsletter!")
    
    # Map placeholder
    st.markdown("### Our Location")
    st.info("Interactive map will be available soon. We are located in Green Park, New Delhi.")
    
    # Emergency contact
    st.markdown("### Emergency Contact")
    st.warning("**For urgent matters outside office hours:** +91 98765 43210")

# Footer
st.markdown("---")
st.markdown("""
<div style="text-align: center; padding: 2rem; background: #f8f9fa; border-radius: 10px; margin-top: 2rem;">
    <h4>🌟 Mera Apna Shahar - Building Inclusive Communities Together</h4>
    <p>Together we create a better tomorrow for everyone</p>
    <p><small>© 2024 Mera Apna Shahar. All rights reserved. | 
    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a></small></p>
</div>
""", unsafe_allow_html=True)