import React, { useState, useEffect, useMemo } from 'react';
import { useParams, Link } from 'react-router-dom';
import { ArrowLeft, Video } from 'lucide-react';

export default function EventTimeline() {
  const { id } = useParams();
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(true);

  const API_BASE = '/api';

  useEffect(() => {
    async function fetchData() {
      try {
        const query = id ? `?changeover_id=${id}` : '';
        const res = await fetch(`${API_BASE}/events${query}`);
        if (res.ok) {
          setEvents(await res.json());
        }
      } catch (err) {
        console.error("Error fetching events", err);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);

  const formatDuration = (seconds) => {
    if (!seconds) return '0s';
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    let res = [];
    if (h > 0) res.push(`${h}h`);
    if (m > 0) res.push(`${m}m`);
    if (s > 0) res.push(`${s}s`);
    return res.join(' ') || '0s';
  };

  const getStateBadge = (state) => {
    const s = state?.toLowerCase() || '';
    if (s === 'active') return <span className="badge active">Active</span>;
    if (s === 'waste') return <span className="badge waste">Waste</span>;
    if (s === 'idle') return <span className="badge idle">Idle</span>;
    if (s === 'load waiting') return <span className="badge load">Load Wait</span>;
    return <span className="badge">{state}</span>;
  };

  const chronologicalBlocks = useMemo(() => {
    const blocks = {};
    events.forEach(ev => {
      // Group by exact time (HH:MM:SS) for a waterfall layout
      const timeKey = ev.start_time.substring(0, 8); 
      if (!blocks[timeKey]) {
        blocks[timeKey] = { timeKey, CO: [], Mill: [], Conveyor: [] };
      }
      if (ev.camera_zone === 'CO') blocks[timeKey].CO.push(ev);
      if (ev.camera_zone === 'Mill') blocks[timeKey].Mill.push(ev);
      if (ev.camera_zone === 'Conveyor') blocks[timeKey].Conveyor.push(ev);
    });

    // Sort chronologically
    return Object.values(blocks).sort((a, b) => a.timeKey.localeCompare(b.timeKey));
  }, [events]);

  const renderEventCard = (ev, i, arrLength) => (
    <div key={ev.id} style={{ 
      display: 'flex', flexDirection: 'column', 
      background: 'rgba(255, 255, 255, 0.03)',
      border: '1px solid rgba(255, 255, 255, 0.05)',
      borderRadius: '12px',
      padding: '1rem',
      marginBottom: i < arrLength - 1 ? '1rem' : '0',
      transition: 'transform 0.2s ease, background 0.2s ease'
    }}
    onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.06)'}
    onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.03)'}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
        <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
          {ev.start_time.substring(0, 8)} - {ev.end_time.substring(0, 8)}
        </span>
        {getStateBadge(ev.state)}
      </div>
      <p style={{ margin: '0 0 0.5rem 0', fontWeight: '500' }}>{ev.event_description}</p>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: '0.8rem', opacity: 0.8 }}>Duration: {formatDuration(ev.state_duration_seconds)}</span>
        <button 
          disabled
          style={{ 
            display: 'flex', alignItems: 'center', gap: '0.25rem', 
            padding: '0.25rem 0.5rem', borderRadius: '4px', border: '1px solid rgba(255,255,255,0.1)',
            background: 'rgba(255,255,255,0.05)', color: 'var(--text-secondary)',
            cursor: 'not-allowed', fontSize: '0.75rem'
          }}
          title="Video review is currently disabled"
        >
          <Video size={12} /> View Video
        </button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', marginTop: '0.75rem', paddingTop: '0.5rem', borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
        <div>
          <span style={{ opacity: 0.7 }}>Std Cycle: </span>
          <span style={{ color: 'var(--text)', fontWeight: '500' }}>N/A</span>
        </div>
        <div>
          <span style={{ opacity: 0.7 }}>Manpower: </span>
          <span style={{ color: 'var(--text)', fontWeight: '500' }}>Nil</span>
        </div>
      </div>
    </div>
  );

  if (loading) {
    return (
      <div className="container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <h2>Loading Timeline...</h2>
      </div>
    );
  }

  return (
    <div className="container animate-fade-in" style={{ maxWidth: '100%' }}>
      <div className="header" style={{ marginBottom: '1rem' }}>
        <Link to={`/changeover/${id}`} style={{ color: 'var(--text-secondary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
          <ArrowLeft size={16} /> Back to Changeover Analytics
        </Link>
        <h1>Event Timeline: {id}</h1>
        <p>Synchronized Swimlane Timeline</p>
      </div>

      <div className="glass-panel" style={{ display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden' }}>
        
        {/* Sticky Header Grid */}
        <div style={{ 
          display: 'grid', 
          gridTemplateColumns: '80px 1fr 1fr 1fr', 
          gap: '1.5rem',
          padding: '1.5rem 1.5rem 1rem 1.5rem',
          background: 'var(--panel-bg)',
          backdropFilter: 'blur(16px)',
          WebkitBackdropFilter: 'blur(16px)',
          borderBottom: '1px solid var(--panel-border)',
          position: 'sticky',
          top: 0,
          zIndex: 10
        }}>
          <h2 style={{ margin: 0, fontSize: '1rem', color: 'var(--text-secondary)' }}>Time</h2>
          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>CO Timeline</h2>
          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Mill Timeline</h2>
          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Conveyor Timeline</h2>
        </div>

        {/* Scrollable Timeline Tracks Container */}
        <div style={{ overflowY: 'auto', maxHeight: '65vh', padding: '0 1.5rem' }}>
          {chronologicalBlocks.length === 0 ? (
            <p style={{ padding: '2rem', textAlign: 'center', opacity: 0.5 }}>No events recorded.</p>
          ) : (
            chronologicalBlocks.map((block, index) => (
              <div key={block.timeKey} style={{ 
                display: 'grid', 
                gridTemplateColumns: '80px 1fr 1fr 1fr', 
                gap: '1.5rem',
                borderBottom: index < chronologicalBlocks.length - 1 ? '1px dashed rgba(255,255,255,0.1)' : 'none',
                padding: '1.5rem 0'
              }}>
                
                {/* Time Anchor Left Column */}
                <div style={{ position: 'relative' }}>
                  <div style={{ 
                    position: 'sticky', 
                    top: '0', 
                    fontWeight: '600', 
                    color: 'var(--accent)',
                    fontSize: '1.1rem',
                    letterSpacing: '0.05em'
                  }}>
                    {block.timeKey}
                  </div>
                </div>

                {/* Event Columns */}
                <div>
                  {block.CO.map((ev, i) => renderEventCard(ev, i, block.CO.length))}
                </div>
                <div>
                  {block.Mill.map((ev, i) => renderEventCard(ev, i, block.Mill.length))}
                </div>
                <div>
                  {block.Conveyor.map((ev, i) => renderEventCard(ev, i, block.Conveyor.length))}
                </div>

              </div>
            ))
          )}
        </div>

      </div>
    </div>
  );
}