import { useCallback, useEffect, useState } from "react"
import * as Tabs from "@radix-ui/react-tabs"
import {
  Activity,
  AlertTriangle,
  Info,
  CheckCircle2,
  ChevronDown,
  ChevronUp,
  X,
} from "lucide-react"
import type { LucideIcon } from "lucide-react"
import { MetricsVisualizer } from "./MetricsVisualizer"
import TraceVisualization from "./TraceVisualization"
import { IssuesVisualizer } from "./IssuesVisualizer"
import { SetupPanel } from "./SetupPanel"
import { SearchAndWatcher } from "./SearchAndWatcher"
import { RumSessionsVisualizer } from "./RumSessionsVisualizer"
import { ViewErrorBoundary } from "./ViewErrorBoundary"
import { useObservabilityData } from "../hooks/useObservabilityData"
import { useIssues } from "../hooks/useIssues"
import { useStatsAvailability } from "../hooks/useStats"
import { TrendsVisualizer } from "./TrendsVisualizer"
import { authFetch } from "../lib/auth"
import type { Issue, LogEntry, OtelAttribute } from "../lib/types"
import { formatAttributeValue, getServicePalette, getServiceName } from "../lib/otel-utils"
import { KeyValue } from "./common/DetailField"
import { TelemetryFilters } from "./TelemetryFilters"
import { PatternsVisualizer } from "./PatternsVisualizer"
import { RolloutsVisualizer } from "./RolloutsVisualizer"
import { SourceIpsVisualizer } from "./SourceIpsVisualizer"
import { CspReportsVisualizer } from "./CspReportsVisualizer"
import { TodosVisualizer } from "./TodosVisualizer"


type SeverityMeta = {
  baseLabel: string
  bar: string
  badge: string
  ring: string
  icon: LucideIcon
}

const severityStyles: Record<string, SeverityMeta> = {
  ERROR: {
    baseLabel: "Error",
    bar: "bg-ds-critical",
    badge: "bg-ds-critical-bg text-ds-critical",
    ring: "ring-ds-critical/40",
    icon: AlertTriangle,
  },
  WARN: {
    baseLabel: "Warning",
    bar: "bg-ds-warn",
    badge: "bg-ds-warn-bg text-ds-warn",
    ring: "ring-ds-warn/40",
    icon: AlertTriangle,
  },
  INFO: {
    baseLabel: "Info",
    bar: "bg-ds-accent",
    badge: "bg-ds-accent-bg text-ds-accent",
    ring: "ring-ds-accent/40",
    icon: Info,
  },
  DEBUG: {
    baseLabel: "Debug",
    bar: "bg-ds-ok",
    badge: "bg-ds-ok/15 text-ds-ok",
    ring: "ring-ds-ok/40",
    icon: CheckCircle2,
  },
}

const fallbackSeverity: SeverityMeta = {
  baseLabel: "Log",
  bar: "bg-ds-line-strong",
  badge: "bg-ds-surface-2 text-ds-text-2",
  ring: "ring-ds-line-strong",
  icon: Info,
}

const getSeverityPresentation = (
  severityText?: string,
  severityNumber?: number,
) => {
  if (severityText) {
    const normalized = severityText.toUpperCase()
    if (severityStyles[normalized]) {
      const meta = severityStyles[normalized]
      return { ...meta, display: meta.baseLabel }
    }
    return { ...fallbackSeverity, display: severityText }
  }

  if (severityNumber !== undefined) {
    if (severityNumber >= 17) {
      const meta = severityStyles.ERROR
      return { ...meta, display: meta.baseLabel }
    }
    if (severityNumber >= 13) {
      const meta = severityStyles.WARN
      return { ...meta, display: meta.baseLabel }
    }
    if (severityNumber >= 9) {
      const meta = severityStyles.INFO
      return { ...meta, display: meta.baseLabel }
    }
    const meta = severityStyles.DEBUG
    return { ...meta, display: meta.baseLabel }
  }

  return { ...fallbackSeverity, display: fallbackSeverity.baseLabel }
}

// tabItems moved inside component to access live data

