import React from 'react';
import type { ReportData, ComplianceItem } from '../types';
import { CheckCircleIcon, XCircleIcon, InfoIcon } from './Icons';

interface ReportDisplayProps {
  report: ReportData;
}

const statusClass = (status: 'OK' | 'FALHA' | 'CONFORME' | 'NÃO CONFORME') => {
  switch (status) {
    case 'OK':
    case 'CONFORME':
      return 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800';
    case 'FALHA':
    case 'NÃO CONFORME':
      return 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 border border-red-200 dark:border-red-800';
    default:
      return 'text-slate-600 bg-slate-50 dark:bg-slate-800/50 dark:text-slate-400 border border-slate-200 dark:border-slate-700';
  }
};

const statusIcon = (status: 'OK' | 'FALHA') => {
  return status === 'OK'
    ? <CheckCircleIcon className="w-4 h-4" />
    : <XCircleIcon className="w-4 h-4" />;
};


const ComplianceTableRow: React.FC<{ item: ComplianceItem; headerLabel: string }> = ({ item, headerLabel }) => (
  <tr className="block md:table-row mb-4 md:mb-0 bg-white/50 dark:bg-slate-800/50 md:bg-transparent rounded-xl md:rounded-none shadow-sm md:shadow-none border border-slate-100 dark:border-slate-700 md:border-b md:border-slate-200/50 md:dark:border-slate-700/50 last:border-0 hover:bg-white/80 dark:hover:bg-slate-800/80 transition-colors">
    <td className="p-4 md:py-4 md:px-6 flex justify-between items-center border-b border-slate-100 dark:border-slate-700 md:border-0 md:table-cell">
      <span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 md:hidden">{headerLabel}</span>
      <span className="font-medium text-slate-700 dark:text-slate-300">{item.property || item.element || item.test}</span>
    </td>
    <td className="p-4 md:py-4 md:px-6 flex justify-between items-center border-b border-slate-100 dark:border-slate-700 md:border-0 md:table-cell">
      <span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 md:hidden">Norma</span>
      <span className="text-slate-500 dark:text-slate-400 text-sm font-mono">{item.norm}</span>
    </td>
    <td className="p-4 md:py-4 md:px-6 flex justify-between items-center border-b border-slate-100 dark:border-slate-700 md:border-0 md:table-cell">
      <span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 md:hidden">Certificado</span>
      <span className="text-slate-800 dark:text-slate-200 font-semibold font-mono">{item.certificate}</span>
    </td>
    <td className="p-4 md:py-4 md:px-6 flex justify-between items-center md:table-cell">
      <span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 md:hidden">Status</span>
      <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide ${statusClass(item.status)}`}>
        {statusIcon(item.status)}
        {item.status}
      </span>
    </td>
  </tr>
);

export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
  const identification = report?.identification || {};
  const compliance = report?.compliance || { status: 'NÃO CONFORME', mechanical: [], chemical: [], otherTests: [] };
  const overPerformance = report?.overPerformance || [];
  const equivalents = report?.equivalents || [];
  const confidence = report?.confidence || 0;

  return (
    <div className="space-y-5 animate-fade-in pb-8">
      <div className="flex flex-col md:flex-row justify-between items-center bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-md p-4 md:p-5 rounded-2xl relative overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"></div>
        <div className="text-left w-full md:w-auto mb-3 md:mb-0">
          <h2 className="text-2xl md:text-3xl font-display font-bold text-slate-900 dark:text-white">Relatório Técnico de Qualidade</h2>
          <p className="text-sm text-slate-500 dark:text-slate-400">Análise de conformidade normativa assistida por IA</p>
        </div>

        <div className="text-left md:text-right flex flex-col items-start md:items-end w-full md:w-auto shrink-0">
          <h3 className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1 uppercase tracking-wide">Grau de Confiança da Análise</h3>
          <div className="flex justify-start md:justify-end items-end gap-1">
            <span className="text-4xl sm:text-5xl font-display font-bold bg-clip-text text-transparent bg-gradient-to-br from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 leading-none">{confidence}</span>
            <span className="text-2xl font-bold text-slate-400 leading-none">%</span>
          </div>
        </div>
      </div>

      {/* Identification Section */}
      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-sm rounded-xl overflow-hidden">
        <div className="px-5 py-3 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm">
          <h3 className="text-lg font-display font-bold text-slate-800 dark:text-white">1. Dados de Identificação</h3>
        </div>
        <div className="p-4 md:p-5">
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3">
            {Object.entries(identification).map(([key, value]) => (
              <li key={key} className="flex flex-col border-b border-slate-100 dark:border-slate-800/50 pb-2 last:border-0 last:pb-0">
                <span className="text-[10px] md:text-xs font-bold text-slate-400 uppercase tracking-wider mb-0.5">{key.replace(/([A-Z])/g, ' $1')}</span>
                <span className="text-base font-medium text-slate-800 dark:text-slate-200">{value}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Compliance Section */}
      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-sm rounded-xl overflow-hidden">
        <div className="px-5 py-3 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm flex flex-col md:flex-row md:items-center justify-between gap-3">
          <h3 className="text-lg font-display font-bold text-slate-800 dark:text-white">2. Verificação de Conformidade</h3>
          <div className={`px-3 py-1 rounded-full font-bold text-xs uppercase tracking-wide border shadow-sm ${statusClass(compliance.status)}`}>
            {compliance.status}
          </div>
        </div>

        <div className="p-4 md:p-5 space-y-6">
          <div>
            <h4 className="flex items-center gap-2 font-display font-semibold text-base mb-3 text-slate-800 dark:text-slate-200">
              <span className="w-1 h-5 bg-blue-500 rounded-full"></span>
              Análise de Propriedades Mecânicas
            </h4>
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse text-sm">
                <thead className="hidden md:table-header-group text-[10px] md:text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
                  <tr>
                    <th className="py-2 px-4 font-semibold">Propriedade</th>
                    <th className="py-2 px-4 font-semibold">Norma</th>
                    <th className="py-2 px-4 font-semibold">Certificado</th>
                    <th className="py-2 px-4 font-semibold w-28">Status</th>
                  </tr>
                </thead>
                <tbody className="md:divide-y md:divide-slate-100 dark:md:divide-slate-700/50">
                  {compliance.mechanical.map((item, i) => <ComplianceTableRow key={i} item={item} headerLabel="Propriedade" />)}
                </tbody>
              </table>
            </div>
          </div>

          <div>
            <h4 className="flex items-center gap-2 font-display font-semibold text-base mb-3 text-slate-800 dark:text-slate-200">
              <span className="w-1 h-5 bg-purple-500 rounded-full"></span>
              Análise de Composição Química (%)
            </h4>
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse text-sm">
                <thead className="hidden md:table-header-group text-[10px] md:text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
                  <tr>
                    <th className="py-2 px-4 font-semibold">Elemento</th>
                    <th className="py-2 px-4 font-semibold">Norma</th>
                    <th className="py-2 px-4 font-semibold">Certificado</th>
                    <th className="py-2 px-4 font-semibold w-28">Status</th>
                  </tr>
                </thead>
                <tbody className="md:divide-y md:divide-slate-100 dark:md:divide-slate-700/50">
                  {compliance.chemical.map((item, i) => <ComplianceTableRow key={i} item={item} headerLabel="Elemento" />)}
                </tbody>
              </table>
            </div>
          </div>
          {compliance.otherTests.length > 0 && (
            <div>
              <h4 className="flex items-center gap-2 font-display font-semibold text-base mb-3 text-slate-800 dark:text-slate-200">
                <span className="w-1 h-5 bg-emerald-500 rounded-full"></span>
                Outros Testes
              </h4>
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse text-sm">
                  <thead className="hidden md:table-header-group text-[10px] md:text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
                    <tr>
                      <th className="py-2 px-4 font-semibold">Teste</th>
                      <th className="py-2 px-4 font-semibold">Norma</th>
                      <th className="py-2 px-4 font-semibold">Certificado</th>
                      <th className="py-2 px-4 font-semibold w-28">Status</th>
                    </tr>
                  </thead>
                  <tbody className="md:divide-y md:divide-slate-100 dark:md:divide-slate-700/50">
                    {compliance.otherTests.map((item, i) => <ComplianceTableRow key={i} item={item} headerLabel="Teste" />)}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Over-Performance Section */}
      {compliance.status === 'CONFORME' && overPerformance.length > 0 && (
        <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-sm rounded-xl overflow-hidden border-l-4 border-l-green-500">
          <div className="px-5 py-3 bg-green-50/50 dark:bg-green-900/10 border-b border-green-100 dark:border-green-900/30">
            <h3 className="text-lg font-display font-bold text-green-800 dark:text-green-300">3. Destaques de Desempenho</h3>
          </div>
          <div className="p-4 md:p-5">
            <p className="text-xs md:text-sm text-slate-600 dark:text-slate-400 mb-4">Este material excede os requisitos mínimos normativos nos seguintes aspectos:</p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {overPerformance.map((item, i) => (
                <div key={i} className="flex items-start gap-3 p-3 rounded-lg bg-white/50 dark:bg-slate-800/50 border border-green-100 dark:border-green-900/30 shadow-sm">
                  <div className="p-1.5 bg-green-100 dark:bg-green-900/30 rounded-full text-green-600 dark:text-green-400 shrink-0">
                    <CheckCircleIcon className="w-4 h-4" />
                  </div>
                  <div>
                    <span className="block font-semibold text-sm text-slate-800 dark:text-slate-200">{item.property}</span>
                    <span className="text-green-600 dark:text-green-400 text-xs font-medium">{item.value} superior ao mínimo.</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Equivalents Section */}
      <div className="glass-panel rounded-xl overflow-hidden shadow-sm">
        <div className="px-5 py-3 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm">
          <h3 className="text-lg font-display font-bold text-slate-800 dark:text-white">4. Normas Equivalentes</h3>
        </div>
        <div className="p-4 md:p-5">
          <p className="text-xs md:text-sm text-slate-500 dark:text-slate-400 mb-4">Equivalências internacionais para <span className="font-semibold text-slate-700 dark:text-slate-300">{identification.standards}</span>:</p>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
            {equivalents.map((item, i) => (
              <div key={i} className="group p-3 rounded-lg bg-gradient-to-br from-slate-50 to-white dark:from-slate-800 dark:to-slate-800/50 border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-all">
                <p className="text-[10px] md:text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-0.5 group-hover:text-blue-500 transition-colors">{item.system}</p>
                <p className="font-bold text-slate-800 dark:text-slate-200 font-mono text-base">{item.norm}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};