import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Menu, X, LogOut, FileText, PieChart, Settings, Search, Filter, Play, Pause, Users, UserPlus, Key, Calendar, Clock, BarChart, LineChart as LineIcon } from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

// Analytics Data
const monthlyData = [
  { name: 'Jan', cases: 65, resolved: 45, rejected: 20 },
  { name: 'Feb', cases: 75, resolved: 55, rejected: 20 },
  { name: 'Mar', cases: 85, resolved: 65, rejected: 20 },
  { name: 'Apr', cases: 95, resolved: 75, rejected: 20 },
  { name: 'May', cases: 80, resolved: 60, rejected: 20 },
  { name: 'Jun', cases: 70, resolved: 50, rejected: 20 },
];

const locationData = [
  { name: 'Terminal 1', value: 35 },
  { name: 'Terminal 2', value: 25 },
  { name: 'Terminal 3', value: 20 },
  { name: 'Terminal 4', value: 15 },
];

const Platform = () => {
  const navigate = useNavigate();
  const [activeSection, setActiveSection] = useState('cases');
  const [isVideoPreviewOpen, setIsVideoPreviewOpen] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [adminTab, setAdminTab] = useState('users');
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // Admin Section Data
  const users = [
    { id: 1, name: 'John Smith', role: 'Admin', department: 'IT', lastActive: '2024-03-20' },
    { id: 2, name: 'Sarah Lee', role: 'Supervisor', department: 'Security', lastActive: '2024-03-19' },
    { id: 3, name: 'Mike Chen', role: 'Officer', department: 'Immigration', lastActive: '2024-03-18' },
  ];

  const handleLogout = () => {
    // In a real app, clear auth tokens/session
    navigate('/login');
  };

  const handleVideoPreview = () => {
    setIsVideoPreviewOpen(true);
  };

  const togglePlayPause = () => {
    setIsPlaying(!isPlaying);
  };

  const AnalyticsSection = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold text-gray-900">Total Cases</h3>
          <p className="text-3xl font-bold text-blue-600 mt-2">470</p>
          <p className="text-sm text-gray-500 mt-1">+8% from last month</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold text-gray-900">Average Response Time</h3>
          <p className="text-3xl font-bold text-green-600 mt-2">4.2h</p>
          <p className="text-sm text-gray-500 mt-1">-12% from last month</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold text-gray-900">Resolution Rate</h3>
          <p className="text-3xl font-bold text-purple-600 mt-2">89%</p>
          <p className="text-sm text-gray-500 mt-1">+3% from last month</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">Monthly Trends</h3>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={monthlyData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="cases" stroke="#2563eb" />
                <Line type="monotone" dataKey="resolved" stroke="#16a34a" />
                <Line type="monotone" dataKey="rejected" stroke="#dc2626" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">Cases by Location</h3>
          <div className="space-y-4">
            {locationData.map((location) => (
              <div key={location.name} className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span>{location.name}</span>
                  <span className="font-medium">{location.value}%</span>
                </div>
                <div className="h-2 bg-gray-200 rounded-full">
                  <div
                    className="h-2 bg-blue-600 rounded-full"
                    style={{ width: `${location.value}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );

  const AdminSection = () => (
    <div className="space-y-6">
      <Tabs value={adminTab} onValueChange={setAdminTab}>
        <TabsList>
          <TabsTrigger value="users" className="flex items-center">
            <Users className="w-4 h-4 mr-2" />
            Users
          </TabsTrigger>
          <TabsTrigger value="roles" className="flex items-center">
            <Key className="w-4 h-4 mr-2" />
            Roles
          </TabsTrigger>
        </TabsList>

        <TabsContent value="users" className="space-y-4">
          <div className="flex justify-between items-center">
            <h2 className="text-xl font-semibold">User Management</h2>
            <Button className="flex items-center">
              <UserPlus className="w-4 h-4 mr-2" />
              Add User
            </Button>
          </div>

          <div className="bg-white rounded-lg shadow">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Department</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Last Active</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {users.map((user) => (
                  <tr key={user.id}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.name}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.role}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.department}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.lastActive}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <Button variant="ghost" size="sm">Edit</Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </TabsContent>

        <TabsContent value="roles" className="space-y-4">
          <div className="flex justify-between items-center">
            <h2 className="text-xl font-semibold">Role Management</h2>
            <Button>Add Role</Button>
          </div>

          <div className="grid gap-4">
            <div className="bg-white p-4 rounded-lg shadow">
              <h3 className="font-medium mb-2">Admin</h3>
              <p className="text-sm text-gray-500">Full system access with user management capabilities</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow">
              <h3 className="font-medium mb-2">Supervisor</h3>
              <p className="text-sm text-gray-500">Case management and reporting capabilities</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow">
              <h3 className="font-medium mb-2">Officer</h3>
              <p className="text-sm text-gray-500">Basic case viewing and processing capabilities</p>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );

  // Video Preview Dialog
  const VideoPreviewDialog = () => (
    <Dialog open={isVideoPreviewOpen} onOpenChange={setIsVideoPreviewOpen}>
      <DialogContent className="max-w-4xl">
        <DialogHeader>
          <DialogTitle>Video Preview</DialogTitle>
        </DialogHeader>
        
        <div className="space-y-4">
          <div className="aspect-video bg-gray-900 rounded-lg relative">
            <img src="/api/placeholder/800/450" alt="Video Preview" className="w-full h-full object-cover rounded-lg" />
            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center space-x-4 bg-black/50 rounded-full px-4 py-2">
              <button
                onClick={togglePlayPause}
                className="text-white hover:text-blue-400 transition-colors"
              >
                {isPlaying ? <Pause className="w-6 h-6" /> : <Play className="w-6 h-6" />}
              </button>
              <div className="w-64 h-1 bg-gray-600 rounded-full">
                <div
                  className="h-full bg-blue-500 rounded-full"
                  style={{ width: `${(currentTime / 100) * 100}%` }}
                />
              </div>
              <span className="text-white text-sm">00:00 / 02:30</span>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>Start Time</Label>
              <Input type="time" />
            </div>
            <div>
              <Label>End Time</Label>
              <Input type="time" />
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => setIsVideoPreviewOpen(false)}>Cancel</Button>
          <Button onClick={() => setIsVideoPreviewOpen(false)}>Confirm Selection</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-blue-900 text-white shadow-lg">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center">
              <img src="/api/placeholder/40/40" alt="ICA Logo" className="h-10 w-10 mr-3" />
              <span className="text-xl font-bold">ICA Video Platform</span>
            </div>

            <nav className="hidden md:flex items-center space-x-4">
              <button
                onClick={() => setActiveSection('cases')}
                className={`flex items-center px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-800 transition-colors
                  ${activeSection === 'cases' ? 'bg-blue-800' : ''}`}
              >
                <FileText className="w-5 h-5 mr-2" />
                Cases
              </button>
              <button
                onClick={() => setActiveSection('analytics')}
                className={`flex items-center px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-800 transition-colors
                  ${activeSection === 'analytics' ? 'bg-blue-800' : ''}`}
              >
                <PieChart className="w-5 h-5 mr-2" />
                Analytics
              </button>
              <button
                onClick={() => setActiveSection('admin')}
                className={`flex items-center px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-800 transition-colors
                  ${activeSection === 'admin' ? 'bg-blue-800' : ''}`}
              >
                <Settings className="w-5 h-5 mr-2" />
                Admin
              </button>
              <button
                onClick={handleLogout}
                className="flex items-center px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-800"
              >
                <LogOut className="w-5 h-5 mr-2" />
                Logout
              </button>
            </nav>

            <button 
              className="md:hidden p-2 rounded-md hover:bg-blue-800"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>

          {isMenuOpen && (
            <div className="md:hidden py-3">
              <button
                onClick={() => {
                  setActiveSection('cases');
                  setIsMenu