import { InterpretationReport } from '@/lib/types'
import BenchmarkTable from './BenchmarkTable'

interface ReportViewProps {
  report: InterpretationReport
}

const strengthStyles: Record<string, string> = {
  strong: 'bg-green-100 text-green-800',
  moderate: 'bg-yellow-100 text-yellow-800',
  weak: 'bg-red-100 text-red-800',
}

const strengthLabels: Record<string, string> = {
  strong: 'Strong',
  moderate: 'Moderate',
  weak: 'Weak',
}

export default function ReportView({ report }: ReportViewProps) {
  const today = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="no-break border-b border-gray-200 pb-6">
        <h1 className="text-3xl font-bold text-gray-900">DevOps Performance Report</h1>
        <p className="mt-1 text-sm text-gray-500">{today}</p>
      </div>

      {/* Delivery Profile */}
      <section className="no-break">
        <h2 className="text-xl font-semibold text-gray-800 mb-3">Delivery Profile</h2>
        <p className="text-gray-700 leading-relaxed">{report.deliveryProfile}</p>
      </section>

      {/* Benchmark Alignment */}
      <section className="no-break">
        <h2 className="text-xl font-semibold text-gray-800 mb-3">Benchmark Alignment</h2>
        <BenchmarkTable alignment={report.benchmarkAlignment} />
      </section>

      {/* Leadership Summary */}
      <section className="no-break">
        <h2 className="text-xl font-semibold text-gray-800 mb-3">Leadership Summary</h2>
        <div className="rounded-lg border border-gray-200 bg-gray-50 p-5 space-y-4">
          <div className="flex flex-wrap gap-4">
            <div className="flex items-center gap-2">
              <span className="text-sm font-medium text-gray-600">Delivery Speed:</span>
              <span
                className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${strengthStyles[report.leadershipSummary.deliverySpeed] ?? ''}`}
              >
                {strengthLabels[report.leadershipSummary.deliverySpeed] ?? report.leadershipSummary.deliverySpeed}
              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-sm font-medium text-gray-600">Reliability:</span>
              <span
                className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${strengthStyles[report.leadershipSummary.reliability] ?? ''}`}
              >
                {strengthLabels[report.leadershipSummary.reliability] ?? report.leadershipSummary.reliability}
              </span>
            </div>
          </div>
          <div>
            <span className="text-sm font-medium text-gray-600">Focus Area: </span>
            <span className="text-sm text-gray-800">{report.leadershipSummary.focusArea}</span>
          </div>
        </div>
      </section>

      {/* Likely Bottlenecks */}
      <section className="no-break">
        <h2 className="text-xl font-semibold text-gray-800 mb-3">Likely Bottlenecks</h2>
        <ul className="space-y-2">
          {report.likelyBottlenecks.map((bottleneck) => (
            <li key={bottleneck} className="flex items-start gap-2 text-gray-700">
              <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-indigo-500" />
              {bottleneck}
            </li>
          ))}
        </ul>
      </section>

      {/* Improvements */}
      <section className="no-break">
        <h2 className="text-xl font-semibold text-gray-800 mb-3">Recommended Improvements</h2>
        <ol className="space-y-4">
          {[...report.improvements]
            .sort((a, b) => a.priority - b.priority)
            .map((improvement) => (
              <li key={improvement.priority} className="flex gap-4">
                <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-bold text-indigo-700">
                  {improvement.priority}
                </span>
                <div>
                  <p className="font-semibold text-gray-900">{improvement.action}</p>
                  <p className="mt-0.5 text-sm text-gray-600">{improvement.rationale}</p>
                </div>
              </li>
            ))}
        </ol>
      </section>
    </div>
  )
}