'use client';

import React from 'react';
import { FiClock } from 'react-icons/fi';
import type { AuditHistoryEntry } from '@/lib/api/types/my-audits.types';
import {
  STATUS_CONFIG,
  formatUserName,
} from '@/lib/api/mappers/my-audits.mappers';

function formatDateTime(iso: string): string {
  const d = new Date(iso);
  return d.toLocaleString('en-US', {
    day: '2-digit',
    month: 'short',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
}

export default function HistoryTab({
  history,
}: {
  history: AuditHistoryEntry[];
}) {
  if (!history.length) {
    return (
      <div
        style={{
          background: '#fff',
          border: '1px solid #e5e7eb',
          borderRadius: 12,
          padding: 40,
          textAlign: 'center',
          color: '#6b7280',
        }}
      >
        <FiClock size={28} style={{ marginBottom: 8 }} />
        <p style={{ margin: 0, fontSize: 13 }}>No history yet.</p>
      </div>
    );
  }

  return (
    <div
      style={{
        background: '#fff',
        border: '1px solid #e5e7eb',
        borderRadius: 12,
        padding: 20,
      }}
    >
      <h3
        style={{
          margin: '0 0 16px',
          fontSize: 13,
          fontWeight: 700,
          color: '#374151',
        }}
      >
        Audit Trail
        <span
          style={{
            marginLeft: 8,
            fontSize: 11,
            color: '#9ca3af',
            fontWeight: 400,
          }}
        >
          ({history.length} entries)
        </span>
      </h3>

      <div style={{ position: 'relative', paddingLeft: 24 }}>
        {/* Timeline vertical line */}
        <div
          style={{
            position: 'absolute',
            left: 8,
            top: 8,
            bottom: 8,
            width: 2,
            background: '#e5e7eb',
          }}
        />

        {history
          .slice()
          .reverse()
          .map((entry, idx) => {
            const newStatusMeta =
              STATUS_CONFIG[entry.new_status as keyof typeof STATUS_CONFIG];
            const oldStatusMeta = entry.old_status
              ? STATUS_CONFIG[entry.old_status as keyof typeof STATUS_CONFIG]
              : null;

            return (
              <div
                key={entry.id}
                style={{
                  position: 'relative',
                  marginBottom: idx === history.length - 1 ? 0 : 16,
                  paddingBottom: idx === history.length - 1 ? 0 : 16,
                }}
              >
                {/* Dot */}
                <div
                  style={{
                    position: 'absolute',
                    left: -22,
                    top: 4,
                    width: 14,
                    height: 14,
                    borderRadius: '50%',
                    background: newStatusMeta?.dot || '#9ca3af',
                    border: '3px solid #fff',
                    boxShadow: '0 0 0 2px #e5e7eb',
                  }}
                />

                {/* Content */}
                <div
                  style={{
                    fontSize: 12,
                    color: '#374151',
                  }}
                >
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: 6,
                      flexWrap: 'wrap',
                    }}
                  >
                    {oldStatusMeta && (
                      <>
                        <span
                          style={{
                            padding: '2px 8px',
                            borderRadius: 99,
                            background: oldStatusMeta.bg,
                            color: oldStatusMeta.text,
                            fontSize: 10,
                            fontWeight: 600,
                          }}
                        >
                          {oldStatusMeta.label}
                        </span>
                        <span style={{ color: '#9ca3af' }}>→</span>
                      </>
                    )}
                    {newStatusMeta && (
                      <span
                        style={{
                          padding: '2px 8px',
                          borderRadius: 99,
                          background: newStatusMeta.bg,
                          color: newStatusMeta.text,
                          fontSize: 10,
                          fontWeight: 600,
                        }}
                      >
                        {newStatusMeta.label}
                      </span>
                    )}
                  </div>
                  {entry.reason && (
                    <div
                      style={{
                        marginTop: 4,
                        fontSize: 12,
                        color: '#374151',
                      }}
                    >
                      {entry.reason}
                    </div>
                  )}
                  {entry.notes && (
                    <div
                      style={{
                        marginTop: 2,
                        fontSize: 11,
                        color: '#6b7280',
                        fontStyle: 'italic',
                      }}
                    >
                      {entry.notes}
                    </div>
                  )}
                  <div
                    style={{
                      marginTop: 4,
                      fontSize: 10,
                      color: '#9ca3af',
                    }}
                  >
                    {formatDateTime(entry.created_at)}
                    {entry.changed_by
                      ? ` · by ${formatUserName(entry.changed_by)}`
                      : ''}
                  </div>
                </div>
              </div>
            );
          })}
      </div>
    </div>
  );
}