import React, { useState, useEffect } from 'react';
import { Slider } from '@/components/ui/slider';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { RefreshCw } from 'lucide-react';

const TimelineCamera = () => {
  const [timeOffset, setTimeOffset] = useState(0);
  const [jsonUrl, setJsonUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [cameraData, setCameraData] = useState({
    az_deg: 182.68,
    tilt_deg: -1.42,
    zoom: 1412,
    fov_deg: 10.04,
    image_timestamp: "2025-01-10T01:27:48Z"
  });

  const handleLoadJson = async () => {
    if (!jsonUrl) return;
    setLoading(true);
    try {
      // In a real implementation, this would fetch and parse the JSON
      // For now, we'll just simulate the loading state
      await new Promise(resolve => setTimeout(resolve, 1000));
    } catch (error) {
      console.error('Error loading JSON:', error);
    } finally {
      setLoading(false);
    }
  };

  // Simulate camera changes based on time offset
  useEffect(() => {
    const updateCameraData = () => {
      setCameraData({
        az_deg: 182.68 + Math.sin(timeOffset / 10) * 20,
        tilt_deg: -1.42 + Math.cos(timeOffset / 8) * 5,
        zoom: 1412 + Math.sin(timeOffset / 15) * 200,
        fov_deg: 10.04 + Math.cos(timeOffset / 12) * 2,
        image_timestamp: new Date(new Date("2025-01-10T01:27:48Z").getTime() + timeOffset * 60000).toISOString()
      });
    };
    updateCameraData();
  }, [timeOffset]);

  return (
    <div className="max-w-6xl mx-auto p-6 space-y-6 bg-white rounded-lg shadow-md">
      <div className="flex items-center gap-4">
        <Input
          type="text"
          placeholder="Enter JSON URL"
          value={jsonUrl}
          onChange={(e) => setJsonUrl(e.target.value)}
          className="flex-grow"
        />
        <Button 
          onClick={handleLoadJson} 
          disabled={loading || !jsonUrl}
          className="whitespace-nowrap"
        >
          {loading ? (
            <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
          ) : null}
          Load JSON
        </Button>
      </div>

      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-800">Sage Peak 1</h1>
        <span className="text-sm text-gray-600">ID: 2341 | Axis-SagePeak1</span>
      </div>

      <div className="relative">
        <img 
          src="/api/placeholder/1920/1080" 
          alt="Camera View" 
          className="w-full rounded-lg shadow-sm"
        />
      </div>

      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium text-gray-600">Timeline</span>
          <span className="text-sm text-gray-500">
            {new Date(cameraData.image_timestamp).toLocaleString()}
          </span>
        </div>
        
        <Slider 
          value={[timeOffset]}
          onValueChange={(value) => setTimeOffset(value[0])}
          max={120}
          step={1}
          className="w-full"
        />

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
          <div className="p-4 bg-gray-50 rounded-lg">
            <div className="text-sm font-medium text-gray-500">Azimuth</div>
            <div className="text-lg font-semibold text-gray-900">
              {cameraData.az_deg.toFixed(2)}°
            </div>
          </div>
          <div className="p-4 bg-gray-50 rounded-lg">
            <div className="text-sm font-medium text-gray-500">Tilt</div>
            <div className="text-lg font-semibold text-gray-900">
              {cameraData.tilt_deg.toFixed(2)}°
            </div>
          </div>
          <div className="p-4 bg-gray-50 rounded-lg">
            <div className="text-sm font-medium text-gray-500">Zoom</div>
            <div className="text-lg font-semibold text-gray-900">
              {Math.round(cameraData.zoom)}
            </div>
          </div>
          <div className="p-4 bg-gray-50 rounded-lg">
            <div className="text-sm font-medium text-gray-500">FOV</div>
            <div className="text-lg font-semibold text-gray-900">
              {cameraData.fov_deg.toFixed(2)}°
            </div>
          </div>
        </div>
      </div>

      <div className="text-right text-sm text-gray-500">
        Provided by AlertWest | Attribution: UCSD
      </div>
    </div>
  );
};

export default TimelineCamera;