import { Loader2 } from 'lucide-react';

interface RightPanelProps {
  input: string;
  onInputChange: (value: string) => void;
  output: string;
  error: string;
  loading: boolean;
  executionTime: number | null;
  status: string;
}

export default function RightPanel({
  input,
  onInputChange,
  output,
  error,
  loading,
  executionTime,
  status,
}: RightPanelProps) {
  const dotClass =
    status === 'error' || status === 'compile_error'
      ? 'ryp-statusbar__dot--error'
      : status === 'running'
        ? 'ryp-statusbar__dot--running'
        : '';

  return (
    <div className="flex flex-col h-full" style={{ background: '#1a1a2e' }}>
      {/* Custom Input */}
      <div className="flex flex-col" style={{ flex: '0 0 auto' }}>
        <div className="ryp-section-header">
          <span className="ryp-section-header__icon">▶_</span>
          <span>Custom Input</span>
        </div>
        <div className="p-3">
          <textarea
            value={input}
            onChange={(e) => onInputChange(e.target.value)}
            spellCheck={false}
            placeholder="stdin input for your program..."
            className="w-full resize-none rounded-md p-3 font-mono text-sm outline-none transition"
            style={{
              height: 130,
              background: '#252537',
              border: '1px solid #333355',
              color: '#e2e2f0',
              caretColor: '#8b5cf6',
              fontFamily: "'JetBrains Mono', Consolas, monospace",
            }}
          />
        </div>
      </div>

      {/* Output */}
      <div className="flex flex-col flex-1 min-h-0">
        <div className="ryp-section-header">
          <span className="ryp-section-header__icon">▶_</span>
          <span>Output</span>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span className={`ryp-statusbar__dot ${dotClass}`} />
            <span style={{ fontSize: 11, color: '#9090b0' }}>
              {executionTime === null ? '--' : `${executionTime}ms`}
            </span>
          </div>
        </div>
        <div className="flex-1 overflow-auto p-3 ryp-compiler-scroll">
          {loading ? (
            <div className="flex items-center justify-center h-full min-h-[100px]">
              <Loader2 size={24} className="animate-spin" style={{ color: '#8b5cf6' }} />
            </div>
          ) : (
            <div className="space-y-2">
              {output && (
                <pre
                  className="whitespace-pre-wrap font-mono text-sm leading-6 rounded-md p-3"
                  style={{
                    background: '#252537',
                    border: '1px solid #333355',
                    color: '#4ade80',
                    fontFamily: "'JetBrains Mono', Consolas, monospace",
                  }}
                >
                  {output}
                </pre>
              )}
              {error && (
                <pre
                  className="whitespace-pre-wrap font-mono text-sm leading-6 rounded-md p-3"
                  style={{
                    background: 'rgba(239, 68, 68, 0.08)',
                    border: '1px solid rgba(239, 68, 68, 0.25)',
                    color: '#f87171',
                    fontFamily: "'JetBrains Mono', Consolas, monospace",
                  }}
                >
                  {error}
                </pre>
              )}
              {!output && !error && (
                <p className="text-sm" style={{ color: '#55556a', fontFamily: "'Inter', sans-serif" }}>
                  Run code to see output.
                </p>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}