export const LogEntryView = ({ log }: { log: LogEntry }) => {
  const { setActiveTraceId, setActiveSpanId, setActiveTab } = useObservabilityData()
  const [expandedId, setExpandedId] = useState<string | null>(null)

  const logRecords = (log.scopeLogs ?? []).flatMap((scopeLog) =>
    (scopeLog.logRecords ?? []).map((record) => ({
      ...record,
      scope: scopeLog.scope?.name,
      resourceAttributes: log.resource?.attributes ?? [],
    })),
  )

  const getRecordServiceName = (recordAttributes: OtelAttribute[]) => {
    return getServiceName(log.resource?.attributes ?? [], recordAttributes)
  }

  const navigateToSpan = (traceId: string, spanId?: string) => {
    setActiveTraceId(traceId)
    if (spanId) setActiveSpanId(spanId)
    setActiveTab("tab1")
  }

  const formatTimestamp = (timeUnixNano: string) => {
    const timestamp = (parseInt(timeUnixNano ?? "0") || 0) / 1e9
    const date = new Date(timestamp * 1000)
    return date.toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3 })
  }

  if (logRecords.length === 0) {
    return null
  }

  return (
    <div className="flex flex-col gap-1.5">
      {logRecords.map((record) => {
        const severity = getSeverityPresentation(
          record.severityText,
          record.severityNumber,
        )
        const bodyMessage = record.body?.stringValue ?? "(no body)"
        const recordKey = record.uid
        const isExpanded = expandedId === recordKey

        return (
          <div
            key={recordKey}
            className="group relative flex flex-col overflow-hidden rounded-xl border border-ds-line bg-ds-surface-2 transition-all hover:border-ds-line hover:bg-ds-surface-2"
          >
            {/* The Main Log Row */}
            <div
              onClick={() => setExpandedId(isExpanded ? null : recordKey)}
              className="flex cursor-pointer flex-wrap items-center gap-x-4 gap-y-2 p-2.5 font-mono text-[12px]"
            >
              <div className={`absolute left-0 top-0 bottom-0 w-1 ${severity.bar} opacity-40 transition-opacity group-hover:opacity-100`} />

              {/* Timestamp */}
              <span className="shrink-0 text-ds-text-3 whitespace-nowrap ml-1">
                {formatTimestamp(record.timeUnixNano)}
              </span>

              {/* Service Badge */}
                  {(() => {
                    const sName = getRecordServiceName(record.attributes ?? [])
                const palette = getServicePalette(sName)
                return (
                  <span className={`shrink-0 rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${palette.bg} ${palette.text} ${palette.border} border`}>
                    {sName}
                  </span>
                )
              })()}

              {/* Severity Badge */}
              <span className={`shrink-0 rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${severity.badge}`}>
                {severity.display}
              </span>

              {/* Log Message */}
              <span className="flex-1 min-w-[300px] break-all text-ds-text">
                {bodyMessage}
              </span>

              {/* Action Icons */}
              <div className="flex items-center gap-2">
                {record.traceId && (
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      navigateToSpan(record.traceId!, record.spanId)
                    }}
                    className="group/trace flex items-center gap-1.5 rounded-full bg-ds-accent-bg border border-ds-accent/20 px-2.5 py-0.5 text-[10px] font-bold text-ds-accent hover:bg-ds-accent-bg hover:border-ds-accent/30 transition-all"
                  >
                    <Activity className="h-2.5 w-2.5 group-hover/trace:animate-pulse" />
                    TRACE:{record.traceId.slice(0, 6)}
                  </button>
                )}
                {isExpanded ? <ChevronUp className="h-3 w-3 text-ds-text-3" /> : <ChevronDown className="h-3 w-3 text-ds-text-3" />}
              </div>
            </div>

            {/* Expansion Content */}
            {isExpanded && (
              <div className="border-t border-ds-line bg-ds-surface-2 p-4 text-[12px]">
                <div className="grid gap-6 md:grid-cols-2">
                  {(record.attributes ?? []).length > 0 && (
                    <div className="space-y-2">
                      <p className="text-[10px] font-bold uppercase tracking-widest text-ds-text-3">Attributes</p>
                      <div className="space-y-1">
                        {(record.attributes ?? []).map(attr => (
                          <KeyValue key={attr.key} name={attr.key} value={formatAttributeValue(attr.value)} />
                        ))}
                      </div>
                    </div>
                  )}
                  {(record.resourceAttributes ?? []).length > 0 && (
                    <div className="space-y-2">
                      <p className="text-[10px] font-bold uppercase tracking-widest text-ds-text-3">Resource</p>
                      <div className="space-y-1">
                        {(record.resourceAttributes ?? []).map(attr => (
                          <KeyValue key={attr.key} name={attr.key} value={formatAttributeValue(attr.value)} />
                        ))}
                      </div>
                    </div>
                  )}
                </div>
                <div className="mt-4 pt-4 border-t border-ds-line flex flex-wrap items-center justify-between gap-4">
                  <div className="flex gap-4 text-[10px] text-ds-text-3">
                    <span>Scope: {record.scope || "unknown"}</span>
                    {record.spanId && <span>Span ID: {record.spanId}</span>}
                    {record.traceId && <span>Trace ID: {record.traceId}</span>}
                  </div>

                  {record.traceId && (
                    <button
                      onClick={() => navigateToSpan(record.traceId!, record.spanId)}
                      className="inline-flex items-center gap-2 rounded-xl bg-ds-accent px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-ds-on-accent transition-all hover:bg-ds-accent hover:scale-[1.02] active:scale-[0.98]"
                    >
                      <Activity className="h-3 w-3" />
                      Jump to Span in Trace
                    </button>
                  )}
                </div>
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}

import { LogsVisualizer } from "./LogsVisualizer"


export const TabsComponent = () => {
  const { traces, logs, activeTab, setActiveTab } = useObservabilityData()
  const issuesState = useIssues()
  const [statusBusy, setStatusBusy] = useState(false)
  const [statusNotice, setStatusNotice] = useState<{ text: string; undo?: () => void; error?: boolean } | null>(null)
  // Trends tab only exists when the backend has ClickHouse-backed stats;
  // null while the capability check is in flight.
  const statsAvailable = useStatsAvailability()

  // Triage action: apply optimistically, PATCH, then refresh so counts and
  // badges match the server. A failure rolls back and says so; a success
  // offers Undo because the card moves into the collapsed resolved/ignored
  // group and would otherwise just vanish.
  const handleIssueStatusChange = useCallback(
    async (issue: Issue, status: string) => {
      const previous = issue.status ?? "open"
      setStatusBusy(true)
      void issuesState.patch(issue.id, { status, regressedAt: undefined })
      try {
        const res = await authFetch(`/api/issues/${issue.id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ status }),
        })
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        const verb = status === "resolved" ? "Resolved" : status === "ignored" ? "Ignored (alerts muted)" : "Reopened"
        setStatusNotice({
          text: `${verb}: ${issue.title}`,
          undo: status === "open" ? undefined : () => void handleIssueStatusChange({ ...issue, status }, previous),
        })
      } catch (err) {
        console.error("Failed to update issue status:", err)
        setStatusNotice({ text: `Couldn't update issue: ${err instanceof Error ? err.message : String(err)}`, error: true })
      } finally {
        await issuesState.refresh()
        setStatusBusy(false)
      }
    },
    [issuesState],
  )

  useEffect(() => {
    if (!statusNotice) return
    const t = setTimeout(() => setStatusNotice(null), statusNotice.error ? 8000 : 6000)
    return () => clearTimeout(t)
  }, [statusNotice])

  return (
    <div className="flex flex-col gap-6">
      <TelemetryFilters />
      <Tabs.Root
        value={activeTab}
        onValueChange={setActiveTab}
        className="flex flex-col gap-4"
      >
        <Tabs.Content
          className="outline-none py-2"
          value="tab0"
        >
          {activeTab === "tab0" && (
            <ViewErrorBoundary>
              <IssuesVisualizer
                issues={issuesState.issues}
                loading={issuesState.loading}
                error={issuesState.error}
                refresh={issuesState.refresh}
                onStatusChange={handleIssueStatusChange}
                statusBusy={statusBusy}
              />
            </ViewErrorBoundary>
          )}
        </Tabs.Content>
        <Tabs.Content
          className="outline-none py-2"
          value="tab1"
        >
          {activeTab === "tab1" && <ViewErrorBoundary><TraceVisualization traces={traces} /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content className="outline-none py-2" value="tab8">
          {activeTab === "tab8" && <ViewErrorBoundary><PatternsVisualizer /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content className="outline-none py-2" value="tab9">
          {activeTab === "tab9" && <ViewErrorBoundary><RolloutsVisualizer /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content className="outline-none py-2" value="tab10">
          {activeTab === "tab10" && <ViewErrorBoundary><SourceIpsVisualizer /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content className="outline-none py-2" value="tab12">
          {activeTab === "tab12" && <ViewErrorBoundary><CspReportsVisualizer /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content className="outline-none py-2" value="tab11">
          {activeTab === "tab11" && <ViewErrorBoundary><TodosVisualizer /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content
          className="outline-none py-2"
          value="tab2"
        >
          {activeTab === "tab2" && <ViewErrorBoundary><MetricsVisualizer /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content
          className="outline-none py-2"
          value="tab3"
        >
          {activeTab === "tab3" && <ViewErrorBoundary><LogsVisualizer logs={logs} /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content
          className="outline-none py-2"
          value="tab7"
        >
          {activeTab === "tab7" && <ViewErrorBoundary><RumSessionsVisualizer /></ViewErrorBoundary>}
        </Tabs.Content>
        <Tabs.Content
          className="outline-none py-2"
          value="tab4"
        >
          {activeTab === "tab4" && <ViewErrorBoundary><SetupPanel /></ViewErrorBoundary>}
        </Tabs.Content>
        {statsAvailable && (
          <Tabs.Content
            className="outline-none py-2"
            value="tab5"
          >
            {activeTab === "tab5" && <ViewErrorBoundary><TrendsVisualizer /></ViewErrorBoundary>}
          </Tabs.Content>
        )}
        <Tabs.Content
          className="outline-none py-2"
          value="tab6"
        >
          {activeTab === "tab6" && <ViewErrorBoundary><SearchAndWatcher /></ViewErrorBoundary>}
        </Tabs.Content>
      </Tabs.Root>
      {statusNotice && (
        <div
          role="status"
          className={`fixed bottom-10 left-1/2 z-50 flex max-w-[min(560px,calc(100vw-120px))] -translate-x-1/2 items-center gap-3 overflow-hidden rounded-2xl border bg-ds-surface/90 py-2.5 pl-2.5 pr-4 text-[13px] shadow-[0_8px_30px_-8px_rgba(0,0,0,0.45)] backdrop-blur-md animate-in fade-in slide-in-from-bottom-3 duration-300 ${
            statusNotice.error ? "border-ds-critical/30" : "border-ds-ok/25"
          }`}
        >
          <span
            className={`pointer-events-none absolute inset-x-0 top-0 h-[2px] ${
              statusNotice.error ? "bg-ds-critical/70" : "bg-ds-ok/70"
            }`}
            aria-hidden="true"
          />
          <span
            className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${
              statusNotice.error ? "bg-ds-critical-bg text-ds-critical" : "bg-ds-ok/15 text-ds-ok"
            }`}
            aria-hidden="true"
          >
            {statusNotice.error ? <AlertTriangle className="h-3.5 w-3.5" /> : <CheckCircle2 className="h-3.5 w-3.5" />}
          </span>
          <span className={`truncate ${statusNotice.error ? "text-ds-critical" : "text-ds-text"}`}>
            {statusNotice.text}
          </span>
          {statusNotice.undo && (
            <button
              type="button"
              onClick={() => {
                statusNotice.undo?.()
                setStatusNotice(null)
              }}
              className="shrink-0 rounded-full border border-ds-accent/30 bg-ds-accent-bg px-2.5 py-1 font-semibold text-ds-accent transition-colors hover:bg-ds-accent hover:text-ds-on-accent"
            >
              Undo
            </button>
          )}
          <button
            type="button"
            onClick={() => setStatusNotice(null)}
            aria-label="Dismiss"
            className="shrink-0 rounded-full p-1 text-ds-text-3 transition-colors hover:bg-ds-fill hover:text-ds-text"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </div>
      )}
    </div>
  )

}