'use client';

import React from 'react';
import GaugeCard from './GaugeCard';

export default function AiUsageBody({ ai }: { ai?: {
  explanation?: string;
  key_findings?: string[];
  originality_score?: number;
  transparency_score?: number;
  transparency_descriptor?: string;
  files_with_ai_findings?: number;
  files_analyzed?: number;
  files_with_disclosure?: number;
  repos_analyzed?: number;
  repos_with_ai_findings?: number;
  evidence?: Array<{ file_path?: string; snippet?: string; reason?: string }>; 
} }) {
  if (!ai) return null;
  const techGauge = {
    percent: Math.max(0, Math.min(100, Number(ai.originality_score ?? 0))),
    label: 'Originality',
  };
  const riskGauge = {
    percent: Math.max(0, Math.min(100, Number(ai.transparency_score ?? 0))),
    label: ai.transparency_descriptor ? `Transparency — ${ai.transparency_descriptor}` : 'Transparency',
  };
  const stats: Array<{ label: string; value: string }>= [
    { label: 'Files analyzed', value: String(ai.files_analyzed ?? 0) },
    { label: 'Files with AI findings', value: String(ai.files_with_ai_findings ?? 0) },
    { label: 'Files with disclosure', value: String(ai.files_with_disclosure ?? 0) },
    { label: 'Repos analyzed', value: String(ai.repos_analyzed ?? 0) },
    { label: 'Repos with AI findings', value: String(ai.repos_with_ai_findings ?? 0) },
  ];
  const findings = Array.isArray(ai.evidence) ? ai.evidence.slice(0, 5) : [];
  const topMovers = Array.isArray(ai.key_findings) ? ai.key_findings : [];

  return (
    <div className="space-y-8">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 *:min-h-full">
        <GaugeCard
          key={'ai-originality'}
          title={'Originality'}
          description={'Estimated share of human-authored code based on linguistic signals in comments.'}
          percent={techGauge.percent}
          label={techGauge.label}
          topMovers={[]}
        />
        <GaugeCard
          key={'ai-transparency'}
          title={'Transparency'}
          description={'Proportion of AI-influenced files that include an explicit disclosure.'}
          percent={riskGauge.percent}
          label={riskGauge.label}
          topMovers={[]}
        />
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-5 gap-4">
        {stats.map((s, i) => (
          <div key={i} className={'rounded-md p-3 border'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
            <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>{s.label}</div>
            <div className={'text-lg font-semibold'} style={{ color: 'var(--text-main)' }}>{s.value}</div>
          </div>
        ))}
      </div>
      {findings.length > 0 && (
        <div>
          <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Sample Findings</div>
          <div className="space-y-3">
            {findings.map((f, idx) => (
              <div key={idx} className={'rounded-md p-3 border'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
                <div className={'text-xs mb-1'} style={{ color: 'var(--text-secondary)' }}>{f.file_path || 'file'}</div>
                {f.snippet ? (
                  <pre className={'text-xs overflow-auto p-2 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{f.snippet}</pre>
                ) : null}
                {f.reason ? (
                  <div className={'text-xs mt-2'} style={{ color: 'var(--text-secondary)' }}>{f.reason}</div>
                ) : null}
              </div>
            ))}
          </div>
        </div>
      )}
      {ai.explanation && (
        <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{ai.explanation}</div>
      )}
    </div>
  );
}