'use client';

import { useState } from 'react';

interface InspectDataSection {
  title: string;
  data: object;
  defaultOpen?: boolean;
}

interface InspectModeProps {
  leftData: {
    request: object;
    response: object;
    geminiParams: object;
  };
  rightData: {
    request: object;
    response: object;
    geminiParams: object;
  };
  onCopy: (text: string) => void;
}

export function InspectMode({ leftData, rightData, onCopy }: InspectModeProps) {
  return (
    <div className="grid md:grid-cols-2 gap-4">
      {/* Left Column */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold text-gray-400 px-2">Original Prompt Data</h3>
        <CollapsibleSection
          title="API Request"
          data={leftData.request}
          onCopy={onCopy}
          defaultOpen={true}
        />
        <CollapsibleSection title="API Response" data={leftData.response} onCopy={onCopy} />
        <CollapsibleSection
          title="Gemini Parameters"
          data={leftData.geminiParams}
          onCopy={onCopy}
        />
      </div>

      {/* Right Column */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold text-gray-400 px-2">Enhanced Prompt Data</h3>
        <CollapsibleSection
          title="API Request"
          data={rightData.request}
          onCopy={onCopy}
          defaultOpen={true}
        />
        <CollapsibleSection title="API Response" data={rightData.response} onCopy={onCopy} />
        <CollapsibleSection
          title="Gemini Parameters"
          data={rightData.geminiParams}
          onCopy={onCopy}
        />
      </div>
    </div>
  );
}

function CollapsibleSection({
  title,
  data,
  onCopy,
  defaultOpen = false,
}: InspectDataSection & { onCopy: (text: string) => void }) {
  const [isOpen, setIsOpen] = useState(defaultOpen);
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    onCopy(JSON.stringify(data, null, 2));
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <div className="bg-slate-950/50 border border-slate-700 rounded-lg overflow-hidden">
      {/* Header */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full px-4 py-2.5 flex items-center justify-between bg-slate-900/50 hover:bg-slate-900/70 transition-colors group"
        aria-expanded={isOpen}
        aria-label={`${isOpen ? 'Collapse' : 'Expand'} ${title}`}
      >
        <span className="text-sm font-medium text-white">{title}</span>
        <div className="flex items-center gap-2">
          <button
            onClick={(e) => {
              e.stopPropagation();
              handleCopy();
            }}
            className="px-2 py-1 text-xs bg-amber-600/20 hover:bg-amber-600/30 text-amber-400 rounded transition-colors"
            aria-label={`Copy ${title} JSON`}
          >
            {copied ? 'Copied!' : 'Copy'}
          </button>
          <svg
            className={`w-4 h-4 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </div>
      </button>

      {/* Content */}
      {isOpen && (
        <div className="p-3 max-h-96 overflow-auto">
          <pre className="text-xs text-gray-300 whitespace-pre-wrap break-words">
            <code>{syntaxHighlightJSON(data)}</code>
          </pre>
        </div>
      )}
    </div>
  );
}

// Simple JSON syntax highlighting using spans
function syntaxHighlightJSON(obj: object): React.ReactNode {
  const json = JSON.stringify(obj, null, 2);

  return (
    <span
      dangerouslySetInnerHTML={{
        __html: json
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/"([^"]+)":/g, '<span class="text-blue-400">"$1"</span>:')
          .replace(/: "([^"]*)"/g, ': <span class="text-green-400">"$1"</span>')
          .replace(/: (\d+)/g, ': <span class="text-amber-400">$1</span>')
          .replace(/: (true|false|null)/g, ': <span class="text-purple-400">$1</span>'),
      }}
    />
  );
}
