const { useState } = React;
const { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } = Recharts;

function App() {
  const [data, setData] = useState(null);
  const [query, setQuery] = useState('');
  const [insights, setInsights] = useState([]);

  const handleFileUpload = async (event) => {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch('/api/process-file', {
      method: 'POST',
      body: formData,
    });
    const result = await response.json();
    setData(result);
  };

  const handleQuery = async () => {
    if (!data || !query) return;

    const response = await fetch('/api/query', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query,
        embeddings: data.embeddings
      }),
    });
    
    const result = await response.json();
    const newInsights = result.similar_indices.map(idx => data.raw_data[idx]);
    setInsights(newInsights);
  };

  return (
    <div className="p-6 max-w-6xl mx-auto">
      <div className="mb-6">
        <label className="block mb-2 text-sm font-medium">
          Upload Data File
        </label>
        <div className="flex items-center justify-center w-full">
          <label className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
            <div className="flex flex-col items-center justify-center pt-5 pb-6">
              <svg className="w-8 h-8 mb-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
              </svg>
              <p className="mb-2 text-sm text-gray-500">
                <span className="font-semibold">Click to upload</span> or drag and drop
              </p>
            </div>
            <input
              type="file"
              className="hidden"
              onChange={handleFileUpload}
              accept=".csv,.xlsx,.xls"
            />
          </label>
        </div>
      </div>

      {data && (
        <div className="space-y-6">
          <div>
            <input
              type="text"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Ask a question about your data..."
              className="w-full p-2 border rounded"
            />
            <button
              onClick={handleQuery}
              className="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              Search
            </button>
          </div>

          {insights.length > 0 && (
            <div className="mt-6">
              <h3 className="text-lg font-semibold mb-4">Related Insights</h3>
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={insights}>
                    {Object.keys(insights[0] || {}).map((key) => (
                      <Bar key={key} dataKey={key} fill="#8884d8" />
                    ))}
                    <XAxis />
                    <YAxis />
                    <Tooltip />
                  </BarChart>
                </ResponsiveContainer>
              </div>
              <div className="mt-4 space-y-2">
                {insights.map((insight, idx) => (
                  <div key={idx} className="p-4 bg-gray-50 rounded">
                    {Object.entries(insight).map(([key, value]) => (
                      <div key={key}>
                        <span className="font-medium">{key}:</span> {value}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

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