import React, { useEffect, useState } from 'react';
import { SamplesService } from '../../openapi';

interface Event {
  event_type: string;
}

interface Sample {
  id: number;
  sample_name: string;
  position: number;
  puck_id: number;
  crystalname?: string;
  positioninpuck?: number;
  events: Event[];
}

interface Puck {
  id: number;
  puck_name: string;
  puck_type: string;
  puck_location_in_dewar: number;
  dewar_id: number;
  samples: Sample[];
}

const SampleTracker: React.FC = () => {
  const [pucks, setPucks] = useState<Puck[]>([]);
  const [hoveredSample, setHoveredSample] = useState<{name: string, status: string} | null>(null);

  useEffect(() => {
    const fetchPucks = async () => {
      try {
        const data: Puck[] = await SamplesService.getAllPucksWithSamplesAndEventsSamplesPucksSamplesGet();
        console.log(data);  // Log the data to inspect it
        setPucks(data);
      } catch (error) {
        console.error("Error fetching pucks", error);
      }
    };
    fetchPucks();
  }, []);

  const getSampleColor = (events: Event[] = []) => {
    const hasMounted = events.some(e => e.event_type === 'Mounted');
    const hasUnmounted = events.some(e => e.event_type === 'Unmounted');
    const hasLost = events.some(e => e.event_type === 'Lost');
    const hasFailed = events.some(e => e.event_type === 'Failed');

    if (hasFailed) return 'red';
    if (hasLost) return 'orange';
    if (hasMounted && hasUnmounted) return 'green';

    return 'gray';
  };

  const getSampleStatus = (events: Event[] = []) => {
    const hasMounted = events.some(e => e.event_type === 'Mounted');
    const hasUnmounted = events.some(e => e.event_type === 'Unmounted');
    const hasLost = events.some(e => e.event_type === 'Lost');
    const hasFailed = events.some(e => e.event_type === 'Failed');

    if (hasFailed) return 'Failed';
    if (hasLost) return 'Lost';
    if (hasMounted && hasUnmounted) return 'Completed';
    if (hasMounted) return 'In Progress';

    return 'Pending';
  };

    return (
    <div className="sample-tracker-container">
      <div className="sample-tracker">
        <div className="header-band">
          <h2>Sample Tracker</h2>
        </div>
        <div className="pucks-container">
          {pucks.map((puck) => (
            <div key={puck.id} className="puck-column">
              <div className="puck-label" style={{fontSize: '6px'}}>
                {puck.puck_name.split('').map((char, i) => (
                    <span key={i} style={{fontSize: '10px'}}>{char}</span>
                ))}
              </div>
              <div className="samples">
                {Array.from({length: 16}).map((_, index) => {
                  const sample = puck.samples.find(s => s.position === index + 1);
                  const status = sample ? getSampleStatus(sample.events) : '';
                  return (
                    <div
                      key={index}
                      className="sample-dot"
                      style={{
                        backgroundColor: sample
                          ? getSampleColor(sample.events)
                          : 'transparent',
                        border: sample && sample.events.some(e => e.event_type === 'Lost')
                          ? '1px solid red'
                          : '1px solid lightgray',
                      }}
                      onMouseEnter={() => sample && setHoveredSample({name: sample.sample_name, status})}
                      onMouseLeave={() => setHoveredSample(null)}
                    ></div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        {hoveredSample && (
          <div className="tooltip">
            <p><strong>Name:</strong> {hoveredSample.name}</p>
            <p><strong>Status:</strong> {hoveredSample.status}</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default SampleTracker;