import React from 'react';

interface RevisionHistoryModalProps {
  onClose: () => void;
}

export const RevisionHistoryModal: React.FC<RevisionHistoryModalProps> = ({ onClose }) => {
  const revisions = [
    {
      id: 'rev-3',
      version: 'v1.3 (Current)',
      time: '35 minutes ago',
      author: 'Automated Stress-Tester',
      change: 'Injected Public Interest Hardship Waiver Clause to mitigate fee stall tactics.',
      scoreChange: '+12% (84% -> 96%)',
      badge: 'Optimized',
    },
    {
      id: 'rev-2',
      version: 'v1.2',
      time: '2 hours ago',
      author: 'Privacy Redaction Engine',
      change: 'Masked Street Address (124 Main St) and Email (j.doe@email.com) in public draft.',
      scoreChange: 'PII Protected',
      badge: 'Secured',
    },
    {
      id: 'rev-1',
      version: 'v1.0',
      time: 'Oct 24, 2024 • 09:30 AM',
      author: 'Citizen Intake',
      change: 'Initial grievance ingestion and statutory framework mapping to Sunshine Law § 119.07.',
      scoreChange: 'Initial Base',
      badge: 'Created',
    },
  ];

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[85vh] flex flex-col shadow-2xl border border-[#E2E8F0] overflow-hidden">
        {/* Header */}
        <div className="p-6 border-b border-[#E2E8F0] flex justify-between items-center bg-[#F8FAFC]">
          <div>
            <div className="flex items-center gap-2">
              <span className="material-symbols-outlined text-[#006c4a] text-[24px]">history</span>
              <h2 className="font-headline font-bold text-[20px] text-[#0F172A]">
                Revision History & Audit Log
              </h2>
            </div>
            <p className="text-[13px] text-[#64748B] mt-0.5">
              Cryptographic integrity log for legal drafting and stress test iterations
            </p>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-full flex items-center justify-center text-[#64748B] hover:text-[#0F172A] hover:bg-[#E2E8F0] transition-colors cursor-pointer"
          >
            <span className="material-symbols-outlined text-[20px]">close</span>
          </button>
        </div>

        {/* Content */}
        <div className="p-6 overflow-y-auto flex-grow flex flex-col gap-4">
          {revisions.map((rev) => (
            <div
              key={rev.id}
              className="bg-white border border-[#CBD5E1] rounded-xl p-4 flex flex-col gap-2 hover:border-[#0F172A] transition-colors shadow-xs"
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className="font-headline font-bold text-[14px] text-[#0F172A]">
                    {rev.version}
                  </span>
                  <span className="text-[11px] bg-[#E2E8F0] text-[#334155] px-2 py-0.5 rounded font-mono">
                    {rev.time}
                  </span>
                </div>

                <span className="text-[11px] font-bold text-[#006c4a] bg-[#DCFCE7] px-2.5 py-0.5 rounded-full">
                  {rev.scoreChange}
                </span>
              </div>

              <p className="text-[13.5px] text-[#475569] leading-relaxed">{rev.change}</p>

              <div className="text-[11px] text-[#94A3B8] flex items-center gap-1 pt-1 border-t border-[#F1F5F9]">
                <span className="material-symbols-outlined text-[13px]">person</span>
                <span>Triggered by: {rev.author}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div className="p-4 border-t border-[#E2E8F0] bg-[#F8FAFC] flex justify-end">
          <button
            onClick={onClose}
            className="px-4 py-2 text-[13px] font-medium bg-[#0F172A] text-white hover:bg-[#1E293B] rounded-lg cursor-pointer"
          >
            Done
          </button>
        </div>
      </div>
    </div>
  );
};