// Agent card document — ported from AgentCardDocument.tsx
import { Document, Page, View, Text } from '@react-pdf/renderer';
import { AgentCardCover } from './cover.js';
import { styles, colors } from '../styles.js';
import { getScoreHexColor } from '../scoring.js';
import type {
  AgentCardData,
  AgentCardTool,
  AgentCardKnowledgeBase,
  AgentCardLLMConfig,
  AgentCardEvalRun,
  LifecycleStage,
  V1Owner,
  ComponentScoreDetail,
} from './types.js';

interface AgentCardDocumentProps {
  data: AgentCardData;
}

// ---------------------------------------------------------------------------
// Shared helpers
// ---------------------------------------------------------------------------

function PageHeader({ title, pageNumber }: { title: string; pageNumber: number }) {
  return (
    <View style={styles.pageHeader}>
      <Text style={styles.pageTitle}>{title}</Text>
      <Text style={styles.pageNumber}>Page {pageNumber}</Text>
    </View>
  );
}

function PageFooter({ generatedDate }: { generatedDate: string }) {
  return (
    <View style={styles.footer}>
      <Text style={styles.caption}>Generated {generatedDate}</Text>
      <Text style={styles.caption}>Indemn Agent Card</Text>
    </View>
  );
}

function ComponentScoreBadge({ label, detail }: { label: string; detail?: ComponentScoreDetail }) {
  if (!detail || detail.total === 0) return null;
  const rate = detail.passed / detail.total;
  const pct = Math.round(rate * 100);
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
      <View
        style={{
          backgroundColor: `${getScoreHexColor(rate)}18`,
          paddingHorizontal: 8,
          paddingVertical: 3,
          borderRadius: 4,
        }}
      >
        <Text style={{ fontSize: 9, fontWeight: 600, color: getScoreHexColor(rate) }}>
          {label}: {pct}% ({detail.passed}/{detail.total})
        </Text>
      </View>
    </View>
  );
}

// ---------------------------------------------------------------------------
// Page 2: System Prompt
// ---------------------------------------------------------------------------

function SystemPromptPage({
  systemPrompt,
  generatedDate,
  componentScore,
}: {
  systemPrompt?: string;
  generatedDate: string;
  componentScore?: ComponentScoreDetail;
}) {
  return (
    <Page size="A4" style={styles.page}>
      <View style={styles.pageHeader}>
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
          <Text style={styles.pageTitle}>System Prompt</Text>
          <ComponentScoreBadge label="Prompt Score" detail={componentScore} />
        </View>
        <Text style={styles.pageNumber}>Page 2</Text>
      </View>

      {systemPrompt ? (
        <View
          style={{
            backgroundColor: colors.background,
            borderRadius: 6,
            padding: 16,
            flex: 1,
            marginBottom: 60,
          }}
        >
          <Text
            style={{
              fontFamily: 'Courier',
              fontSize: 9,
              lineHeight: 1.6,
              color: colors.eggplant,
            }}
          >
            {systemPrompt}
          </Text>
        </View>
      ) : (
        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
          <Text style={{ fontSize: 12, color: colors.muted }}>
            No system prompt configured
          </Text>
        </View>
      )}

      <PageFooter generatedDate={generatedDate} />
    </Page>
  );
}

// ---------------------------------------------------------------------------
// Page 3: Tools
// ---------------------------------------------------------------------------

function ToolsPage({
  tools,
  generatedDate,
  componentScore,
}: {
  tools: AgentCardTool[];
  generatedDate: string;
  componentScore?: ComponentScoreDetail;
}) {
  return (
    <Page size="A4" style={styles.page}>
      <View style={styles.pageHeader}>
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
          <Text style={styles.pageTitle}>Tools ({tools.length})</Text>
          <ComponentScoreBadge label="Function Score" detail={componentScore} />
        </View>
        <Text style={styles.pageNumber}>Page 3</Text>
      </View>

      {tools.length > 0 ? (
        <View
          style={{
            flexDirection: 'row',
            flexWrap: 'wrap',
            gap: 12,
            marginBottom: 60,
          }}
        >
          {tools.map((tool) => (
            <View
              key={tool.id}
              style={{
                width: '48%',
                backgroundColor: colors.background,
                borderRadius: 6,
                padding: 12,
              }}
            >
              <Text style={{ fontSize: 11, fontWeight: 600, color: colors.eggplant, marginBottom: 4 }}>
                {tool.name}
              </Text>
              <Text style={{ fontSize: 9, fontFamily: 'Courier', color: colors.muted, marginBottom: 4 }}>
                {tool.tool_name}
              </Text>
              {tool.description && (
                <Text style={{ fontSize: 9, color: colors.muted, lineHeight: 1.4, marginBottom: 4 }}>
                  {tool.description}
                </Text>
              )}
              <View
                style={{
                  backgroundColor: colors.white,
                  paddingHorizontal: 6,
                  paddingVertical: 2,
                  borderRadius: 3,
                  alignSelf: 'flex-start',
                }}
              >
                <Text style={{ fontSize: 8, fontWeight: 500, color: colors.iris }}>
                  {tool.type}
                </Text>
              </View>
            </View>
          ))}
        </View>
      ) : (
        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
          <Text style={{ fontSize: 12, color: colors.muted }}>
            No tools configured
          </Text>
        </View>
      )}

      <PageFooter generatedDate={generatedDate} />
    </Page>
  );
}

