'use client';
import { useState } from 'react';
import { validationResults, ValidationResult, ValidationStatus } from './payrollData';

const statusConfig: Record<ValidationStatus, { color: string; icon: string; bg: string }> = {
  Pass: { color: 'text-green-700', icon: 'ri-checkbox-circle-line', bg: 'bg-green-50 border-green-200' },
  Fail: { color: 'text-red-700', icon: 'ri-close-circle-line', bg: 'bg-red-50 border-red-200' },
  Warning: { color: 'text-yellow-700', icon: 'ri-error-warning-line', bg: 'bg-yellow-50 border-yellow-200' },
};

const rules = [
  { rule: 'No missing Employee IDs', status: 'Pass', count: '87/87' },
  { rule: 'Positive salary amounts only', status: 'Pass', count: '87/87' },
  { rule: 'Joining date before termination date', status: 'Pass', count: '87/87' },
  { rule: 'Bank account number format', status: 'Pass', count: '86/87' },
  { rule: 'Mandatory fields complete (name, ID, basic salary)', status: 'Pass', count: '87/87' },
  { rule: 'TIN number format validation', status: 'Pass', count: '87/87' },
  { rule: 'LWOP days vs. working days check', status: 'Warning', count: '1 warning' },
  { rule: 'Termination settlement flag check', status: 'Warning', count: '1 warning' },
  { rule: 'New hire prorated salary check', status: 'Warning', count: '1 warning' },
];

export default function ValidationTab() {
  const [running, setRunning] = useState(false);
  const [ran, setRan] = useState(true);

  const handleRun = () => {
    setRunning(true);
    setTimeout(() => { setRunning(false); setRan(true); }, 1800);
  };

  const passes = validationResults.filter(r => r.status === 'Pass').length;
  const warnings = validationResults.filter(r => r.status === 'Warning').length;
  const failures = validationResults.filter(r => r.status === 'Fail').length;

  return (
    <div className="space-y-5">
      <div className="bg-white rounded-xl border border-gray-200 p-5">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="font-semibold text-gray-800">Pre-Export Validation</h3>
            <p className="text-sm text-gray-500 mt-0.5">Run checks before exporting payroll data to ensure data integrity</p>
          </div>
          <button onClick={handleRun} disabled={running} className="flex items-center gap-2 px-4 py-2 bg-pink-600 text-white rounded-lg text-sm whitespace-nowrap cursor-pointer hover:bg-pink-700 disabled:opacity-60">
            <div className="w-4 h-4 flex items-center justify-center">
              <i className={`ri-play-circle-line text-sm ${running ? 'animate-spin' : ''}`}></i>
            </div>
            {running ? 'Running...' : 'Run Validation'}
          </button>
        </div>

        {ran && (
          <div className="grid grid-cols-3 gap-4 mb-5">
            <div className="bg-green-50 border border-green-200 rounded-xl p-4 text-center">
              <div className="w-8 h-8 flex items-center justify-center mx-auto text-green-600 mb-1"><i className="ri-checkbox-circle-fill text-2xl"></i></div>
              <p className="text-2xl font-bold text-green-700">{passes}</p>
              <p className="text-xs text-green-600">Passed</p>
            </div>
            <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4 text-center">
              <div className="w-8 h-8 flex items-center justify-center mx-auto text-yellow-600 mb-1"><i className="ri-error-warning-fill text-2xl"></i></div>
              <p className="text-2xl font-bold text-yellow-700">{warnings}</p>
              <p className="text-xs text-yellow-600">Warnings</p>
            </div>
            <div className="bg-red-50 border border-red-200 rounded-xl p-4 text-center">
              <div className="w-8 h-8 flex items-center justify-center mx-auto text-red-600 mb-1"><i className="ri-close-circle-fill text-2xl"></i></div>
              <p className="text-2xl font-bold text-red-700">{failures}</p>
              <p className="text-xs text-red-600">Failures</p>
            </div>
          </div>
        )}

        <div className="space-y-2">
          {rules.map((r, i) => {
            const s = r.status as ValidationStatus;
            const cfg = statusConfig[s];
            return (
              <div key={i} className={`flex items-center justify-between px-4 py-3 rounded-lg border ${cfg.bg}`}>
                <div className="flex items-center gap-3">
                  <div className={`w-5 h-5 flex items-center justify-center ${cfg.color}`}>
                    <i className={`${cfg.icon} text-base`}></i>
                  </div>
                  <span className="text-sm text-gray-700">{r.rule}</span>
                </div>
                <span className={`text-xs font-semibold ${cfg.color}`}>{r.count}</span>
              </div>
            );
          })}
        </div>
      </div>

      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div className="px-5 py-4 border-b border-gray-200">
          <h3 className="font-semibold text-gray-800">Record-Level Validation Results</h3>
          <p className="text-sm text-gray-500">Individual employee validation flags for April 2026</p>
        </div>
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-gray-50 border-b border-gray-200">
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Employee</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Field</th>
              <th className="text-left px-4 py-3 text-gray-600 font-semibold">Issue / Note</th>
              <th className="text-center px-4 py-3 text-gray-600 font-semibold">Status</th>
            </tr>
          </thead>
          <tbody>
            {validationResults.map((r, i) => {
              const cfg = statusConfig[r.status];
              return (
                <tr key={i} className="border-b border-gray-100 hover:bg-gray-50">
                  <td className="px-4 py-3">
                    <p className="font-medium text-gray-800">{r.employeeName}</p>
                    <p className="text-xs text-gray-400 font-mono">{r.employeeId}</p>
                  </td>
                  <td className="px-4 py-3 text-gray-600">{r.field}</td>
                  <td className="px-4 py-3 text-gray-600 text-xs max-w-sm">{r.issue}</td>
                  <td className="px-4 py-3 text-center">
                    <span className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold w-fit mx-auto ${cfg.bg} ${cfg.color}`}>
                      <i className={`${cfg.icon} text-xs`}></i>
                      {r.status}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
        <div className="flex items-start gap-3">
          <div className="w-5 h-5 flex items-center justify-center text-amber-600 mt-0.5"><i className="ri-information-line text-base"></i></div>
          <div>
            <p className="text-sm font-semibold text-amber-800">Validation Summary for April 2026</p>
            <p className="text-sm text-amber-700 mt-1">3 warnings found. These are non-blocking but require HR review before export. No critical failures detected. You may proceed with export after reviewing the warnings above.</p>
          </div>
        </div>
      </div>
    </div>
  );
}