import type { AnalyticsOverviewDto, AnalyticsProvidersDto, AnalyticsRevenueDto } from '@navi/types';

export interface RiskPanelProps {
  overview: AnalyticsOverviewDto | null;
  revenue: AnalyticsRevenueDto | null;
  providers: AnalyticsProvidersDto | null;
}

export function RiskPanel({ overview, revenue, providers }: RiskPanelProps) {
  const flags: Array<{ key: string; tone: 'warning' | 'critical'; title: string; body: string }> = [];

  if (overview && overview.metrics.providerErrorCount > 0) {
    flags.push({
      key: 'providerErrors',
      tone: 'critical',
      title: `${overview.metrics.providerErrorCount} provider integrations need attention`,
      body: 'One or more provider integrations are reporting DOWN or DEGRADED. Open the provider health table below.',
    });
  }

  if (overview && overview.metrics.requestedRefundCount > 0) {
    flags.push({
      key: 'refunds',
      tone: 'warning',
      title: `${overview.metrics.requestedRefundCount} refund(s) waiting for review`,
      body: 'Customer refund requests are pending an approver. Visit the refunds queue.',
    });
  }

  if (overview && overview.metrics.pendingPartnerReviews > 0) {
    flags.push({
      key: 'pendingPartners',
      tone: 'warning',
      title: `${overview.metrics.pendingPartnerReviews} partner application(s) pending`,
      body: 'New partner applications are waiting for KYC approval before they can publish listings.',
    });
  }

  if (revenue && revenue.refunds.count > 5) {
    flags.push({
      key: 'refundVolume',
      tone: 'warning',
      title: `${revenue.refunds.count} refunds in the selected window`,
      body: 'Refund volume is elevated for this date range. Drill into the revenue panel to investigate.',
    });
  }

  if (providers && providers.failedSyncs.length > 0) {
    flags.push({
      key: 'failedSyncs',
      tone: 'critical',
      title: `${providers.failedSyncs.length} provider sync failure(s)`,
      body: 'Recent provider syncs failed. The detail table is below.',
    });
  }

  if (flags.length === 0) {
    return (
      <section className="risk-panel risk-panel-clear">
        <strong>All clear</strong>
        <p>No critical signals detected for the current window. Charts and tables below show the operating snapshot.</p>
      </section>
    );
  }

  return (
    <section className="risk-panel risk-panel-active" aria-label="Operational risk signals">
      <header>
        <strong>Risk signals</strong>
        <span className="muted">{flags.length} item{flags.length === 1 ? '' : 's'} need attention</span>
      </header>
      <ul>
        {flags.map((flag) => (
          <li key={flag.key} className={`risk-flag risk-${flag.tone}`}>
            <strong>{flag.title}</strong>
            <p>{flag.body}</p>
          </li>
        ))}
      </ul>
    </section>
  );
}