// ---------------------------------------------------------------------------
// Page 4: Knowledge Bases
// ---------------------------------------------------------------------------

function KnowledgeBasesPage({
  knowledgeBases,
  generatedDate,
  componentScore,
}: {
  knowledgeBases: AgentCardKnowledgeBase[];
  generatedDate: string;
  componentScore?: ComponentScoreDetail;
}) {
  return (
    <Page size="A4" style={styles.page}>
      <View style={styles.pageHeader}>
        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
          <Text style={styles.pageTitle}>Knowledge Bases ({knowledgeBases.length})</Text>
          <ComponentScoreBadge label="KB Score" detail={componentScore} />
        </View>
        <Text style={styles.pageNumber}>Page 4</Text>
      </View>

      {knowledgeBases.length > 0 ? (
        <View
          style={{
            flexDirection: 'row',
            flexWrap: 'wrap',
            gap: 12,
            marginBottom: 60,
          }}
        >
          {knowledgeBases.map((kb) => (
            <View
              key={kb.id}
              style={{
                width: '48%',
                backgroundColor: colors.background,
                borderRadius: 6,
                padding: 12,
              }}
            >
              <Text style={{ fontSize: 11, fontWeight: 600, color: colors.eggplant, marginBottom: 4 }}>
                {kb.name}
              </Text>
              <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
                <View
                  style={{
                    backgroundColor: colors.white,
                    paddingHorizontal: 6,
                    paddingVertical: 2,
                    borderRadius: 3,
                  }}
                >
                  <Text style={{ fontSize: 8, fontWeight: 500, color: colors.iris }}>
                    {kb.type}
                  </Text>
                </View>
                <Text style={{ fontSize: 9, color: colors.muted }}>
                  {kb.document_count} documents
                </Text>
              </View>
            </View>
          ))}
        </View>
      ) : (
        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
          <Text style={{ fontSize: 12, color: colors.muted }}>
            No knowledge bases linked
          </Text>
        </View>
      )}

      <PageFooter generatedDate={generatedDate} />
    </Page>
  );
}

// ---------------------------------------------------------------------------
// Page 5: LLM Configuration
// ---------------------------------------------------------------------------

function LLMConfigPage({
  llmConfig,
  generatedDate,
}: {
  llmConfig?: AgentCardLLMConfig;
  generatedDate: string;
}) {
  return (
    <Page size="A4" style={styles.page}>
      <PageHeader title="LLM Configuration" pageNumber={5} />

      {llmConfig ? (
        <View style={[styles.card, { marginBottom: 60 }]}>
          <View style={{ flexDirection: 'row', marginBottom: 12 }}>
            <View style={{ flex: 1 }}>
              <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Provider</Text>
              <Text style={{ fontSize: 12, fontWeight: 500, color: colors.eggplant }}>
                {llmConfig.provider || 'N/A'}
              </Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Model</Text>
              <Text style={{ fontSize: 12, fontWeight: 500, fontFamily: 'Courier', color: colors.eggplant }}>
                {llmConfig.model || 'N/A'}
              </Text>
            </View>
          </View>

          {llmConfig.parameters && Object.keys(llmConfig.parameters).length > 0 && (
            <View>
              <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 8 }}>Parameters</Text>
              <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
                {Object.entries(llmConfig.parameters).map(([key, value]) => (
                  <View key={key} style={{ backgroundColor: colors.white, borderRadius: 4, padding: 8, minWidth: 100 }}>
                    <Text style={{ fontSize: 9, color: colors.muted, marginBottom: 2 }}>
                      {key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}
                    </Text>
                    <Text style={{ fontSize: 11, fontFamily: 'Courier', color: colors.eggplant }}>
                      {String(value)}
                    </Text>
                  </View>
                ))}
              </View>
            </View>
          )}
        </View>
      ) : (
        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
          <Text style={{ fontSize: 12, color: colors.muted }}>
            No LLM configuration set (using defaults)
          </Text>
        </View>
      )}

      <PageFooter generatedDate={generatedDate} />
    </Page>
  );
}

