'use client';

/**
 * SupportMetrics — dashboard with SLA, AI, refund, MTTR, vendor miss-rate, time-series.
 */

import { useState } from 'react';
import { useT, useLocale } from '@/lib/i18n/react';
import { formatShekelFloat } from '@/lib/money';
import { HydratedIsland } from '@/components/HydratedIsland';
import { MetricTile } from '@/components/ui/domain/MetricTile';
import { AdminTable } from '@/components/ui/domain/admin/AdminTable';
import { PageHeader } from '@/components/ui/layout/PageHeader';
import { Input } from '@/components/ui/primitives/Input';
import { Label } from '@/components/ui/primitives/Label';
import { Skeleton } from '@/components/ui/feedback/Skeleton';
import { ErrorState } from '@/components/ui/feedback/ErrorState';
import { Button } from '@/components/ui/primitives/Button';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import { Grid } from '@/components/ui/layout/Grid';
import { QueryBoundary } from '@platform-modules/ui-primitives';
import { useMetrics } from './internals/useAdminSupport';
import { fmtDuration, formatDate } from '@/lib/format';
import type { SupportMetricsResult } from '@/server/db/queries/support-metrics';

function fmtPct(v: number) {
  return `${Math.round(v)}%`;
}

function isoDate(d: Date) {
  return d.toISOString().slice(0, 10);
}

function SupportMetricsSkeleton() {
  return (
    <Stack gap="6">
      <Grid cols={4} gap="3">
        {Array.from({ length: 4 }).map((_, index) => (
          <Skeleton key={index} className="h-28 w-full" />
        ))}
      </Grid>
      <Skeleton className="h-56 w-full" />
      <Skeleton className="h-56 w-full" />
    </Stack>
  );
}

