const { useState, useEffect } = React;

const width = 960;
const height = 500;
const margin = { top: 20, right: 30, bottom: 65, left: 220 };

const App = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const sources = [
      'https://raw.githubusercontent.com/SreejaB-code/Activity6_population.csv-/main/Activity6_Population.csv',
      'https://gist.githubusercontent.com/SreejaB-code/370dbc87d96360de9a7074e4e250b3d6/raw/0a1704fcc6e3cd23ea81b6154a143c8ee1ed8326/Activity6_population.csv',
    ];

    const fetchData = async () => {
      for (const url of sources) {
        try {
          const res = await fetch(url);
          if (!res.ok) continue;

          const text = await res.text();
          const parsed = d3.csvParse(text, (d) => ({
            Country: d.Country || d['Country Name'],
            Population: +d['Population-2020'] || +d['2020'],
          }));

          const topCountries = parsed
            .filter((d) => !isNaN(d.Population))
            .sort((a, b) => b.Population - a.Population)
            .slice(0, 30);

          setData(topCountries);
          setLoading(false);
          return;
        } catch (err) {
          console.error(`Failed to load ${url}:`, err);
          continue;
        }
      }

      setError("Unable to fetch live data. Using default sample.");
      setData([
        { Country: 'China', Population: 1439323776 },
        { Country: 'India', Population: 1380004385 },
        { Country: 'United States', Population: 331002651 },
        { Country: 'Indonesia', Population: 273523615 },
        { Country: 'Pakistan', Population: 220892340 },
      ]);
      setLoading(false);
    };

    fetchData();
  }, []);

  if (loading) return <pre>Loading... Check console for logs.</pre>;

  const innerHeight = height - margin.top - margin.bottom;
  const innerWidth = width - margin.left - margin.right;

  if (!data || data.length === 0) {
    return <pre>Data missing or empty</pre>;
  }

  const xScale = d3.scaleLinear()
    .domain([0, d3.max(data, (d) => d.Population)])
    .range([0, innerWidth])
    .nice();

  const yScale = d3.scaleBand()
    .domain(data.map((d) => d.Country))
    .range([0, innerHeight])
    .padding(0.2);

  return (
    <div>
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <svg width={width} height={height} style={{ border: '1px solid #ccc' }}>
        <g transform={`translate(${margin.left},${margin.top})`}>
          {/* Bottom axis */}
          <g transform={`translate(0,${innerHeight})`}>
            <line x2={innerWidth} stroke="black" />
            {xScale.ticks(5).map((tick) => (
              <g key={tick} transform={`translate(${xScale(tick)},0)`}>
                <line y2={6} stroke="black" />
                <text y={20} style={{ textAnchor: 'middle', fontSize: 12 }}>
                  {(tick / 1000000).toFixed(0)}M
                </text>
              </g>
            ))}
            <text x={innerWidth / 2} y={40} style={{ textAnchor: 'middle', fontSize: 14 }}>
              Population (2020)
            </text>
          </g>

          {/* Left axis */}
          <g>
            <line y2={innerHeight} stroke="black" />
            {yScale.domain().map((country) => (
              <text
                key={country}
                x={-10}
                y={yScale(country) + yScale.bandwidth() / 2}
                style={{ textAnchor: 'end', fontSize: 12, alignmentBaseline: 'middle' }}
              >
                {country}
              </text>
            ))}
          </g>

          {/* Bars */}
          {data.map((d, i) => (
            <rect
              key={i}
              x={0}
              y={yScale(d.Country)}
              width={xScale(d.Population)}
              height={yScale.bandwidth()}
              fill="#137B80"
              rx={2}
              ry={2}
            />
          ))}
        </g>
      </svg>
      <div style={{ marginTop: 10 }}>
        <small>Total Countries: {data.length}</small>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));