// ---------------------------------------------------------------------------
// Page 6: Evaluation History
// ---------------------------------------------------------------------------

function EvaluationHistoryPage({
  runs,
  generatedDate,
}: {
  runs: AgentCardEvalRun[];
  generatedDate: string;
}) {
  const completedRuns = runs.filter(r => r.status === 'completed');
  const recentRuns = completedRuns.slice(0, 10);

  return (
    <Page size="A4" style={styles.page}>
      <PageHeader title={`Evaluation History (${completedRuns.length} runs)`} pageNumber={6} />

      {recentRuns.length > 0 ? (
        <View style={{ marginBottom: 60 }}>
          {/* Table header */}
          <View
            style={{
              flexDirection: 'row',
              backgroundColor: colors.eggplant,
              borderTopLeftRadius: 6,
              borderTopRightRadius: 6,
              paddingVertical: 8,
              paddingHorizontal: 12,
            }}
          >
            <Text style={{ flex: 2, fontSize: 9, fontWeight: 600, color: colors.white }}>Date</Text>
            <Text style={{ flex: 2, fontSize: 9, fontWeight: 600, color: colors.white }}>Model</Text>
            <Text style={{ flex: 1, fontSize: 9, fontWeight: 600, color: colors.white, textAlign: 'center' }}>Items</Text>
            <Text style={{ flex: 1.5, fontSize: 9, fontWeight: 600, color: colors.white, textAlign: 'center' }}>Criteria</Text>
            <Text style={{ flex: 1.5, fontSize: 9, fontWeight: 600, color: colors.white, textAlign: 'center' }}>Rubric</Text>
          </View>

          {/* Table rows */}
          {recentRuns.map((run, i) => {
            const date = run.completed_at || run.created_at;
            const dateStr = new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            const model = run.bot_llm_model || 'N/A';
            const criteriaStr = run.criteriaScore !== null ? `${run.criteriaScore}% (${run.criteriaPassed}/${run.criteriaTotal})` : '-';
            const rubricStr = run.rubricScore !== null ? `${run.rubricScore}% (${run.rubricRulesPassed}/${run.rubricRulesTotal})` : '-';

            return (
              <View
                key={run.run_id}
                style={{
                  flexDirection: 'row',
                  backgroundColor: i % 2 === 0 ? colors.background : colors.white,
                  paddingVertical: 7,
                  paddingHorizontal: 12,
                  ...(i === recentRuns.length - 1 ? { borderBottomLeftRadius: 6, borderBottomRightRadius: 6 } : {}),
                }}
              >
                <Text style={{ flex: 2, fontSize: 9, color: colors.eggplant }}>{dateStr}</Text>
                <Text style={{ flex: 2, fontSize: 9, fontFamily: 'Courier', color: colors.eggplant }}>{model}</Text>
                <Text style={{ flex: 1, fontSize: 9, color: colors.muted, textAlign: 'center' }}>{run.completed}/{run.total}</Text>
                <Text style={{ flex: 1.5, fontSize: 9, fontWeight: 500, color: run.criteriaScore !== null ? getScoreHexColor(run.criteriaScore / 100) : colors.muted, textAlign: 'center' }}>
                  {criteriaStr}
                </Text>
                <Text style={{ flex: 1.5, fontSize: 9, fontWeight: 500, color: run.rubricScore !== null ? getScoreHexColor(run.rubricScore / 100) : colors.muted, textAlign: 'center' }}>
                  {rubricStr}
                </Text>
              </View>
            );
          })}
        </View>
      ) : (
        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
          <Text style={{ fontSize: 12, color: colors.muted }}>
            No completed evaluation runs
          </Text>
        </View>
      )}

      <PageFooter generatedDate={generatedDate} />
    </Page>
  );
}

// ---------------------------------------------------------------------------
// Page 7: Metadata
// ---------------------------------------------------------------------------