function SupportMetricsInner() {
  const t = useT('admin');
  const tCommon = useT('common');
  const { locale } = useLocale();
  const ts = t('support') as unknown as Record<string, string>;

  const [from, setFrom] = useState(() => isoDate(new Date(Date.now() - 30 * 86_400_000)));
  const [to, setTo] = useState(() => isoDate(new Date()));

  const metricsQuery = useMetrics({ from, to });

  return (
    <Stack gap="6">
      <Row gap="3" align="center" className="flex-wrap">
        <PageHeader title={ts.metrics_title ?? ''} />

        <Row gap="2" align="center">
          <Label htmlFor="metrics-from" className="text-xs">
            {ts.metrics_from}
          </Label>
          <Input
            id="metrics-from"
            type="date"
            value={from}
            onChange={(e) => setFrom(e.target.value)}
            className="w-36"
            dir="ltr"
          />
        </Row>
        <Row gap="2" align="center">
          <Label htmlFor="metrics-to" className="text-xs">
            {ts.metrics_to}
          </Label>
          <Input
            id="metrics-to"
            type="date"
            value={to}
            onChange={(e) => setTo(e.target.value)}
            className="w-36"
            dir="ltr"
          />
        </Row>
      </Row>

      <QueryBoundary
        query={metricsQuery}
        skeleton={<SupportMetricsSkeleton />}
        errorFallback={() => (
          <ErrorState
            title={ts.metrics_load_error ?? ''}
            action={
              <Button variant="secondary" size="sm" onClick={() => window.location.reload()}>
                {tCommon('retry')}
              </Button>
            }
          />
        )}
      >
        {(resolved) => {
          const metrics = resolved.metrics as SupportMetricsResult | undefined;
          if (!metrics) return null;

          return (
            <Stack gap="8">
              {/* Overview */}
              <section aria-labelledby="metrics-overview">
                <h3
                  id="metrics-overview"
                  className="text-text-muted mb-3 text-xs font-semibold tracking-wide uppercase"
                >
                  {ts.metrics_section_overview}
                </h3>
                <Grid cols={4} gap="3">
                  <MetricTile
                    label={ts.metrics_ticket_total ?? ''}
                    value={String(Object.values(metrics.counts.tickets).reduce((a, b) => a + b, 0))}
                  />
                  <MetricTile
                    label={ts.metrics_case_total ?? ''}
                    value={String(Object.values(metrics.counts.cases).reduce((a, b) => a + b, 0))}
                  />
                  <MetricTile
                    label={ts.metrics_sla_tickets ?? ''}
                    value={ts.metrics_sla_not_measured ?? '—'}
                    tone="default"
                  />
                  <MetricTile
                    label={ts.metrics_sla_cases ?? ''}
                    value={fmtPct(metrics.slaCompliancePct.cases)}
                    tone={
                      metrics.slaCompliancePct.cases >= 90
                        ? 'success'
                        : metrics.slaCompliancePct.cases >= 70
                          ? 'warning'
                          : 'danger'
                    }
                  />
                </Grid>
              </section>

              {/* AI metrics */}
              <section aria-labelledby="metrics-ai">
                <h3
                  id="metrics-ai"
                  className="text-text-muted mb-3 text-xs font-semibold tracking-wide uppercase"
                >
                  {ts.metrics_section_ai}
                </h3>
                <Grid cols={4} gap="3">
                  <MetricTile
                    label={ts.metrics_ai_handoff ?? ''}
                    value={fmtPct(metrics.aiHandoffRatePct)}
                  />
                  <MetricTile
                    label={ts.metrics_ai_autoresolve ?? ''}
                    value={fmtPct(metrics.aiAutoResolveRatePct)}
                  />
                  <MetricTile
                    label={ts.metrics_mttr_tickets ?? ''}
                    value={fmtDuration(metrics.meanTimeToResolveMs.tickets)}
                  />
                  <MetricTile
                    label={ts.metrics_mttr_cases ?? ''}
                    value={fmtDuration(metrics.meanTimeToResolveMs.cases)}
                  />
                </Grid>
              </section>

              {/* Cost */}
              <section aria-labelledby="metrics-cost">
                <h3
                  id="metrics-cost"
                  className="text-text-muted mb-3 text-xs font-semibold tracking-wide uppercase"
                >
                  {ts.metrics_section_cost}
                </h3>
                <Grid cols={4} gap="3">
                  <MetricTile
                    label={ts.metrics_token_cost_per_case ?? ''}
                    value={formatShekelFloat(metrics.tokenCostShekelsPerCase)}
                  />
                </Grid>
              </section>

              {/* Refund outcome mix */}
              <section aria-labelledby="metrics-refunds">
                <h3
                  id="metrics-refunds"
                  className="text-text-muted mb-3 text-xs font-semibold tracking-wide uppercase"
                >
                  {ts.metrics_section_refunds}
                </h3>
                <Grid cols={4} gap="3">
                  {Object.entries(metrics.refundOutcomeMix).map(([outcome, count]) => (
                    <MetricTile
                      key={outcome}
                      label={ts['outcome_' + outcome] ?? outcome.replace(/_/g, ' ')}
                      value={String(count)}
                    />
                  ))}
                </Grid>
              </section>

              {/* Per-vendor miss rate */}
              {metrics.perVendorMissRate.length > 0 && (
                <section aria-labelledby="metrics-vendors">
                  <h3
                    id="metrics-vendors"
                    className="text-text-muted mb-3 text-xs font-semibold tracking-wide uppercase"
                  >
                    {ts.metrics_section_vendors}
                  </h3>
                  <AdminTable
                    columns={[
                      { key: 'vendorName', label: ts.metrics_vendor_name ?? '' },
                      { key: 'totalCount', label: ts.metrics_vendor_total ?? '' },
                      { key: 'missCount', label: ts.metrics_vendor_miss ?? '' },
                      {
                        key: 'missPct',
                        label: ts.metrics_vendor_miss_pct ?? '',
                        render: (r) => fmtPct(r.missPct),
                      },
                    ]}
                    rows={metrics.perVendorMissRate.map((r, i) => ({
                      ...r,
                      id: r.vendorId || String(i),
                    }))}
                    loading={false}
                  />
                </section>
              )}

              {/* Time series */}
              {metrics.timeSeries.length > 0 && (
                <section aria-labelledby="metrics-timeseries">
                  <h3
                    id="metrics-timeseries"
                    className="text-text-muted mb-3 text-xs font-semibold tracking-wide uppercase"
                  >
                    {ts.metrics_section_timeseries}
                  </h3>
                  <AdminTable
                    columns={[
                      { key: 'date', label: ts.metrics_ts_date ?? '' },
                      { key: 'ticketsOpened', label: ts.metrics_ts_tickets ?? '' },
                      { key: 'casesOpened', label: ts.metrics_ts_cases ?? '' },
                      { key: 'slaBreaches', label: ts.metrics_ts_sla_breaches ?? '' },
                    ]}
                    rows={metrics.timeSeries.map((r) => ({
                      ...r,
                      id: r.date,
                      date: formatDate(r.date, locale),
                    }))}
                    loading={false}
                  />
                </section>
              )}
            </Stack>
          );
        }}
      </QueryBoundary>
    </Stack>
  );
}

export function SupportMetrics() {
  return (
    <HydratedIsland>
      <SupportMetricsInner />
    </HydratedIsland>
  );
}