components/DocumentCheckerResults.jsx

import React from 'react';
import { AlertTriangle, CheckCircle, XCircle } from 'lucide-react';

const DocumentCheckerResults = ({ results }) => {
  if (!results) {
    return (
      <div className="p-4 text-gray-600">
        Results will appear here after processing...
      </div>
    );
  }

  // Parse the markdown-style results into sections
  const sections = results.split('■').filter(Boolean);
  const headerSection = sections[0];
  const issuesSections = sections.slice(1);

  return (
    <div className="max-w-4xl mx-auto p-4 space-y-6">
      {/* Header Section */}
      <div className="border-b border-gray-200 pb-4">
        <h1 className="text-2xl font-bold text-gray-800 mb-4">
          Document Check Results Summary
        </h1>
        {headerSection.includes("All checks passed") ? (
          <div className="flex items-center gap-2 text-green-600">
            <CheckCircle className="w-5 h-5" />
            <span className="font-medium">All checks passed successfully!</span>
          </div>
        ) : (
          <div className="flex items-center gap-2 text-amber-600">
            <AlertTriangle className="w-5 h-5" />
            <span className="font-medium">
              {headerSection.match(/Found (\d+) categories/)?.[0] || "Issues found"}
            </span>
          </div>
        )}
      </div>

      {/* Issues Sections */}
      <div className="space-y-6">
        {issuesSections.map((section, index) => {
          const [title, ...content] = section.split('\n').filter(Boolean);
          const [description, howToFix, ...examples] = content;

          return (
            <div key={index} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
              {/* Section Header */}
              <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
                <h2 className="text-lg font-semibold text-gray-800">{title.trim()}</h2>
                <p className="text-sm text-gray-600 mt-1">{description?.trim()}</p>
              </div>

              {/* How to Fix */}
              <div className="px-4 py-3 bg-green-50">
                <div className="flex items-start gap-2">
                  <div className="mt-1">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                  </div>
                  <div>
                    <span className="font-medium text-green-800">How to fix: </span>
                    <span className="text-green-700">{howToFix?.replace('How to fix:', '').trim()}</span>
                  </div>
                </div>
              </div>

              {/* Examples */}
              <div className="px-4 py-3 border-t border-gray-200">
                <h3 className="font-medium text-gray-800 mb-2">Example Fix:</h3>
                <div className="space-y-2 ml-4">
                  <div className="flex items-start gap-2">
                    <XCircle className="w-4 h-4 text-red-500 mt-1" />
                    <div className="text-red-600">
                      Incorrect: {examples[1]?.replace('❌ Incorrect:', '').trim()}
                    </div>
                  </div>
                  <div className="flex items-start gap-2">
                    <CheckCircle className="w-4 h-4 text-green-600 mt-1" />
                    <div className="text-green-600">
                      Correct: {examples[2]?.replace('✓ Correct  :', '').trim()}
                    </div>
                  </div>
                </div>
              </div>

              {/* Issues Found */}
              <div className="px-4 py-3 border-t border-gray-200">
                <h3 className="font-medium text-gray-800 mb-2">Issues found in your document:</h3>
                <ul className="space-y-1 ml-4">
                  {examples.slice(4).map((issue, i) => {
                    if (issue.includes('more similar issues')) {
                      return (
                        <li key={i} className="text-gray-500 italic mt-2">
                          {issue.trim()}
                        </li>
                      );
                    }
                    return (
                      <li key={i} className="text-gray-600">
                        • {issue.replace('•', '').trim()}
                      </li>
                    );
                  })}
                </ul>
              </div>
            </div>
          );
        })}
      </div>

      {/* Summary Section */}
      {!headerSection.includes("All checks passed") && (
        <div className="mt-8 border-t border-gray-200 pt-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">Summary and Recommendations</h2>
          
          <div className="space-y-4">
            <div>
              <h3 className="font-medium text-gray-800 mb-2">Priority Order for Fixes:</h3>
              <ul className="space-y-1 ml-4">
                <li className="text-red-600">1. Critical: Heading formats, required content, and document structure</li>
                <li className="text-amber-600">2. Important: Terminology, acronyms, and references</li>
                <li className="text-green-600">3. Standard: Formatting, spacing, and style consistency</li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-medium text-gray-800 mb-2">Next Steps:</h3>
              <ul className="space-y-1 ml-4 text-gray-600">
                <li>1. Address issues in priority order</li>
                <li>2. Use search/replace for consistent fixes</li>
                <li>3. Re-run checker after making changes</li>
                <li>4. Update your document template if needed</li>
              </ul>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default DocumentCheckerResults;