'use client';

import { FiInfo } from 'react-icons/fi';
import { IpRiskAnalysis, IpRiskAnalysisFinding, IpRiskSections, IpRiskSection } from '../types';

interface IpRiskAnalysisDisplayProps {
  ipRiskAnalysis?: IpRiskAnalysis;
}

const FindingRow = ({ finding }: { finding: IpRiskAnalysisFinding }) => (
  <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-2 py-4 border-b" style={{ borderColor: 'var(--icon-button-secondary)' }}>
    <div className="md:col-span-1">
      <p className="font-semibold" style={{ color: 'var(--text-main)' }}>{finding.label}</p>
    </div>
    <div className="md:col-span-2">
      <p style={{ color: 'var(--text-secondary)' }}>{finding.details}</p>
      <p className="text-xs mt-1 italic" style={{ color: 'var(--text-secondary)' }}>{finding.implication}</p>
    </div>
  </div>
);

const Section = ({ section }: { section: IpRiskSection }) => (
  <div className="">
    <h4 className="text-lg font-semibold mb-2" style={{ color: 'var(--text-main)' }}>{section.title}</h4>
    <ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
      {section.items.map((item, idx) => (
        <li key={idx} style={{ marginBottom: 8 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '16px 1fr', columnGap: 8, alignItems: 'start' }}>
            <div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 8, backgroundColor: 'var(--text-secondary)' }} />
            <div>
              <div className="font-medium text-sm" style={{ color: 'var(--text-main)' }}>{item.label}:</div>
              <div className="text-sm" style={{ color: 'var(--text-secondary)', marginTop: 2 }}>{item.text}</div>
            </div>
          </div>
        </li>
      ))}
    </ul>
  </div>
);

const IpRiskAnalysisDisplay = ({ ipRiskAnalysis }: IpRiskAnalysisDisplayProps) => {
  if (!ipRiskAnalysis || !ipRiskAnalysis.checked || !ipRiskAnalysis.findings || ipRiskAnalysis.findings.length === 0) {
    return (
      <div className="mt-6 p-4 rounded-lg flex items-center" style={{ backgroundColor: 'var(--content-card-background)' }}>
        <FiInfo className="h-5 w-5 mr-3 flex-shrink-0" style={{ color: 'var(--text-secondary)' }} />
        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>IP risk analysis was not performed for this assessment.</p>
      </div>
    );
  }

  const { findings = [], sections } = ipRiskAnalysis as IpRiskAnalysis & { sections?: IpRiskSections };

  if (sections) {
    return (
      <div className="">
        <Section section={sections.general} />
        <Section section={sections.location} />
        <Section section={sections.reputational} />
      </div>
    );
  }

  return (
    <div className="">
      <div>
        {findings.map((finding, index) => (
          <FindingRow key={index} finding={finding} />
        ))}
      </div>
    </div>
  );
};

export default IpRiskAnalysisDisplay;