'use client';

import React from 'react';
import MyAuditsAnalytics from './MyAuditsAnalytics';
import type { MyAuditRow } from '@/lib/api/types/my-audits.types';

interface Props {
  audits: MyAuditRow[]; // ALL audits (not current page)
  statusFilter?: string;
  auditTypeFilter?: string;
  monthFilter?: string;
}

export default function MyAuditsAnalyticsInline({
  audits,
  statusFilter,
  auditTypeFilter,
  monthFilter,
}: Props) {
  // NOTE: the analytics dashboard intentionally reports TRUE TOTALS across
  // every loaded audit — it is not narrowed by the table's status/type
  // filters, so an active "Completed" table filter never zeroes out the
  // "In Progress" KPI. We therefore don't render status/type as scoping
  // chips here (that would imply the numbers below are a filtered subset).
  return (
    <div
      style={{
        marginBottom: 20,
        padding: 16,
        backgroundColor: '#f0fdfa',
        borderRadius: 12,
        border: '1px solid #99f6e4',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          marginBottom: 16,
          flexWrap: 'wrap',
        }}
      >
        <span style={{ fontSize: 16 }}>📊</span>
        <h2
          style={{
            margin: 0,
            fontSize: 14,
            fontWeight: 700,
            color: '#0f766e',
          }}
        >
          My Audits Analytics
        </h2>

        <span
          style={{
            padding: '2px 10px',
            borderRadius: 99,
            fontSize: 11,
            fontWeight: 600,
            backgroundColor: '#fff',
            color: '#0f766e',
            border: '1px solid #99f6e4',
          }}
        >
          All audits
        </span>

        <span
          style={{
            marginLeft: 'auto',
            fontSize: 12,
            color: '#6b7280',
          }}
        >
          {audits.length.toLocaleString()} audits loaded
        </span>
      </div>

      <MyAuditsAnalytics
        audits={audits}
        statusFilter={statusFilter}
        auditTypeFilter={auditTypeFilter}
        monthFilter={monthFilter}
      />
    </div>
  );
}