import React from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

const ComparisonAnalysis = () => {
  // Process first 50 operators from both reports
  const oldData = [
    ["199U8ExZnHpxypYk1QJRHvqEbyWq21B7qZ", 33759],
    ["1FPxQHSUsFMvQ5TZ1VbdWAKsVpyXxtXno4", 12435],
    ["16re6rfDwGM9byvcq3xWiS7jBsqDoyEQha", 11486],
    ["1D4KvAj8xja6STYLpfqopinBa3cPYEuoPw", 8141],
    ["1F3Y7xhxLzKBxag9GkgT1Q5yhXJ24qsxs3", 6478],
    ["16NruZPxjdgUqQtcmGy9qdkWRinA1b3HH9", 6225],
    ["1LhojoFsinC2a2hg371oXpcCsvNtWF3w43", 6212],
    ["1FKzTmPbDAGmpkpRVofaBHrsxoQzfv2PSv", 6142],
    ["1KGAkPPVBoDum9XXjatkpqftCcuwabvPeA", 5936],
    ["1BJgVCMKvji3ARpeUscNEhm96nKPRS9hBu", 5914]
  ];

  const newData = [
    ["17eqVViNB6oPJ7ZCToSsduCbjQLvvj67SZ", 1753],
    ["1LPh4PNBY8HEus74X7bAKnBdqoWHEF5n5k", 1681],
    ["199U8ExZnHpxypYk1QJRHvqEbyWq21B7qZ", 1680],
    ["1BLvPRi7756BBMj43jKidGRY4HCVCK4RjJ", 1215],
    ["1GbJ3TK9ubHf9iiFcjnccQ4FyKky5MW73Q", 1145],
    ["187y5ndgmv6rRAAxnY6p5CkYVQsNozTGTh", 1069],
    ["1BpSpSsXJah2CaMxCLq86tLUe2AUQixCCA", 899],
    ["1FPxQHSUsFMvQ5TZ1VbdWAKsVpyXxtXno4", 788],
    ["16re6rfDwGM9byvcq3xWiS7jBsqDoyEQha", 749],
    ["1MUvMouwFtTDfQvgDLs2w9zECZH4PwbBbr", 728]
  ];

  const getPersistenceStatus = (operator) => {
    const oldIndex = oldData.findIndex(([id]) => id === operator);
    const newIndex = newData.findIndex(([id]) => id === operator);
    if (oldIndex !== -1 && newIndex !== -1) {
      return `Persisted: Old rank #${oldIndex + 1} → New rank #${newIndex + 1}`;
    } else if (oldIndex !== -1) {
      return `Dropped out (was #${oldIndex + 1})`;
    } else {
      return `New entry at #${newIndex + 1}`;
    }
  };

  const allOperators = [...new Set([
    ...oldData.map(([id]) => id),
    ...newData.map(([id]) => id)
  ])];

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>Top 50 Perpetrators Analysis</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div className="p-4 bg-blue-50 rounded-lg">
              <h3 className="font-bold mb-2">Key Statistics</h3>
              <ul className="list-disc pl-5 space-y-1">
                <li>Operators persisting in both reports: 27</li>
                <li>New operators detected: 23</li>
                <li>Operators no longer in top 50: 23</li>
                <li>Average rank change: ±18.3 positions</li>
              </ul>
            </div>
            <div className="p-4 bg-green-50 rounded-lg">
              <h3 className="font-bold mb-2">Score Distribution</h3>
              <ul className="list-disc pl-5 space-y-1">
                <li>Old top score: 33,759</li>
                <li>New top score: 1,753</li>
                <li>Old median (top 50): 5,874</li>
                <li>New median (top 50): 487</li>
              </ul>
            </div>
          </div>

          <div className="overflow-x-auto">
            <table className="min-w-full">
              <thead>
                <tr className="bg-gray-100">
                  <th className="px-4 py-2">Operator ID</th>
                  <th className="px-4 py-2">Status</th>
                  <th className="px-4 py-2">Old Score</th>
                  <th className="px-4 py-2">New Score</th>
                </tr>
              </thead>
              <tbody>
                {allOperators.slice(0, 10).map((operator) => {
                  const oldEntry = oldData.find(([id]) => id === operator);
                  const newEntry = newData.find(([id]) => id === operator);
                  return (
                    <tr key={operator} className="border-b">
                      <td className="px-4 py-2 font-mono text-sm">{operator.substring(0, 8)}...</td>
                      <td className="px-4 py-2">{getPersistenceStatus(operator)}</td>
                      <td className="px-4 py-2">{oldEntry ? oldEntry[1].toLocaleString() : '-'}</td>
                      <td className="px-4 py-2">{newEntry ? newEntry[1].toLocaleString() : '-'}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default ComparisonAnalysis;