import React from 'react';
import { Header, Segment, Icon, Grid, List } from 'semantic-ui-react';
import ExperimentalWrapper from './ExperimentalWrapper.jsx';
import TeamGlobeViewer from './TeamGlobeViewer.jsx';
import TEAM_LOCATIONS from './TeamGlobeData.js';
import { formatInTimeZone } from 'date-fns-tz';

export default class TeamGlobe extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentTime: new Date(),
        };
        this._interval = null;
    }

    componentDidMount() {
        this._interval = setInterval(() => {
            this.setState({ currentTime: new Date() });
        }, 1000);
    }

    componentWillUnmount() {
        if (this._interval) clearInterval(this._interval);
    }

    render() {
        const { currentTime } = this.state;

        // Group locations by timezone for the sidebar
        const tzGroups = {};
        TEAM_LOCATIONS.forEach((loc) => {
            if (!tzGroups[loc.timezone]) {
                tzGroups[loc.timezone] = [];
            }
            tzGroups[loc.timezone].push(loc);
        });

        return (
            <ExperimentalWrapper title="Team Globe">
                <Segment>
                    <Header as="h2">
                        <Icon name="globe" />
                        <Header.Content>
                            Team Globe
                            <Header.Subheader>
                                Interactive 3D view of where Bigscreen staff are located worldwide, with live local times.
                            </Header.Subheader>
                        </Header.Content>
                    </Header>
                </Segment>

                <Grid stackable>
                    <Grid.Column computer={11} tablet={16} mobile={16}>
                        <Segment style={{ padding: 0, overflow: 'hidden' }}>
                            <TeamGlobeViewer />
                        </Segment>
                    </Grid.Column>

                    <Grid.Column computer={5} tablet={16} mobile={16}>
                        <Segment>
                            <Header as="h4">
                                <Icon name="clock outline" />
                                <Header.Content>Local Times</Header.Content>
                            </Header>
                            <List divided relaxed>
                                {TEAM_LOCATIONS.map((loc, i) => {
                                    const time = formatInTimeZone(currentTime, loc.timezone, 'h:mm:ss a');
                                    const tz = formatInTimeZone(currentTime, loc.timezone, 'zzz');
                                    const hour = parseInt(formatInTimeZone(currentTime, loc.timezone, 'H'), 10);
                                    const isWorkHours = hour >= 9 && hour < 18;
                                    return (
                                        <List.Item key={i}>
                                            <List.Content>
                                                <List.Header>
                                                    <span style={{
                                                        display: 'inline-block',
                                                        width: 8,
                                                        height: 8,
                                                        borderRadius: '50%',
                                                        backgroundColor: `#${loc.color.toString(16).padStart(6, '0')}`,
                                                        marginRight: 8,
                                                    }} />
                                                    {loc.name}
                                                    <span style={{ float: 'right', opacity: 0.5, fontSize: '0.85em' }}>
                                                        {loc.staff} staff
                                                    </span>
                                                </List.Header>
                                                <List.Description style={{ marginTop: 2 }}>
                                                    <span style={{
                                                        fontVariantNumeric: 'tabular-nums',
                                                        fontWeight: 600,
                                                        color: isWorkHours ? '#21ba45' : '#db2828',
                                                    }}>
                                                        {time}
                                                    </span>
                                                    <span style={{ opacity: 0.5, marginLeft: 6, fontSize: '0.85em' }}>
                                                        {tz}
                                                    </span>
                                                    <span style={{ float: 'right', fontSize: '0.85em' }}>
                                                        {isWorkHours ? '🟢 Working hours' : '🔴 Off hours'}
                                                    </span>
                                                </List.Description>
                                            </List.Content>
                                        </List.Item>
                                    );
                                })}
                            </List>
                        </Segment>
                    </Grid.Column>
                </Grid>
            </ExperimentalWrapper>
        );
    }
}