import React from 'react';
import { Calendar as CalendarIcon, Clock } from 'lucide-react';
import { Progress } from '../ui/progress';

export function RightPanel() {
  return (
    <div className="space-y-8">
      {/* System Status */}
      <div>
        <h3 className="text-sm font-bold text-gray-900 mb-4">System Status</h3>
        <div className="space-y-4">
          <div>
            <div className="flex justify-between text-xs mb-1">
              <span className="font-medium text-gray-700">Operations Status</span>
              <span className="text-green-600 flex items-center gap-1">● Normal</span>
            </div>
          </div>
          <div>
            <div className="flex justify-between text-xs mb-1">
              <span className="text-gray-600">Storage Capacity</span>
              <span className="text-gray-900 font-medium">73%</span>
            </div>
            <Progress value={73} className="h-1.5 bg-blue-100 [&>[data-slot=progress-indicator]]:bg-blue-600" />
          </div>
          <div>
            <div className="flex justify-between text-xs mb-1">
              <span className="text-gray-600">System Load</span>
              <span className="text-gray-900 font-medium">42%</span>
            </div>
            <Progress value={42} className="h-1.5 bg-green-100 [&>[data-slot=progress-indicator]]:bg-green-500" />
          </div>
        </div>
      </div>

      {/* Upcoming Events */}
      <div>
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-sm font-bold text-gray-900">Upcoming Events</h3>
          <CalendarIcon className="w-4 h-4 text-blue-500" />
        </div>
        <div className="space-y-4">
          <div className="flex gap-3">
            <div className="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center shrink-0">
              <CalendarIcon className="w-4 h-4" />
            </div>
            <div>
              <div className="text-sm font-semibold text-gray-900">Quarterly Review</div>
              <div className="text-xs text-gray-500">Dec 5, 2025 | 10:00 AM</div>
            </div>
          </div>
          <div className="flex gap-3">
            <div className="w-8 h-8 rounded-lg bg-green-100 text-green-600 flex items-center justify-center shrink-0">
              <CalendarIcon className="w-4 h-4" />
            </div>
            <div>
              <div className="text-sm font-semibold text-gray-900">Supplier Meeting</div>
              <div className="text-xs text-gray-500">Nov 30, 2025 | 2:30 PM</div>
            </div>
          </div>
        </div>
      </div>

      {/* Recent Activities */}
      <div>
        <h3 className="text-sm font-bold text-gray-900 mb-4">Recent Activities</h3>
        <div className="space-y-6 relative pl-2">
          {/* Vertical Line */}
          <div className="absolute left-0 top-2 bottom-2 w-px bg-gray-200" />
          
          <div className="relative pl-4">
            <div className="absolute left-[-2px] top-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 ring-4 ring-white" />
            <div className="text-sm text-gray-900 font-medium leading-none mb-1">David Wilson updated sensor configuration</div>
            <div className="text-xs text-gray-500">45 minutes ago</div>
          </div>
          
          <div className="relative pl-4">
            <div className="absolute left-[-2px] top-1.5 w-1.5 h-1.5 rounded-full bg-gray-300 ring-4 ring-white" />
            <div className="text-sm text-gray-900 font-medium leading-none mb-1">System generated monthly reports</div>
            <div className="text-xs text-gray-500">2 hours ago</div>
          </div>

          <div className="relative pl-4">
             <div className="absolute left-[-2px] top-1.5 w-1.5 h-1.5 rounded-full bg-gray-300 ring-4 ring-white" />
            <div className="text-sm text-gray-900 font-medium leading-none mb-1">Sarah Chen added new products</div>
            <div className="text-xs text-gray-500">3 hours ago</div>
          </div>
        </div>
      </div>
    </div>
  );
}