import { useState } from "react";
import { ChevronDown, ChevronRight } from "lucide-react";
import { Record } from "../types";
import { parseStringifiedJson } from "../utils/api";
import hljs from "highlight.js";

export interface TableExpandRowProps {
  record: Record;
  resolvedTheme: "light" | "dark";
}

export default function TableExpandRow({ record }: TableExpandRowProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [isMetricsOpen, setIsMetricsOpen] = useState(false);

  let formattedValue = "";

  try {
    const parsedValue = parseStringifiedJson(record.value);
    formattedValue = JSON.stringify(parsedValue, null, 2);
  } catch {
    formattedValue = String(record.value);
  }

  // Generate gorgeous syntax-highlighted HTML for raw payload visual scan
  const highlightedHtml = (() => {
    try {
      return hljs.highlight(formattedValue, { language: "json" }).value;
    } catch {
      return formattedValue;
    }
  })();

  // Clean, ISO-standard UTC timestamp representation for the Timestamp column
  const dateStr = new Date(record.timestamp).toISOString();

  return (
    <>
      {/* Primary Table Row */}
      <tr
        onClick={() => setIsOpen(!isOpen)}
        className="transition-all hover:bg-zinc-100/50 dark:hover:bg-zinc-800/10 border-b border-zinc-200/40 dark:border-zinc-800/30 cursor-pointer text-xs font-mono select-none"
      >
        {/* Toggle Indicator Column */}
        <td className="py-2 px-4 text-center w-12 shrink-0">
          <button className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 p-0.5 shrink-0 transition-colors">
            {isOpen ? (
              <ChevronDown className="w-4 h-4" />
            ) : (
              <ChevronRight className="w-4 h-4" />
            )}
          </button>
        </td>

        {/* Sequence ID Column */}
        <td className="py-2 px-4 text-zinc-800 dark:text-zinc-200 font-bold tabular-nums tracking-tight w-24">
          #{record.sequence_id}
        </td>

        {/* Stream Name Column */}
        <td
          className="py-2 px-4 text-zinc-500 dark:text-zinc-400 font-bold  tracking-wider text-[11px] w-32 truncate max-w-[120px]"
          title={record.stream_name}
        >
          {record.stream_name}
        </td>

        {/* Key Column */}
        <td
          className="py-2 px-4 text-zinc-900 dark:text-zinc-100 font-medium truncate max-w-[160px]"
          title={record.key}
        >
          {record.key}
        </td>

        {/* Value Payload Column */}
        <td className="py-2 px-4 text-zinc-450 dark:text-zinc-500 truncate max-w-[400px]">
          {record.flags & 0x02 ? (
            <span className="text-rose-500 font-bold">TOMBSTONE</span>
          ) : (
            formattedValue.replace(/\s+/g, " ").trim().substring(0, 80) +
            (formattedValue.length > 80 ? "..." : "")
          )}
        </td>

        {/* Timestamp Column */}
        <td className="py-2 px-4 text-zinc-500 dark:text-zinc-400 font-medium tracking-tight tabular-nums w-48 shrink-0">
          {dateStr}
        </td>
      </tr>

      {/* Expanded Table Row */}
      {isOpen && (
        <tr className="bg-zinc-50/20 dark:bg-zinc-950/20 border-b border-zinc-200/40 dark:border-zinc-800/30">
          <td colSpan={6} className="py-4 px-6">
            <div className="space-y-4 text-left ">
              {/* Collapsible Accordion: Engine Metrics / System View (hidden by default) */}
              <div className="rounded-lg border border-zinc-200/60 dark:border-zinc-800/40 bg-panel-bg dark:bg-panel-bg overflow-hidden shadow-[0_1px_3px_rgba(0,0,0,0.02)] ">
                <button
                  onClick={(e) => {
                    e.stopPropagation(); // Prevent row toggling when toggling accordion
                    setIsMetricsOpen(!isMetricsOpen);
                  }}
                  className="w-full px-4 py-2.5 flex items-center justify-between text-left text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800/50 transition-colors border-b border-zinc-200/40 dark:border-zinc-800/30 outline-none"
                >
                  <span className="text-[10px] font-bold  tracking-wider flex items-center gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-zinc-400 dark:bg-zinc-500" />
                    Engine Metrics / System View
                  </span>
                  <span className="text-[10px] font-bold text-primary hover:underline">
                    {isMetricsOpen ? "Hide Metrics" : "Show Metrics"}
                  </span>
                </button>

                {isMetricsOpen && (
                  <div className="p-4 grid grid-cols-2 md:grid-cols-4 gap-4 text-xs font-mono bg-zinc-50/40 dark:bg-zinc-950/40 animate-fade-in border-t border-zinc-200/40 dark:border-zinc-800/30">
                    <div className="space-y-1">
                      <span className="block text-[9px] text-zinc-400 dark:text-zinc-500 font-bold  tracking-wider">
                        Key
                      </span>
                      <span className="font-semibold text-zinc-800 dark:text-zinc-200">
                        {record.key}
                      </span>
                    </div>

                    {/* Monotonic sequence (#Seq) */}
                    <div className="space-y-1">
                      <span className="block text-[9px] text-zinc-400 dark:text-zinc-500 font-bold  tracking-wider">
                        Monotonic Sequence
                      </span>
                      <span className="font-semibold text-zinc-800 dark:text-zinc-200">
                        Seq #{record.sequence_id}
                      </span>
                    </div>

                    {/* Physical Segment ID */}
                    <div className="space-y-1">
                      <span className="block text-[9px] text-zinc-400 dark:text-zinc-500 font-bold  tracking-wider">
                        Physical Segment ID
                      </span>
                      <span className="font-semibold text-zinc-800 dark:text-zinc-200">
                        Segment #{Math.ceil(record.sequence_id / 100000) || 1}
                      </span>
                    </div>

                    {/* Record Flags */}
                    <div className="space-y-1">
                      <span className="block text-[9px] text-zinc-400 dark:text-zinc-500 font-bold  tracking-wider">
                        Record Flags
                      </span>
                      <span className="inline-flex items-center gap-1.5 font-semibold text-zinc-800 dark:text-zinc-200">
                        <span
                          className={`w-1.5 h-1.5 rounded-full ${
                            record.flags & 0x02
                              ? "bg-rose-500"
                              : "bg-accent"
                          }`}
                        />
                        0x0{record.flags} (
                        {record.flags & 0x02 ? "Tombstoned" : "Active"})
                      </span>
                    </div>
                  </div>
                )}
              </div>

              {/* Pretty Raw Payload Preview */}
              <div className="space-y-1.5">
                <span className="block text-[9px] text-zinc-400 dark:text-zinc-500 font-bold  tracking-wider pl-1">
                  Raw Payload Document
                </span>
                <div className="relative font-mono text-xs">
                  <pre className="overflow-x-auto p-4 bg-body-bg dark:bg-body-bg rounded-xl border border-zinc-900/[0.04] dark:border-zinc-800/50 shadow-sm font-mono text-xs tabular-nums tracking-normal max-h-96 hljs">
                    <code
                      dangerouslySetInnerHTML={{ __html: highlightedHtml }}
                    />
                  </pre>
                </div>
              </div>
            </div>
          </td>
        </tr>
      )}
    </>
  );
}
