"use client";

import React, { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ChevronDown, ChevronRight, Bug, Eye, EyeOff } from "lucide-react";

interface DebugPanelProps {
  debugRequest?: Record<string, unknown> | null;
  debugResponse?: Record<string, unknown> | null;
  runId: string;
  status: string;
}

export function DebugPanel({ debugRequest, debugResponse, runId, status }: DebugPanelProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [showResponse, setShowResponse] = useState(false);
  
  // Only show in development environment
  if (process.env.NODE_ENV !== 'development') {
    return null;
  }

  // Only show if we have debug data
  if (!debugRequest && !debugResponse) {
    return null;
  }

  const formatJson = (obj: unknown) => {
    return JSON.stringify(obj, null, 2);
  };

  return (
    <Card className="border-yellow-200 bg-yellow-50 dark:bg-yellow-950/20 dark:border-yellow-800">
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
          <Bug className="w-4 h-4" />
          Debug Panel
          <Badge variant="outline" className="text-xs">
            DEV
          </Badge>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setIsExpanded(!isExpanded)}
            className="ml-auto"
          >
            {isExpanded ? (
              <ChevronDown className="w-4 h-4" />
            ) : (
              <ChevronRight className="w-4 h-4" />
            )}
          </Button>
        </CardTitle>
      </CardHeader>
      
      {isExpanded && (
        <CardContent className="space-y-4">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <span>Run ID: {runId}</span>
            <Badge variant="secondary">{status}</Badge>
          </div>

          {debugRequest && (
            <div className="space-y-2">
              <h4 className="font-semibold text-sm flex items-center gap-2">
                📤 Request Details
              </h4>
              <div className="bg-gray-100 dark:bg-gray-800 rounded-md p-3 text-xs font-mono overflow-auto max-h-64">
                <div className="space-y-2">
                  <div>
                    <span className="text-blue-600 dark:text-blue-400 font-semibold">URL:</span>
                    <br />
                    <span className="text-green-600 dark:text-green-400">{String(debugRequest.url || '')}</span>
                  </div>
                  <div>
                    <span className="text-blue-600 dark:text-blue-400 font-semibold">Method:</span>
                    <br />
                    <span className="text-orange-600 dark:text-orange-400">{String(debugRequest.method || '')}</span>
                  </div>
                  <div>
                    <span className="text-blue-600 dark:text-blue-400 font-semibold">Headers:</span>
                    <pre className="text-purple-600 dark:text-purple-400 mt-1">
                      {formatJson(debugRequest.headers)}
                    </pre>
                  </div>
                  <div>
                    <span className="text-blue-600 dark:text-blue-400 font-semibold">Body:</span>
                    <pre className="text-gray-700 dark:text-gray-300 mt-1">
                      {formatJson(debugRequest.body)}
                    </pre>
                  </div>
                </div>
              </div>
            </div>
          )}

          {debugResponse && (
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <h4 className="font-semibold text-sm flex items-center gap-2">
                  📥 Response Details
                </h4>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setShowResponse(!showResponse)}
                  className="text-xs"
                >
                  {showResponse ? (
                    <>
                      <EyeOff className="w-3 h-3 mr-1" />
                      Hide
                    </>
                  ) : (
                    <>
                      <Eye className="w-3 h-3 mr-1" />
                      Show
                    </>
                  )}
                </Button>
              </div>
              
              {showResponse && (
                <div className="bg-gray-100 dark:bg-gray-800 rounded-md p-3 text-xs font-mono overflow-auto max-h-64">
                  <div className="space-y-2">
                    <div>
                      <span className="text-blue-600 dark:text-blue-400 font-semibold">Status:</span>
                      <br />
                      <span className="text-green-600 dark:text-green-400">{String(debugResponse.status || '')}</span>
                    </div>
                    <div>
                      <span className="text-blue-600 dark:text-blue-400 font-semibold">Headers:</span>
                      <pre className="text-purple-600 dark:text-purple-400 mt-1">
                        {formatJson(debugResponse.headers)}
                      </pre>
                    </div>
                    <div>
                      <span className="text-blue-600 dark:text-blue-400 font-semibold">Body:</span>
                      <pre className="text-gray-700 dark:text-gray-300 mt-1 break-words">
                        {formatJson(debugResponse.body)}
                      </pre>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          <div className="text-xs text-muted-foreground italic">
            Debug information is only collected and displayed in development environment.
          </div>
        </CardContent>
      )}
    </Card>
  );
}