# front_end.py

import gradio as gr
import requests
import pandas as pd
import plotly.express as px
import os

# Configuration
BACKEND_URL = os.environ.get("SERVER_URL")

def validate_email(email):
    """Basic email validation"""
    return '@' in email and '.' in email.split('@')[1]

def generate_affiliate(email, secret):
    """Generate affiliate ID and private key"""
    if not email or not secret:
        return "Please provide both email and secret", "", ""
    
    if not validate_email(email):
        return "Please provide a valid email address", "", ""
    
    if len(secret) < 6:
        return "Secret must be at least 6 characters long", "", ""
    
    try:
        response = requests.post(
            f"{BACKEND_URL}/generate-affiliate",
            json={"email": email, "secret": secret}
        )
        
        if response.status_code == 200:
            data = response.json()
            return (
                "Affiliate ID generated successfully! Please save your private key securely.",
                data['affiliate_id'],
                data['private_key']
            )
        else:
            error_msg = response.json().get('message', 'Unknown error occurred')
            return f"Error: {error_msg}", "", ""
            
    except Exception as e:
        return "Error: Unable to connect to server", "", ""

def create_commission_chart(df):
    result = df.groupby("date")["amount"].sum().reset_index()
    """Create commission history chart"""
    fig = px.bar(
        result,
        x='date',
        y='amount',
        title='Daily Commission History'
    )
    fig.update_layout(
        xaxis_title="Date",
        yaxis_title="Daily Commission Amount ($)",
        hovermode='x unified',
        showlegend=False,
        plot_bgcolor='white',
        paper_bgcolor='white',
        bargap=0.2
    )
    fig.update_traces(
        marker_color='#2E86C1',
        hovertemplate="Date: %{x}<br>Commission: $%{y:.2f}<extra></extra>"
    )
    fig.update_xaxes(
        gridcolor='lightgray',
        showgrid=True
    )
    fig.update_yaxes(
        gridcolor='lightgray',
        showgrid=True
    )
    return fig

COLUMN_LIST = ['Datetime', 'Order ID', 'Order Amount ($)', 'Commission ($)']
COLUMN_LB = ['Affiliate ID', 'Duration (Days)', 'Sales', 'Commission ($)']

def format_commission_data(df):
    """Format commission data for display"""
    if df is None or df.empty:
        return pd.DataFrame(columns=COLUMN_LIST)
    
    df['time'] = df['timestamp'].dt.strftime('%Y-%m-%d %H:%M:%S')
    df['date'] = df['timestamp'].dt.strftime('%Y-%m-%d')
    df['commission_amount'] = (df['amount'] / 5).round(2)
    display_df = df[['time', 'order_id', 'amount', 'commission_amount']].copy()
    display_df.columns = COLUMN_LIST
    return display_df

def show_commission_history(private_key):
    """Fetch and display commission history"""
    if not private_key:
        empty_df = pd.DataFrame(columns=COLUMN_LIST)
        return "Please provide your private key", None, empty_df
    
    try:
        response = requests.post(
            f"{BACKEND_URL}/commission-history",
            json={"private_key": private_key}
        )
        
        if response.status_code == 200:
            data = response.json()
            commission_history = data['commission_history']
            total_commission = data['total_commission']
            
            if not commission_history:
                empty_df = pd.DataFrame(columns=COLUMN_LIST)
                return "No commission history found", None, empty_df
            
            df = pd.DataFrame(commission_history)
            df['timestamp'] = pd.to_datetime(df['timestamp'], unit='ms')
            
            display_df = format_commission_data(df)
            chart = create_commission_chart(df)
            
            return (
                f"Total Commission: ${total_commission:,.2f}",
                chart,
                display_df
            )
        else:
            error_msg = 'Private Key invalid'
            empty_df = pd.DataFrame(columns=COLUMN_LIST)
            return f"Error: {error_msg}", None, empty_df
            
    except Exception as e:
        empty_df = pd.DataFrame(columns=COLUMN_LIST)
        return "Error: Unable to connect to server", None, empty_df

def on_page_load():
    try:
        response = requests.post(f"{BACKEND_URL}/affiliate-leaderboard")
        if response.status_code == 200:
            data = response.json()
            leaderboard_df = pd.DataFrame(data['leaderboard'])
            leaderboard_df.columns = COLUMN_LB
            return leaderboard_df
        else:
            return pd.DataFrame(columns=COLUMN_LB)
    except Exception as e:
        return pd.DataFrame(columns=COLUMN_LB)


