/**
 * Hill Chart App - Visual progress tracking
 */

import React, { useState } from 'react';

export function HillChart({ projectId }: { projectId?: number }) {
  const [items] = useState([
    { id: 1, name: 'Homepage Design', position: 75, color: '#1d8cf8' },
    { id: 2, name: 'Navigation System', position: 60, color: '#00bf9a' },
    { id: 3, name: 'Content Strategy', position: 40, color: '#ff8d72' },
    { id: 4, name: 'QA Testing', position: 20, color: '#fd5d93' },
  ]);

  // SVG Hill curve path
  const hillPath = 'M 0,100 Q 125,0 250,100';

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '10px' }}>Hill Chart</h1>
      <p style={{ color: '#666', marginBottom: '30px' }}>
        Left side = figuring things out • Right side = getting it done
      </p>
      
      <div style={{ background: 'white', border: '1px solid #ddd', borderRadius: '8px', padding: '40px', marginBottom: '30px' }}>
        <svg width="100%" height="200" viewBox="0 0 500 150" style={{ overflow: 'visible' }}>
          {/* Hill curve */}
          <path 
            d="M 0,100 Q 125,0 250,100 L 500,100" 
            fill="none" 
            stroke="#ddd" 
            strokeWidth="2"
          />
          
          {/* Midpoint line */}
          <line x1="250" y1="0" x2="250" y2="100" stroke="#eee" strokeWidth="1" strokeDasharray="4" />
          
          {/* Labels */}
          <text x="125" y="130" textAnchor="middle" fontSize="12" fill="#999">Figuring it out</text>
          <text x="375" y="130" textAnchor="middle" fontSize="12" fill="#999">Making it happen</text>
          
          {/* Items on the hill */}
          {items.map(item => {
            const x = (item.position / 100) * 500;
            const y = item.position <= 50 
              ? 100 - Math.sin((item.position / 50) * Math.PI / 2) * 100
              : 100 - Math.cos(((item.position - 50) / 50) * Math.PI / 2) * 100;
            
            return (
              <g key={item.id}>
                <circle 
                  cx={x} 
                  cy={y} 
                  r="8" 
                  fill={item.color}
                  stroke="white"
                  strokeWidth="2"
                />
              </g>
            );
          })}
        </svg>
      </div>

      <div style={{ display: 'grid', gap: '12px' }}>
        {items.map(item => (
          <div key={item.id} style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div style={{ 
              width: '16px', 
              height: '16px', 
              borderRadius: '50%', 
              background: item.color 
            }} />
            <span style={{ flex: 1 }}>{item.name}</span>
            <span style={{ fontSize: '12px', color: '#999' }}>{item.position}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}
