'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  ArrowLeft,
  Clock,
  Download,
  StopCircle,
  Plus,
  Calendar,
  User,
  Smartphone,
  Activity,
  Network,
  Camera,
  FileText,
} from 'lucide-react';
import {
  createDiagnosticsClient,
  type DebugSession,
  type TraceSpan,
  type LogEntry,
} from '@/lib/diagnostics-client';

const statusColors: Record<string, string> = {
  pending: 'bg-yellow-500',
  active: 'bg-green-500',
  paused: 'bg-orange-500',
  completed: 'bg-blue-500',
  cancelled: 'bg-red-500',
};

const levelColors: Record<string, string> = {
  debug: 'text-gray-500',
  info: 'text-blue-500',
  warn: 'text-yellow-500',
  error: 'text-red-500',
  fatal: 'text-red-700 font-bold',
};

export default function SessionDetailPage() {
  const params = useParams();
  const router = useRouter();
  const sessionId = params.id as string;

  const [session, setSession] = useState<DebugSession | null>(null);
  const [traces, setTraces] = useState<TraceSpan[]>([]);
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('timeline');
  const [logLevelFilter, setLogLevelFilter] = useState<string>('all');

  const getAuthToken = () => {
    if (typeof window === 'undefined') return null;
    return localStorage.getItem('admin_access_token');
  };

  const client = useMemo(
    () =>
      createDiagnosticsClient({
        baseUrl: process.env.NEXT_PUBLIC_PLATFORM_SERVICE_URL || 'http://localhost:4003',
        productId: 'lysnrai',
        getAuthToken,
      }),
    []
  );

  const fetchSession = useCallback(async () => {
    try {
      const data = await client.getSession(sessionId);
      setSession(data);
    } catch (error) {
      console.error('Failed to fetch session:', error);
    }
  }, [client, sessionId]);

  const fetchTraces = useCallback(async () => {
    try {
      const result = await client.getTraces({
        sessionId,
        productId: 'lysnrai',
        limit: 100,
      });
      setTraces(result.traces);
    } catch (error) {
      console.error('Failed to fetch traces:', error);
    }
  }, [client, sessionId]);

  const fetchLogs = useCallback(async () => {
    try {
      const result = await client.getLogs({
        sessionId,
        productId: 'lysnrai',
        levels:
          logLevelFilter === 'all'
            ? undefined
            : [logLevelFilter as 'debug' | 'info' | 'warn' | 'error' | 'fatal'],
        limit: 100,
      });
      setLogs(result.logs);
    } catch (error) {
      console.error('Failed to fetch logs:', error);
    }
  }, [client, logLevelFilter, sessionId]);

  useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      await fetchSession();
      await Promise.all([fetchTraces(), fetchLogs()]);
      setLoading(false);
    };
    void loadData();
  }, [activeTab, fetchLogs, fetchSession, fetchTraces]);

  const handleExtend = async () => {
    if (!session) return;
    try {
      await client.updateSession(sessionId, {
        maxDurationMinutes: session.maxDurationMinutes + 30,
      });
      void fetchSession();
    } catch (error) {
      console.error('Failed to extend session:', error);
    }
  };

  const handleStop = async () => {
    try {
      await client.cancelSession(sessionId, 'Stopped by admin');
      void fetchSession();
    } catch (error) {
      console.error('Failed to stop session:', error);
    }
  };

  const handleDownload = () => {
    if (!session) return;
    const blob = new Blob([JSON.stringify(session, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `debug-session-${sessionId}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-muted-foreground">Loading session...</div>
      </div>
    );
  }

  if (!session) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-muted-foreground">Session not found</div>
      </div>
    );
  }

  const formatDuration = (minutes: number) => {
    if (minutes < 60) return `${minutes}m`;
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
  };

  // Mock breadcrumbs for timeline (would come from API in real implementation)
  const breadcrumbs = [
    { timestamp: session.createdAt, category: 'session', message: 'Session created' },
    ...(session.startedAt
      ? [{ timestamp: session.startedAt, category: 'session', message: 'Session activated' }]
      : []),
  ];

  // Mock network requests for demo
  const networkRequests = [
    {
      id: '1',
      method: 'GET',
      url: '/api/user/profile',
      status: 200,
      durationMs: 145,
      timestamp: new Date().toISOString(),
    },
    {
      id: '2',
      method: 'POST',
      url: '/api/diagnostics/ingest',
      status: 200,
      durationMs: 89,
      timestamp: new Date().toISOString(),
    },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div className="space-y-1">
          <Button
            variant="ghost"
            size="sm"
            className="mb-2 -ml-2"
            onClick={() => router.push('/debug-sessions')}
          >
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Sessions
          </Button>
          <div className="flex items-center gap-3">
            <h1 className="text-3xl font-bold tracking-tight font-mono">{session.id}</h1>
            <Badge className={`${statusColors[session.status]} text-white`}>{session.status}</Badge>
          </div>
          <p className="text-muted-foreground">
            Created {new Date(session.createdAt).toLocaleString()}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {session.status === 'active' && (
            <>
              <Button variant="outline" onClick={handleExtend}>
                <Plus className="mr-2 h-4 w-4" />
                Extend (+30m)
              </Button>
              <Button variant="destructive" onClick={handleStop}>
                <StopCircle className="mr-2 h-4 w-4" />
                Stop
              </Button>
            </>
          )}
          <Button variant="outline" onClick={handleDownload}>
            <Download className="mr-2 h-4 w-4" />
            Download
          </Button>
        </div>
      </div>

      {/* Session Info Cards */}
      <div className="grid grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
              <User className="h-4 w-4" />
              Target User
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-sm font-medium">{session.targetUserId || 'Anonymous'}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
              <Smartphone className="h-4 w-4" />
              Device
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-sm font-medium">{session.targetDeviceId || 'Unknown'}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
              <Clock className="h-4 w-4" />
              Duration
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-sm font-medium">{formatDuration(session.maxDurationMinutes)}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
              <Activity className="h-4 w-4" />
              Collection
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-sm font-medium capitalize">{session.collectionLevel}</div>
            <div className="text-xs text-muted-foreground mt-1">
              {session.captureLogs && 'Logs '}
              {session.captureNetwork && 'Network '}
              {session.captureScreenshots && 'Screenshots'}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="timeline" className="flex items-center gap-2">
            <Calendar className="h-4 w-4" />
            Timeline
          </TabsTrigger>
          <TabsTrigger value="logs" className="flex items-center gap-2">
            <FileText className="h-4 w-4" />
            Logs
          </TabsTrigger>
          <TabsTrigger value="network" className="flex items-center gap-2">
            <Network className="h-4 w-4" />
            Network
          </TabsTrigger>
          <TabsTrigger value="traces" className="flex items-center gap-2">
            <Activity className="h-4 w-4" />
            Traces
          </TabsTrigger>
          <TabsTrigger value="screenshots" className="flex items-center gap-2">
            <Camera className="h-4 w-4" />
            Screenshots
          </TabsTrigger>
        </TabsList>

        {/* Timeline Tab */}
        <TabsContent value="timeline" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Session Timeline</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {breadcrumbs.map((crumb, index) => (
                  <div key={index} className="flex items-start gap-4">
                    <div className="flex flex-col items-center">
                      <div className="w-3 h-3 rounded-full bg-primary" />
                      {index < breadcrumbs.length - 1 && (
                        <div className="w-0.5 h-8 bg-border mt-1" />
                      )}
                    </div>
                    <div className="flex-1 pb-4">
                      <div className="text-sm font-medium">{crumb.message}</div>
                      <div className="text-xs text-muted-foreground">
                        {new Date(crumb.timestamp).toLocaleString()}
                      </div>
                      <Badge variant="outline" className="mt-1 text-xs">
                        {crumb.category}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Logs Tab */}
        <TabsContent value="logs" className="space-y-4">
          <Card>
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle>Log Entries ({logs.length})</CardTitle>
                <Select value={logLevelFilter} onValueChange={setLogLevelFilter}>
                  <SelectTrigger className="w-[130px]">
                    <SelectValue placeholder="Level" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Levels</SelectItem>
                    <SelectItem value="debug">Debug</SelectItem>
                    <SelectItem value="info">Info</SelectItem>
                    <SelectItem value="warn">Warn</SelectItem>
                    <SelectItem value="error">Error</SelectItem>
                    <SelectItem value="fatal">Fatal</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] overflow-auto">
                <div className="space-y-2">
                  {logs.length === 0 ? (
                    <div className="text-center text-muted-foreground py-8">No logs yet</div>
                  ) : (
                    logs.map(log => (
                      <div
                        key={log.id}
                        className="p-3 rounded-lg border hover:bg-muted/50 transition-colors"
                      >
                        <div className="flex items-start justify-between">
                          <div className="flex items-center gap-2">
                            <span
                              className={`text-xs font-mono uppercase ${levelColors[log.level]}`}
                            >
                              {log.level}
                            </span>
                            <span className="text-xs text-muted-foreground">{log.module}</span>
                          </div>
                          <span className="text-xs text-muted-foreground">
                            {new Date(log.timestamp).toLocaleTimeString()}
                          </span>
                        </div>
                        <p className="text-sm mt-1">{log.message}</p>
                        {log.file && (
                          <p className="text-xs text-muted-foreground mt-1">
                            {log.file}:{log.line}
                          </p>
                        )}
                      </div>
                    ))
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Network Tab */}
        <TabsContent value="network" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Network Requests ({networkRequests.length})</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Method</TableHead>
                    <TableHead>URL</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Duration</TableHead>
                    <TableHead>Time</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {networkRequests.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={5} className="text-center text-muted-foreground py-8">
                        No network requests yet
                      </TableCell>
                    </TableRow>
                  ) : (
                    networkRequests.map(req => (
                      <TableRow key={req.id}>
                        <TableCell>
                          <Badge
                            variant={req.method === 'GET' ? 'secondary' : 'default'}
                            className="text-xs"
                          >
                            {req.method}
                          </Badge>
                        </TableCell>
                        <TableCell className="font-mono text-xs max-w-[300px] truncate">
                          {req.url}
                        </TableCell>
                        <TableCell>
                          <Badge
                            variant={req.status < 400 ? 'secondary' : 'destructive'}
                            className="text-xs"
                          >
                            {req.status}
                          </Badge>
                        </TableCell>
                        <TableCell>{req.durationMs}ms</TableCell>
                        <TableCell className="text-xs text-muted-foreground">
                          {new Date(req.timestamp).toLocaleTimeString()}
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Traces Tab */}
        <TabsContent value="traces" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Trace Spans ({traces.length})</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] overflow-auto">
                <div className="space-y-2">
                  {traces.length === 0 ? (
                    <div className="text-center text-muted-foreground py-8">No traces yet</div>
                  ) : (
                    traces.map(trace => (
                      <div
                        key={trace.id}
                        className="p-3 rounded-lg border hover:bg-muted/50 transition-colors"
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-medium">{trace.name}</span>
                            <Badge
                              variant={trace.status === 'ok' ? 'secondary' : 'destructive'}
                              className="text-xs"
                            >
                              {trace.status}
                            </Badge>
                          </div>
                          <span className="text-xs text-muted-foreground">
                            {trace.durationMs?.toFixed(2)}ms
                          </span>
                        </div>
                        <div className="text-xs text-muted-foreground mt-1">
                          {new Date(trace.startTime).toLocaleTimeString()}
                        </div>
                        {trace.statusMessage && (
                          <p className="text-xs text-red-500 mt-1">{trace.statusMessage}</p>
                        )}
                      </div>
                    ))
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Screenshots Tab */}
        <TabsContent value="screenshots" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Screenshots ({session.screenshotCount})</CardTitle>
            </CardHeader>
            <CardContent>
              {session.screenshotCount === 0 ? (
                <div className="text-center text-muted-foreground py-16">
                  <Camera className="h-12 w-12 mx-auto mb-4 opacity-50" />
                  <p>No screenshots captured yet</p>
                  <p className="text-sm mt-1">
                    Screenshots are captured automatically when errors occur (if enabled)
                  </p>
                </div>
              ) : (
                <div className="grid grid-cols-3 gap-4">
                  {/* Screenshot thumbnails would go here */}
                  <div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
                    <span className="text-muted-foreground text-sm">Screenshot placeholder</span>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}
