import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
import os
from utils import (
    read_data_file,
    load_and_process_data,
    create_specific_chart,
    AVAILABLE_CHARTS
)

# Page configuration
st.set_page_config(
    page_title="داشبورد تحلیل فروش پیشرفته",
    page_icon="📊",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Custom CSS for RTL support and styling
st.markdown("""
<style>
    @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');
    
    * {
        font-family: 'Vazirmatn', sans-serif !important;
    }
    
    .main {
        direction: rtl;
    }
    
    .stMarkdown {
        direction: rtl;
        text-align: right;
    }
    
    .kpi-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 20px;
        border-radius: 15px;
        color: white;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin: 10px 0;
    }
    
    .kpi-card-green {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }
    
    .kpi-card-blue {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .kpi-card-orange {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .kpi-card-purple {
        background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    }
    
    .kpi-card-red {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    }
    
    .kpi-value {
        font-size: 1.5rem;
        font-weight: bold;
        margin-top: 10px;
    }
    
    .kpi-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    .header-container {
        text-align: center;
        padding: 20px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        border-radius: 15px;
        margin-bottom: 20px;
        color: white;
    }
    
    .built-with {
        text-align: center;
        padding: 10px;
        font-size: 0.9rem;
    }
    
    .built-with a {
        color: #667eea;
        text-decoration: none;
        font-weight: bold;
    }
    
    .stSelectbox > div > div {
        direction: rtl;
    }
</style>
""", unsafe_allow_html=True)

# Header
st.markdown("""
<div class="header-container">
    <h1>📊 داشبورد تحلیل فروش و هوش تجاری</h1>
    <p>تحلیل جامع داده‌های فروش با نمودارهای تعاملی</p>
</div>
<div class="built-with">
    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
</div>
""", unsafe_allow_html=True)

# Initialize session state
if 'data' not in st.session_state:
    st.session_state.data = None
if 'kpis' not in st.session_state:
    st.session_state.kpis = None

# Sidebar for file upload
with st.sidebar:
    st.markdown("### 📁 بارگذاری فایل داده")
    uploaded_file = st.file_uploader(
        "فایل اکسل یا CSV خود را آپلود کنید",
        type=['csv', 'xlsx', 'xls'],
        help="فرمت‌های پشتیبانی شده: CSV, XLSX, XLS"
    )
    
    if uploaded_file is not None:
        with st.spinner("در حال پردازش داده‌ها..."):
            result = load_and_process_data(uploaded_file)
            if result['success']:
                st.session_state.data = result['data']
                st.session_state.kpis = result['kpis']
                st.success("✅ فایل با موفقیت بارگذاری شد!")
            else:
                st.error(f"❌ خطا: {result['error']}")
    
    st.markdown("---")
    st.markdown("### 📈 راهنما")
    st.markdown("""
    1. فایل داده خود را آپلود کنید
    2. شاخص‌های کلیدی را مشاهده کنید
    3. نمودارهای مختلف را انتخاب و تحلیل کنید
    """)

# Main content
if st.session_state.data is not None and st.session_state.kpis is not None:
    kpis = st.session_state.kpis
    
    # KPI Cards
    st.markdown("### 📊 شاخص‌های کلیدی عملکرد (KPI)")
    
    col1, col2, col3 = st.columns(3)
    
    with col1:
        st.markdown(f"""
        <div class="kpi-card kpi-card-green">
            <div class="kpi-label">💰 مجموع فروش خالص (بدون ارزش افزوده)</div>
            <div class="kpi-value">{kpis['net_sale_without_VAT']:,.0f} ریال</div>
        </div>
        """, unsafe_allow_html=True)
    
    with col2:
        st.markdown(f"""
        <div class="kpi-card kpi-card-blue">
            <div class="kpi-label">💰 مجموع فروش خالص (با ارزش افزوده)</div>
            <div class="kpi-value">{kpis['net_sale_with_VAT']:,.0f} ریال</div>
        </div>
        """, unsafe_allow_html=True)
    
    with col3:
        st.markdown(f"""
        <div class="kpi-card">
            <div class="kpi-label">💰 مجموع فروش ناخالص</div>
            <div class="kpi-value">{kpis['gross_sales']:,.0f} ریال</div>
        </div>
        """, unsafe_allow_html=True)
    
    col4, col5, col6 = st.columns(3)
    
    with col4:
        st.markdown(f"""
        <div class="kpi-card kpi-card-orange">
            <div class="kpi-label">📦 تعداد کل محصولات</div>
            <div class="kpi-value">{kpis['total_product']} کالا</div>
        </div>
        """, unsafe_allow_html=True)
    
    with col5:
        st.markdown(f"""
        <div class="kpi-card kpi-card-purple">
            <div class="kpi-label">🧾 تعداد کل برندها</div>
            <div class="kpi-value">{kpis['total_brand']} برند</div>
        </div>
        """, unsafe_allow_html=True)
    
    with col6:
        st.markdown(f"""
        <div class="kpi-card kpi-card-red">
            <div class="kpi-label">↩️ مجموع برگشتی خالص</div>
            <div class="kpi-value">{kpis['total_return']:,.0f} ریال</div>
        </div>
        """, unsafe_allow_html=True)
    
    st.markdown("---")
    
    # Charts Section
    st.markdown("### 📈 نمودارهای تحلیلی")
    
    # Row 1
    col1, col2 = st.columns(2)
    
    with col1:
        chart_1 = st.selectbox(
            "نمودار ۱",
            AVAILABLE_CHARTS,
            index=0,
            key="chart_1"
        )
        fig1 = create_specific_chart(chart_1, st.session_state.data)
        st.plotly_chart(fig1, use_container_width=True)
    
    with col2:
        chart_2 = st.selectbox(
            "نمودار ۲",
            AVAILABLE_CHARTS,
            index=4,
            key="chart_2"
        )
        fig2 = create_specific_chart(chart_2, st.session_state.data)
        st.plotly_chart(fig2, use_container_width=True)
    
    # Row 2
    col3, col4 = st.columns(2)
    
    with col3:
        chart_3 = st.selectbox(
            "نمودار ۳",
            AVAILABLE_CHARTS,
            index=5,
            key="chart_3"
        )
        fig3 = create_specific_chart(chart_3, st.session_state.data)
        st.plotly_chart(fig3, use_container_width=True)
    
    with col4:
        chart_4 = st.selectbox(
            "نمودار ۴",
            AVAILABLE_CHARTS,
            index=9,
            key="chart_4"
        )
        fig4 = create_specific_chart(chart_4, st.session_state.data)
        st.plotly_chart(fig4, use_container_width=True)
    
    # Row 3
    col5, col6 = st.columns(2)
    
    with col5:
        chart_5 = st.selectbox(
            "نمودار ۵",
            AVAILABLE_CHARTS,
            index=8,
            key="chart_5"
        )
        fig5 = create_specific_chart(chart_5, st.session_state.data)
        st.plotly_chart(fig5, use_container_width=True)
    
    with col6:
        chart_6 = st.selectbox(
            "نمودار ۶",
            AVAILABLE_CHARTS,
            index=12,
            key="chart_6"
        )
        fig6 = create_specific_chart(chart_6, st.session_state.data)
        st.plotly_chart(fig6, use_container_width=True)
    
    # Data Preview
    with st.expander("📋 پیش‌نمایش داده‌ها"):
        st.dataframe(st.session_state.data.head(100), use_container_width=True)

else:
    # Welcome message when no data is loaded
    st.markdown("""
    <div style="text-align: center; padding: 50px; background: #f8f9fa; border-radius: 15px; margin: 20px 0;">
        <h2>🎯 به داشبورد تحلیل فروش خوش آمدید</h2>
        <p style="font-size: 1.2rem; color: #666;">
            برای شروع، لطفاً فایل داده خود را از طریق پنل سمت چپ بارگذاری کنید
        </p>
        <br>
        <h4>📋 ستون‌های مورد نیاز در فایل:</h4>
        <ul style="text-align: right; max-width: 400px; margin: 0 auto; color: #555;">
            <li>ماه</li>
            <li>کد کالا</li>
            <li>نام برند</li>
            <li>تولید کننده</li>
            <li>نام کالا</li>
            <li>مبلغ فروش ناخالص</li>
            <li>مبلغ تخفیف</li>
            <li>مبلغ فروش خالص</li>
            <li>مبلغ برگشتی خالص</li>
        </ul>
    </div>
    """, unsafe_allow_html=True)

# Footer
st.markdown("---")
st.markdown("""
<div style="text-align: center; color: #888; padding: 20px;">
    <p>📊 داشبورد تحلیل فروش پیشرفته | ساخته شده با ❤️</p>
</div>
""", unsafe_allow_html=True)