'use client';

import React from 'react';
import InquiryAnalytics from './InquiryAnalytics';
import type { InquiryRow } from '@/lib/api/types/inquiry.types';

interface Props {
  inquiries:    InquiryRow[];   // ALL inquiries (not current page)
  statusFilter?: string;
  typeFilter?:   string;
  monthFilter?:  string;
  // ✅ NEW — cert body + audit stage filters
  certBodyFilter?: string;
  auditStageFilter?: string;
}

export default function InquiryAnalyticsInline({
  inquiries,
  statusFilter,
  typeFilter,
  monthFilter,
  // ✅ NEW
  certBodyFilter,
  auditStageFilter,
}: Props) {
  // ✅ NEW — Compute filtered count for display (after applying cert_body + audit_stage)
  const filteredInquiries = React.useMemo(() => {
    return inquiries.filter((inq) => {
      if (
        certBodyFilter &&
        certBodyFilter !== 'ALL' &&
        (inq as any).cert_body !== certBodyFilter
      ) {
        return false;
      }
      if (
        auditStageFilter &&
        auditStageFilter !== 'ALL' &&
        (inq as any).audit_stage !== auditStageFilter
      ) {
        return false;
      }
      return true;
    });
  }, [inquiries, certBodyFilter, auditStageFilter]);

  // ✅ NEW — Build active filter chips
  const activeFilters: { label: string; value: string; color: string }[] = [];
  if (certBodyFilter && certBodyFilter !== 'ALL') {
    activeFilters.push({
      label: 'Cert Body',
      value: certBodyFilter,
      color: certBodyFilter === 'QRS' ? '#6d28d9' : '#0e7490',
    });
  }
  if (auditStageFilter && auditStageFilter !== 'ALL') {
    activeFilters.push({
      label: 'Stage',
      value: auditStageFilter,
      color: '#6d28d9',
    });
  }

  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' }}>
          Inquiry Analytics
        </h2>

        {/* ✅ NEW — Active filter chips */}
        {activeFilters.length > 0 && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginLeft: 4 }}>
            {activeFilters.map((f, idx) => (
              <span
                key={idx}
                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                  padding: '2px 10px',
                  borderRadius: 99,
                  fontSize: 11,
                  fontWeight: 600,
                  backgroundColor: '#fff',
                  color: f.color,
                  border: `1px solid ${f.color}33`,
                }}
              >
                <span style={{ opacity: 0.7 }}>{f.label}:</span>
                <strong>{f.value}</strong>
              </span>
            ))}
          </div>
        )}

        <span style={{ marginLeft: 'auto', fontSize: 12, color: '#6b7280' }}>
          {/* ✅ NEW — Show filtered count vs total when filters are active */}
          {activeFilters.length > 0
            ? `${filteredInquiries.length.toLocaleString()} of ${inquiries.length.toLocaleString()} inquiries`
            : `${inquiries.length.toLocaleString()} inquiries loaded`}
        </span>
      </div>
      <InquiryAnalytics
        inquiries={filteredInquiries}
        statusFilter={statusFilter}
        typeFilter={typeFilter}
        monthFilter={monthFilter}
        // ✅ NEW — Pass new filters through to InquiryAnalytics if it accepts them
        certBodyFilter={certBodyFilter}
        auditStageFilter={auditStageFilter}
      />
    </div>
  );
}