"use client";

import React from 'react';
import { RefreshCw, Smartphone, RotateCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Slider } from '@/components/ui/slider';
import { useAppStore } from '@/store/app-store';

export function CrossPlatformPreview() {
  const { syncStates } = useAppStore();
  const [latency, setLatency] = React.useState([0]);

  return (
    <div className="h-full bg-background overflow-hidden relative">
      {/* Grid Layout */}
      <div className="grid grid-cols-2 gap-4 p-4 h-full">
        {/* Roblox Viewport */}
        <div className="bg-surface rounded-lg border border-gray-800 p-4 flex flex-col">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <span className="text-2xl">🎮</span>
              <span className="font-semibold text-white">Roblox</span>
            </div>
            <div className="text-xs text-green-400">3 players online</div>
          </div>
          <div className="flex-1 bg-gray-900 rounded-lg flex items-center justify-center relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/20" />
            <div className="relative text-center">
              <div className="text-6xl mb-2">🎮</div>
              <div className="text-sm text-gray-400">Roblox Game View</div>
            </div>
          </div>
          <Button variant="outline" className="mt-3 w-full border-gray-700">
            Open in Roblox Studio
          </Button>
        </div>

        {/* Web Browser Viewport */}
        <div className="bg-surface rounded-lg border border-gray-800 p-4 flex flex-col">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <span className="text-2xl">🌐</span>
              <span className="font-semibold text-white">Web</span>
            </div>
            <div className="text-xs text-gray-400">1920x1080</div>
          </div>
          <div className="bg-gray-800 rounded px-3 py-1.5 mb-2 text-xs text-gray-400 font-mono">
            https://game.aethex.com
          </div>
          <div className="flex-1 bg-gray-900 rounded-lg flex items-center justify-center relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-cyan-900/20 to-blue-900/20" />
            <div className="relative text-center">
              <div className="text-6xl mb-2">🌐</div>
              <div className="text-sm text-gray-400">Web Browser View</div>
            </div>
          </div>
        </div>

        {/* Mobile Device Mockup */}
        <div className="bg-surface rounded-lg border border-gray-800 p-4 flex flex-col">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <span className="text-2xl">📱</span>
              <span className="font-semibold text-white">Mobile</span>
            </div>
            <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
              <RotateCw className="w-3 h-3" />
              Rotate
            </Button>
          </div>
          <div className="flex-1 flex items-center justify-center">
            <div className="relative">
              <div className="w-[200px] h-[400px] bg-gray-900 rounded-[2rem] border-8 border-gray-700 overflow-hidden shadow-2xl">
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-20 h-6 bg-gray-700 rounded-b-2xl" />
                <div className="w-full h-full bg-gradient-to-br from-green-900/20 to-emerald-900/20 flex items-center justify-center">
                  <div className="text-center">
                    <div className="text-4xl mb-2">📱</div>
                    <div className="text-xs text-gray-400">Mobile View</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Desktop Window */}
        <div className="bg-surface rounded-lg border border-gray-800 p-4 flex flex-col">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <span className="text-2xl">🖥️</span>
              <span className="font-semibold text-white">Desktop</span>
            </div>
            <div className="text-xs text-gray-400">Windows</div>
          </div>
          <div className="flex-1 bg-gray-900 rounded-lg overflow-hidden">
            <div className="bg-gray-800 px-3 py-1.5 flex items-center gap-2 border-b border-gray-700">
              <div className="flex gap-1.5">
                <div className="w-3 h-3 rounded-full bg-red-500" />
                <div className="w-3 h-3 rounded-full bg-yellow-500" />
                <div className="w-3 h-3 rounded-full bg-green-500" />
              </div>
              <div className="text-xs text-gray-400">AeThex Game</div>
            </div>
            <div className="h-full bg-gradient-to-br from-purple-900/20 to-pink-900/20 flex items-center justify-center">
              <div className="text-center">
                <div className="text-6xl mb-2">🖥️</div>
                <div className="text-sm text-gray-400">Desktop View</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Floating Sync Status Panel */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-4xl">
        <div className="bg-surface/95 backdrop-blur-xl rounded-xl border border-gray-700 shadow-2xl p-6">
          <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <span className="text-primary">⚡</span>
            Real-Time Sync Status
          </h3>
          
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-700">
                  <th className="text-left py-2 px-3 text-gray-400 font-medium">Variable</th>
                  <th className="text-center py-2 px-3 text-gray-400 font-medium">Roblox</th>
                  <th className="text-center py-2 px-3 text-gray-400 font-medium">Web</th>
                  <th className="text-center py-2 px-3 text-gray-400 font-medium">Mobile</th>
                  <th className="text-center py-2 px-3 text-gray-400 font-medium">Desktop</th>
                  <th className="text-center py-2 px-3 text-gray-400 font-medium">Status</th>
                </tr>
              </thead>
              <tbody>
                {syncStates.map((state: any, i: number) => (
                  <tr key={i} className="border-b border-gray-800 hover:bg-background/50">
                    <td className="py-2 px-3 font-mono text-white">{state.variable}</td>
                    <td className="py-2 px-3 text-center font-mono text-gray-300">{state.roblox}</td>
                    <td className="py-2 px-3 text-center font-mono text-gray-300">{state.web}</td>
                    <td className="py-2 px-3 text-center font-mono text-gray-300">{state.mobile}</td>
                    <td className="py-2 px-3 text-center font-mono text-gray-300">{state.desktop}</td>
                    <td className="py-2 px-3 text-center">
                      <span className={`text-xs font-medium ${
                        state.status === 'synced' ? 'text-green-400' :
                        state.status === 'syncing' ? 'text-yellow-400' :
                        'text-red-400'
                      }`}>
                        {state.status === 'synced' && '✓ Synced'}
                        {state.status === 'syncing' && '⚠ Syncing'}
                        {state.status === 'conflict' && '✗ Conflict'}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="mt-6 space-y-4">
            <div className="flex gap-3">
              <Button variant="outline" className="flex-1 border-gray-700">
                <RefreshCw className="w-4 h-4 mr-2" />
                Refresh All Platforms
              </Button>
              <Button variant="outline" className="flex-1 border-gray-700">
                Force Sync All
              </Button>
              <Button variant="outline" className="flex-1 border-gray-700">
                Simulate Disconnect
              </Button>
            </div>

            <div className="flex items-center gap-4">
              <span className="text-sm text-gray-400 shrink-0">Latency Simulator:</span>
              <Slider
                value={latency}
                onValueChange={setLatency}
                max={500}
                step={10}
                className="flex-1"
              />
              <span className="text-sm text-white font-mono w-16">{latency[0]}ms</span>
            </div>
          </div>

          <div className="mt-4 flex items-center justify-between text-xs text-gray-400">
            <div className="flex gap-4">
              <span>Total syncs: 1,247</span>
              <span>Conflicts: 3</span>
            </div>
            <div className="flex gap-4">
              <span>Avg latency: 18ms</span>
              <span>Bandwidth: 2.3 KB/s</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}