function MetadataPage({
  botId,
  organizationId,
  lifecycle,
  owner,
  generatedDate,
}: {
  botId: string;
  organizationId?: string;
  lifecycle?: LifecycleStage;
  owner?: V1Owner;
  generatedDate: string;
}) {
  const ownerName = owner
    ? [owner.firstname, owner.lastname].filter(Boolean).join(' ') || owner.email || 'Unknown'
    : undefined;

  const lcColors: Record<string, { bg: string; text: string }> = {
    prototype: { bg: '#e5e7eb', text: '#4b5563' },
    beta: { bg: '#fef3c7', text: '#92400e' },
    published: { bg: '#d1fae5', text: '#065f46' },
  };
  const lc = lifecycle ? lcColors[lifecycle] || lcColors.prototype : null;

  return (
    <Page size="A4" style={styles.page}>
      <PageHeader title="Metadata" pageNumber={7} />

      <View style={[styles.card, { marginBottom: 60 }]}>
        {/* Row 1: Lifecycle + Owner */}
        <View style={{ flexDirection: 'row', marginBottom: 16 }}>
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Lifecycle Stage</Text>
            {lc ? (
              <View style={{ backgroundColor: lc.bg, paddingHorizontal: 8, paddingVertical: 3, borderRadius: 4, alignSelf: 'flex-start' }}>
                <Text style={{ fontSize: 10, fontWeight: 600, color: lc.text }}>
                  {lifecycle!.charAt(0).toUpperCase() + lifecycle!.slice(1)}
                </Text>
              </View>
            ) : (
              <Text style={{ fontSize: 11, color: colors.muted }}>Not set</Text>
            )}
          </View>
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Owner</Text>
            <Text style={{ fontSize: 11, color: colors.eggplant }}>
              {ownerName || 'Unassigned'}
            </Text>
            {owner?.email && ownerName !== owner.email && (
              <Text style={{ fontSize: 9, color: colors.muted }}>{owner.email}</Text>
            )}
          </View>
        </View>

        {/* Row 2: Bot ID + Org ID */}
        <View style={{ flexDirection: 'row', marginBottom: 12 }}>
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Bot ID</Text>
            <Text style={{ fontSize: 11, fontFamily: 'Courier', color: colors.eggplant }}>
              {botId}
            </Text>
          </View>
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Organization ID</Text>
            <Text style={{ fontSize: 11, fontFamily: 'Courier', color: colors.eggplant }}>
              {organizationId || 'N/A'}
            </Text>
          </View>
        </View>

        {/* Row 3: Generated date */}
        <View style={{ flexDirection: 'row' }}>
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Report Generated</Text>
            <Text style={{ fontSize: 11, color: colors.eggplant }}>{generatedDate}</Text>
          </View>
        </View>
      </View>

      <PageFooter generatedDate={generatedDate} />
    </Page>
  );
}

// ---------------------------------------------------------------------------
// Document
// ---------------------------------------------------------------------------

export function AgentCardDocument({ data }: AgentCardDocumentProps) {
  const hasEvalRuns = data.evaluationRuns && data.evaluationRuns.length > 0;

  return (
    <Document
      title={`Indemn Agent Card - ${data.name}`}
      author="Indemn Platform"
      subject={`Agent card for ${data.name}`}
    >
      {/* Page 1: Cover */}
      <AgentCardCover
        agentName={data.name}
        description={data.description}
        channels={data.channels}
        generatedDate={data.generatedDate}
        lifecycle={data.lifecycle}
        owner={data.owner}
        evaluationSummary={data.evaluationSummary}
      />

      {/* Page 2: System Prompt */}
      <SystemPromptPage
        systemPrompt={data.system_prompt}
        generatedDate={data.generatedDate}
        componentScore={data.componentScores?.prompt}
      />

      {/* Page 3: Tools */}
      <ToolsPage
        tools={data.tools}
        generatedDate={data.generatedDate}
        componentScore={data.componentScores?.function}
      />

      {/* Page 4: Knowledge Bases */}
      <KnowledgeBasesPage
        knowledgeBases={data.knowledge_bases}
        generatedDate={data.generatedDate}
        componentScore={data.componentScores?.knowledge_base}
      />

      {/* Page 5: LLM Configuration */}
      <LLMConfigPage llmConfig={data.llm_config} generatedDate={data.generatedDate} />

      {/* Page 6: Evaluation History (only if runs exist) */}
      {hasEvalRuns && (
        <EvaluationHistoryPage
          runs={data.evaluationRuns!}
          generatedDate={data.generatedDate}
        />
      )}

      {/* Page 7 (or 6 if no eval history): Metadata */}
      <MetadataPage
        botId={data.id}
        organizationId={data.organization_id}
        lifecycle={data.lifecycle}
        owner={data.owner}
        generatedDate={data.generatedDate}
      />
    </Document>
  );
}