'use client';

import {SummaryCard} from './SummaryCard';
import {KpiGridBlock} from './KpiGridBlock';
import {ChartBlock} from './ChartBlock';
import {TableBlock} from './TableBlock';
import {InsightCardsBlock} from './InsightCardsBlock';
import {ActionToolbarBlock} from './ActionToolbarBlock';
import {MessageToolbarBlock} from './MessageToolbarBlock';
import type {ReportPart} from '@/features/loyaly-ai/types/chat';

export function ResponseRenderer({
  report,
  isStreaming,
}: {
  report: ReportPart;
  isStreaming?: boolean;
}) {
  const textContent = report.summary || report.title || '';

  return (
    /**
     * `@container/report` is the fix for the squeezed-report bug, and it is
     * the whole reason the blocks below can be written once.
     *
     * The report renders inside a resizable panel (440px by default, 420px
     * minimum, draggable to 85vw) that sits inside a desktop viewport. Every
     * block underneath used to size itself with VIEWPORT breakpoints — `sm:`
     * and friends — which on any desktop are unconditionally true. So a report
     * in a 440px rail was laid out as though it had 640px+ to work with:
     * KpiGridBlock took `sm:grid-cols-3` and split ~376px of usable width into
     * three ~117px cards, of which padding ate 28px. A figure like
     * "₹12,45,600" cannot set in 89px, so it wrapped down the card.
     *
     * A container query asks the right question. `width: 100%` was never the
     * problem — the blocks always filled the panel; they were choosing their
     * COLUMN COUNT from the window instead of from the space they were given.
     * Named (`/report`) rather than anonymous so a future nested container —
     * a two-up comparison, say — cannot silently retarget these variants.
     */
    /*
     * The wrapping trio overrides Astryx's `word-break: break-word` on the
     * chat bubble (that value means `word-break: normal` + `overflow-wrap:
     * anywhere`, and `anywhere` lets break opportunities shrink an element's
     * min-content width down to a single glyph). Restating it as `normal` +
     * `break-word` keeps the useful half — one unbreakable token, a long ID
     * or URL, still breaks rather than overflowing — while making min-content
     * the longest WORD. Both properties inherit, so this covers every title,
     * cell and label below.
     *
     * What it does NOT do is protect against a collapsed ancestor, and that
     * is worth stating because it is tempting to assume otherwise. Measured
     * in a headless replica of this exact chain: with the bubble left
     * shrink-to-fit, adding `word-break: normal` here changed nothing — the
     * title still stacked one character per line, because inline-axis size
     * containment makes the report contribute ZERO to the intrinsic width no
     * matter how its text wraps. Only the definite width on the bubble (see
     * MessageBubble) prevents that. This declaration guards the different
     * case of a merely NARROW container, not a collapsed one.
     */
    <div className="@container/report space-y-4 w-full max-w-full min-w-0 my-1 whitespace-normal [word-break:normal] [overflow-wrap:break-word]">
      {/* 1. Summary / Title */}
      {report.summary ? (
        <SummaryCard
          title={report.title}
          summary={report.summary}
          isStreaming={isStreaming}
        />
      ) : null}

      {/* 2. KPI Cards Grid */}
      {report.kpis && report.kpis.length > 0 ? (
        <KpiGridBlock kpis={report.kpis} />
      ) : null}

      {/* 3. Dynamic Charts */}
      {report.charts && report.charts.length > 0 ? (
        <ChartBlock charts={report.charts} />
      ) : null}

      {/* 4. Interactive Data Tables */}
      {report.tables && report.tables.length > 0 ? (
        <TableBlock tables={report.tables} />
      ) : null}

      {/* 5. AI Insight Cards */}
      {report.insights && report.insights.length > 0 ? (
        <InsightCardsBlock insights={report.insights} />
      ) : null}

      {/* 6. Contextual Action Buttons */}
      {report.actions && report.actions.length > 0 ? (
        <ActionToolbarBlock actions={report.actions} />
      ) : null}

      {/* 7. Bottom Message Toolbar (Copy, Like/Dislike, Export, Share) */}
      {!isStreaming ? (
        <MessageToolbarBlock textToCopy={textContent} />
      ) : null}
    </div>
  );
}
