import { useState } from 'react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { X, ArrowsClockwise } from '@phosphor-icons/react';

interface PreviewModalProps {
  open: boolean;
  onClose: () => void;
  code: string;
}

interface SharedState {
  variable: string;
  roblox: string;
  web: string;
  mobile: string;
  status: 'synced' | 'syncing' | 'conflict';
}

export function PreviewModal({ open, onClose, code }: PreviewModalProps) {
  const [sharedState] = useState<SharedState[]>([
    { variable: 'playerX', roblox: '120', web: '120', mobile: '120', status: 'synced' },
    { variable: 'playerY', roblox: '50', web: '50', mobile: '50', status: 'synced' },
    { variable: 'health', roblox: '100', web: '98', mobile: '100', status: 'syncing' },
    { variable: 'score', roblox: '450', web: '450', mobile: '450', status: 'synced' },
  ]);

  const getStatusColor = (status: SharedState['status']) => {
    switch (status) {
      case 'synced':
        return 'text-green-500';
      case 'syncing':
        return 'text-yellow-500';
      case 'conflict':
        return 'text-red-500';
    }
  };

  const getStatusIcon = (status: SharedState['status']) => {
    switch (status) {
      case 'synced':
        return '✓';
      case 'syncing':
        return '⚠';
      case 'conflict':
        return '✗';
    }
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-[95vw] h-[90vh] p-0 gap-0">
        <div className="flex flex-col h-full">
          <div className="flex items-center justify-between p-4 border-b border-border">
            <h2 className="text-xl font-bold">Preview - All Platforms</h2>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm">
                <ArrowsClockwise className="mr-2" />
                Refresh All
              </Button>
              <Button variant="ghost" size="icon" onClick={onClose}>
                <X />
              </Button>
            </div>
          </div>

          <Tabs defaultValue="all" className="flex-1 flex flex-col">
            <TabsList className="mx-4 mt-4 w-fit">
              <TabsTrigger value="all">All Platforms</TabsTrigger>
              <TabsTrigger value="roblox">Roblox</TabsTrigger>
              <TabsTrigger value="web">Web</TabsTrigger>
              <TabsTrigger value="mobile">Mobile</TabsTrigger>
            </TabsList>

            <TabsContent value="all" className="flex-1 flex flex-col p-4 gap-4 m-0">
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 flex-1">
                <Card className="p-4 flex flex-col">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-semibold">Roblox</h3>
                    <Button size="sm" variant="outline">Deploy</Button>
                  </div>
                  <div className="flex-1 bg-muted/30 rounded flex items-center justify-center border-2 border-dashed border-border">
                    <div className="text-center p-8">
                      <div className="text-6xl mb-4">🎮</div>
                      <p className="text-sm text-muted-foreground">Roblox Viewport</p>
                      <p className="text-xs text-muted-foreground mt-1">Studio integration</p>
                    </div>
                  </div>
                </Card>

                <Card className="p-4 flex flex-col">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-semibold">Web Browser</h3>
                    <Button size="sm" variant="outline">Deploy</Button>
                  </div>
                  <div className="flex-1 bg-muted/30 rounded flex items-center justify-center border-2 border-dashed border-border">
                    <div className="text-center p-8">
                      <div className="text-6xl mb-4">🌐</div>
                      <p className="text-sm text-muted-foreground">Web Canvas</p>
                      <p className="text-xs text-muted-foreground mt-1">Browser preview</p>
                    </div>
                  </div>
                </Card>

                <Card className="p-4 flex flex-col">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-semibold">Mobile</h3>
                    <Button size="sm" variant="outline">Deploy</Button>
                  </div>
                  <div className="flex-1 bg-muted/30 rounded flex items-center justify-center border-2 border-dashed border-border">
                    <div className="w-[200px] h-full bg-background rounded-3xl border-4 border-foreground/20 p-2 flex flex-col">
                      <div className="w-1/3 h-6 bg-foreground/10 rounded-full mx-auto mb-2" />
                      <div className="flex-1 bg-muted/30 rounded-2xl flex items-center justify-center">
                        <div className="text-center">
                          <div className="text-4xl mb-2">📱</div>
                          <p className="text-xs text-muted-foreground">Mobile View</p>
                        </div>
                      </div>
                      <div className="h-6 w-1/2 bg-foreground/10 rounded-full mx-auto mt-2" />
                    </div>
                  </div>
                </Card>
              </div>

              <Card className="p-4">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="font-semibold">Shared State Sync</h3>
                  <Badge variant="outline" className="text-green-500 border-green-500">
                    Live Sync Enabled
                  </Badge>
                </div>
                <div className="overflow-x-auto">
                  <table className="w-full text-sm">
                    <thead className="border-b border-border">
                      <tr className="text-left">
                        <th className="pb-2 font-semibold">Variable</th>
                        <th className="pb-2 font-semibold">Roblox</th>
                        <th className="pb-2 font-semibold">Web</th>
                        <th className="pb-2 font-semibold">Mobile</th>
                        <th className="pb-2 font-semibold">Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      {sharedState.map((state, idx) => (
                        <tr key={idx} className="border-b border-border/50">
                          <td className="py-2 font-mono text-accent">{state.variable}</td>
                          <td className="py-2 font-mono">{state.roblox}</td>
                          <td className="py-2 font-mono">{state.web}</td>
                          <td className="py-2 font-mono">{state.mobile}</td>
                          <td className="py-2">
                            <span className={getStatusColor(state.status)}>
                              {getStatusIcon(state.status)} {state.status}
                            </span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            </TabsContent>

            <TabsContent value="roblox" className="flex-1 p-4 m-0">
              <Card className="h-full p-8 flex items-center justify-center">
                <div className="text-center">
                  <div className="text-8xl mb-4">🎮</div>
                  <h3 className="text-2xl font-bold mb-2">Roblox Preview</h3>
                  <p className="text-muted-foreground mb-4">Full-screen Roblox viewport</p>
                  <Button>Deploy to Roblox</Button>
                </div>
              </Card>
            </TabsContent>

            <TabsContent value="web" className="flex-1 p-4 m-0">
              <Card className="h-full p-8 flex items-center justify-center">
                <div className="text-center">
                  <div className="text-8xl mb-4">🌐</div>
                  <h3 className="text-2xl font-bold mb-2">Web Preview</h3>
                  <p className="text-muted-foreground mb-4">Browser-based game preview</p>
                  <Button>Deploy to Web</Button>
                </div>
              </Card>
            </TabsContent>

            <TabsContent value="mobile" className="flex-1 p-4 m-0 flex items-center justify-center">
              <div className="w-[300px] h-[600px] bg-background rounded-3xl border-8 border-foreground/20 p-4 flex flex-col shadow-2xl">
                <div className="w-1/2 h-8 bg-foreground/10 rounded-full mx-auto mb-4" />
                <Card className="flex-1 flex items-center justify-center">
                  <div className="text-center">
                    <div className="text-6xl mb-4">📱</div>
                    <h3 className="text-xl font-bold mb-2">Mobile Preview</h3>
                    <p className="text-sm text-muted-foreground mb-4">iOS/Android view</p>
                    <Button size="sm">Deploy to Mobile</Button>
                  </div>
                </Card>
                <div className="h-8 w-1/2 bg-foreground/10 rounded-full mx-auto mt-4" />
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </DialogContent>
    </Dialog>
  );
}