import streamlit as st
import pandas as pd
import folium
from streamlit_folium import folium_static
from streamlit_components import html

# Set page config
st.set_page_config(page_title="Wild Bill vs Buffalo Bill", page_icon="🤠", layout="wide")

# Define the stories
wild_bill_story = """
# 🔫 Wild Bill Hickok: The Legendary Gunslinger

## 1. 🌟 Early Life
   - 🍼 Born James Butler Hickok on May 27, 1837, in Homer, Illinois
   - 🌾 Grew up on a farm, developing skills in shooting and horseback riding
   - 🏞️ Left home at 18 to become a stagecoach driver on the Santa Fe Trail

...  # (The rest of the Wild Bill story remains the same)
"""

buffalo_bill_story = """
# 🦬 Buffalo Bill Cody: The Showman of the West

## 1. 🌟 Early Life
   - 🍼 Born William Frederick Cody on February 26, 1846, in Le Claire, Iowa
   - 🐎 Began riding horses at a young age
   - 🚂 Worked as a Pony Express rider at age 14

...  # (The rest of the Buffalo Bill story remains the same)
"""

# Sidebar
st.sidebar.title("📍 Key Locations & Events")

st.sidebar.markdown("""
## Wild Bill Hickok
- 🏡 Homer, Illinois (Birth)
- 🌽 Rock Creek Station, Nebraska
- 🐄 Abilene, Kansas
- 🏜️ Cheyenne, Wyoming
- 🪙 Deadwood, South Dakota (Death)

## Buffalo Bill Cody
- 🏡 Le Claire, Iowa (Birth)
- 🌽 North Platte, Nebraska
- 🏔️ Cody, Wyoming
- 🌄 Denver, Colorado
- 🏛️ Denver, Colorado (Death)
""")

# Main content
st.title("🤠 Wild Bill Hickok vs Buffalo Bill Cody: A Tale of Two Western Legends")

col1, col2 = st.columns(2)

with col1:
    st.markdown(wild_bill_story)

with col2:
    st.markdown(buffalo_bill_story)

# Map
st.subheader("🗺️ Journey Through the Wild West")

# Create a base map
m = folium.Map(location=[41, -100], zoom_start=4)

# Add markers for key locations
locations = [
    ("Homer, IL", 40.0356, -87.9506, "Wild Bill Hickok's Birthplace"),
    ("Rock Creek Station, NE", 40.1116, -97.0564, "McCanles Massacre Site"),
    ("Abilene, KS", 38.9172, -97.2137, "Wild Bill served as Marshal"),
    ("Cheyenne, WY", 41.1400, -104.8202, "Wild Bill's brief stint as sheriff"),
    ("Deadwood, SD", 44.3767, -103.7296, "Wild Bill's final days and resting place"),
    ("Le Claire, IA", 41.5978, -90.3485, "Buffalo Bill's Birthplace"),
    ("North Platte, NE", 41.1239, -100.7654, "Buffalo Bill's Scout's Rest Ranch"),
    ("Cody, WY", 44.5263, -109.0565, "Town founded by Buffalo Bill"),
    ("Denver, CO", 39.7392, -104.9903, "Buffalo Bill's home and final resting place")
]

for name, lat, lon, desc in locations:
    folium.Marker(
        [lat, lon],
        popup=f"{name}: {desc}",
        tooltip=name
    ).add_to(m)

# Display the map
folium_static(m)

# Add React component for animated timeline
st.subheader("⏳ Animated Timeline")

timeline_component = """
import React, { useState, useEffect } from 'react';

const Timeline = () => {
  const [year, setYear] = useState(1837);
  const [event, setEvent] = useState('');

  const events = {
    1837: "Wild Bill Hickok born",
    1846: "Buffalo Bill Cody born",
    1861: "Wild Bill involved in McCanles Massacre",
    1867: "Buffalo Bill begins hunting buffalo for Kansas Pacific Railroad",
    1871: "Wild Bill becomes marshal of Abilene, Kansas",
    1872: "Buffalo Bill awarded Medal of Honor",
    1876: "Wild Bill assassinated in Deadwood",
    1883: "Buffalo Bill's Wild West show debuts",
    1893: "Buffalo Bill performs at Chicago World's Fair",
    1917: "Buffalo Bill dies in Denver"
  };

  useEffect(() => {
    const timer = setInterval(() => {
      setYear(prevYear => {
        const newYear = prevYear + 1;
        if (newYear > 1917) return 1837;
        return newYear;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    setEvent(events[year] || '');
  }, [year]);

  return (
    <div className="timeline">
      <h2 className="text-2xl font-bold mb-4">Year: {year}</h2>
      <p className="text-lg">{event}</p>
    </div>
  );
};

export default Timeline;
"""

# Use the html component to render the React Timeline
html(
    f"""
    <div id="react-root"></div>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        {timeline_component}
        ReactDOM.render(<Timeline />, document.getElementById('react-root'));
    </script>
    """
)

# Comparison table
st.subheader("📊 Side-by-Side Comparison")

comparison_data = {
    "Aspect": ["Birth Year", "Death Year", "Nickname Origin", "Primary Occupation", "Famous For", "Colorado Connection", "South Dakota Connection"],
    "Wild Bill Hickok": ["1837", "1876", "Unclear, possibly due to his nose", "Lawman, Gunfighter", "Marksmanship, Gunfights", "Visited during travels", "Died in Deadwood"],
    "Buffalo Bill Cody": ["1846", "1917", "Buffalo hunting skills", "Showman, Scout", "Wild West Show", "Home in Denver", "Performed shows in the state"]
}

df = pd.DataFrame(comparison_data)
st.table(df)

# Conclusion
st.markdown("""
## 🌅 Conclusion: Legends of the West

Both Wild Bill Hickok and Buffalo Bill Cody played significant roles in shaping the mythology and reality of the American West. While their paths diverged in many ways, both men left an indelible mark on American history and popular culture.

- 🔫 **Wild Bill Hickok** embodied the image of the fearless lawman and skilled gunfighter, his life and death becoming the stuff of legend.
- 🎪 **Buffalo Bill Cody** transformed his real-life adventures into grand spectacles, sharing his vision of the West with audiences around the world.

Their stories, intertwined with the development of Colorado and South Dakota, continue to captivate our imaginations and remind us of a bygone era in American history.
""")

# Run the Streamlit app
if __name__ == "__main__":
    st.sidebar.markdown("---")
    st.sidebar.markdown("Created with ❤️ using Streamlit")