# Create Gradio interface
with gr.Blocks(title="FaceOnLive Face Search Affiliate Program") as app:
    gr.Markdown("""
    # FaceOnLive Face Search API & Affiliate Program
    
    ## Ranked Top 3 on Google for "Face Search"!  
    Here's why you'll love it:

    **✅ High Conversion Rate**: Over 6%—higher than most programs!  
    **✅ Flexible Methods**: Share affiliate links or embed our high-traffic Face Search widget.  
    **✅ Inclusive & Easy**: Open to everyone, no tech skills required.  
    **✅ Instant Payouts**: No minimum threshold + flexible payout options. (bank transfer, payoneer, wise, paypal, crypto)  
    **✅ Dedicated Support**: 24/7 support for all affiliates.  
    
    ### Check our service on our website: [Face Search Online](https://faceonlive.com/face-search-online)
    
    ## 1. API Integration
    ### We charge $0.05 per call for FREEMIUM API (with masked URLs) and $2.50 per call for PREMIUM API (Deep Search with Social Media).  
    ### For API integration inquiries, please reach out to us using the contact details at the bottom of this page.  

    ## 2. Affiliate Program                
    ### Check guide below for more details on how to start and earn commissions.  
    """)
    
    with gr.Tabs():
        with gr.TabItem("Commission History"):
            with gr.Row():                
                with gr.Column(scale=6):
                    gr.Markdown("### View Your Commission History (Private Key Required)")
                    private_key_input = gr.Textbox(
                        label="Private Key",
                        placeholder="Enter your private key",
                        type="password"
                    )
                    
                    show_history_btn = gr.Button(
                        "Show Commission History",
                        variant="primary"
                    )
                    
                    total_commission_output = gr.Textbox(
                        label="Total Commission",
                        interactive=False
                    )
                with gr.Column(scale=1):
                    gr.HTML("<div'></div>")
                with gr.Column(scale=5):
                    with gr.Group():
                        gr.Markdown("### Affiliate Sales Leaderboard")
                        aff_leaderboard_table = gr.DataFrame(
                            headers=COLUMN_LB,
                            interactive=False,
                            wrap=True
                        )
            
            with gr.Row():                
                commission_chart = gr.Plot(
                    label="Commission History Chart"
                )
                commission_table = gr.DataFrame(
                    label="Your Commission History",
                    headers=COLUMN_LIST,
                    interactive=False,
                    wrap=True
                )
                
        with gr.TabItem("Generate Affiliate ID"):
            gr.Markdown("### Create New Affiliate Account")
            
            with gr.Row():
                email_input = gr.Textbox(
                    label="Email",
                    placeholder="Enter your email address"
                )
                secret_input = gr.Textbox(
                    label="Secret",
                    placeholder="Enter a secret phrase (min 6 characters)",
                    type="password"
                )
            
            generate_btn = gr.Button(
                "Generate Affiliate ID",
                variant="primary"
            )
            
            status_output = gr.Textbox(
                label="Status",
                interactive=False
            )
            
            with gr.Row():
                affiliate_id_output = gr.Textbox(
                    label="Affiliate ID",
                    interactive=False,
                    show_copy_button=True
                )
                private_key_output = gr.Textbox(
                    label="Private Key",
                    interactive=False,
                    show_copy_button=True
                )
            
            gr.Markdown("""
            > **Important Notes**: 
            > * Save your private key securely! You'll need it to access your commission history.
            > * The private key cannot be recovered if lost.
            > * Never share your private key with anyone.
            """)
    
    gr.Markdown("""

---

## How to Start?

Generate affiliate_id by providing your email and secret in the panel above under the "Generate Affiliate ID" tab.
(On mobile devices, tab may be displayed as "...", tap on it.)

You can participate in our affiliate program in two simple ways: easily share your unique link or embed our face search widget on your website.
### 1. Easy Sharing
Share our website using your `affiliate_id` in the URL. Affiliate IDs are automatically applied to all checkout links.  

Example:  
`https://faceonlive.com/face-search-online/?utm_source={affiliate_id}`  

Replace `{affiliate_id}` with your affiliate ID.  
Example: `https://faceonlive.com/face-search-online/?utm_source=AFF12345678`  

### 2. Embed Face Search on Your Website
Attract traffic by embedding our face search widget. Affiliate IDs are automatically applied to every link.  

#### Embed as Web Component (Recommended)
```html
<script
  type="module"
  src="https://gradio.s3-us-west-2.amazonaws.com/5.5.0/gradio.js"
></script>
<gradio-app src="https://faceonlive-face-search-online.hf.space/?utm_source={affiliate_id}"></gradio-app>
```
#### Embed as iFrame
```html
<iframe
	src="https://faceonlive-face-search-online.hf.space/?utm_source={affiliate_id}"
	frameborder="0"
	width="720"
	height="1200"
></iframe>
```
Additionally, you can add checkout links below the face search widget on your website (see example on [our website](https://faceonlive.com/face-search-online/)):

- **Buy Premium Token (1 Search): $3.9**  
https://faceonlive.pocketsflow.com/checkout?productId=677fe128aeced2814bc4786e&utm_source={affiliate_id}
- **Buy Premium Token (2 Searches): $7.2**  
https://faceonlive.pocketsflow.com/checkout?productId=677fe177aeced2814bc479bc&utm_source={affiliate_id}
- **Buy Premium Token (3 Searches): $9.9**  
https://faceonlive.pocketsflow.com/checkout?productId=677fe22aaeced2814bc47bcc&utm_source={affiliate_id}
- **DMCA & GDPR Takedown Service: $9.9**  
https://faceonlive.pocketsflow.com/checkout?productId=677fe2b5aeced2814bc47dd1&utm_source={affiliate_id}

### 3. Check commission
View your commission history by entering the private key in the panel above under the "Commission History" tab.

## For any inquiries or payout requests, feel free to contact us via:

- Email: [zhu@emails.faceonlive.com](mailto:zhu@emails.faceonlive.com)
- WhatsApp: [+17074043606](https://wa.me/17074043606)
- Telegram: [t.me/faceonlive](https://t.me/faceonlive)
    """)
    gr.HTML('<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FZhu-FaceOnLive%2FFace-Search-Affiliate"><img src="https://api.visitorbadge.io/api/combined?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FZhu-FaceOnLive%2FFace-Search-Affiliate&countColor=%23263759" /></a>')

    generate_btn.click(
        generate_affiliate,
        inputs=[email_input, secret_input],
        outputs=[status_output, affiliate_id_output, private_key_output],
        api_name=False
    )
    
    show_history_btn.click(
        show_commission_history,
        inputs=[private_key_input],
        outputs=[total_commission_output, commission_chart, commission_table], 
        api_name=False
    )
    app.load(on_page_load, inputs=None, outputs=aff_leaderboard_table)

app.launch(show_api=False)