/**
 * Project Timeline App - Gantt-style project timeline
 */

import React, { useState } from 'react';

export function ProjectTimeline({ projectId }: { projectId?: number }) {
  const [milestones] = useState([
    { id: 1, name: 'Discovery & Planning', start: '2024-01-01', end: '2024-01-15', progress: 100, color: '#1d8cf8' },
    { id: 2, name: 'Design Phase', start: '2024-01-10', end: '2024-01-30', progress: 60, color: '#00bf9a' },
    { id: 3, name: 'Development', start: '2024-01-20', end: '2024-02-28', progress: 30, color: '#ff8d72' },
    { id: 4, name: 'QA & Testing', start: '2024-02-15', end: '2024-03-10', progress: 0, color: '#fd5d93' },
    { id: 5, name: 'Launch', start: '2024-03-01', end: '2024-03-15', progress: 0, color: '#ffc107' },
  ]);

  const months = ['Jan', 'Feb', 'Mar'];
  const today = new Date('2024-01-18');

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Project Timeline</h1>
      
      <div style={{ background: 'white', border: '1px solid #ddd', borderRadius: '8px', padding: '20px', overflowX: 'auto' }}>
        <div style={{ minWidth: '800px' }}>
          {/* Month headers */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', marginBottom: '20px', paddingLeft: '200px' }}>
            {months.map(month => (
              <div key={month} style={{ textAlign: 'center', fontWeight: 'bold', color: '#666' }}>
                {month}
              </div>
            ))}
          </div>

          {/* Timeline rows */}
          {milestones.map(milestone => (
            <div key={milestone.id} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
              <div style={{ width: '180px', paddingRight: '20px', fontSize: '14px', fontWeight: 'bold' }}>
                {milestone.name}
              </div>
              <div style={{ flex: 1, position: 'relative', height: '40px', background: '#f5f5f5', borderRadius: '4px' }}>
                <div style={{ 
                  position: 'absolute',
                  left: '10%', // Simplified positioning
                  width: '30%', // Simplified width
                  height: '100%',
                  background: milestone.color,
                  borderRadius: '4px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: 'white',
                  fontSize: '12px',
                  fontWeight: 'bold'
                }}>
                  {milestone.progress}%
                </div>
              </div>
            </div>
          ))}
          
          {/* Today marker */}
          <div style={{ 
            position: 'relative',
            marginTop: '-' + (milestones.length * 56) + 'px',
            marginLeft: '200px',
            height: (milestones.length * 56) + 'px',
            pointerEvents: 'none'
          }}>
            <div style={{ 
              position: 'absolute',
              left: '20%', // Simplified positioning
              width: '2px',
              height: '100%',
              background: '#ff0000',
              opacity: 0.5
            }}>
              <div style={{ 
                position: 'absolute',
                top: '-20px',
                left: '-20px',
                padding: '4px 8px',
                background: '#ff0000',
                color: 'white',
                fontSize: '10px',
                borderRadius: '3px',
                whiteSpace: 'nowrap'
              }}>
                Today
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
