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

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

export default function RowExpand({ record }: RowExpandProps) {
  const [isOpen, setIsOpen] = useState(false);
  // Controls the state of the collapsible internal engine metrics layout (hidden by default)
  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 Center Block
  const dateStr = new Date(record.timestamp).toISOString();

  return (
    <div 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 last:border-b-0">
      {/* Primary Feed Layout (Uncollapsed Row View) */}
      <div
        className="px-6 py-3.5 flex items-center justify-between cursor-pointer text-xs font-mono select-none"
        onClick={() => setIsOpen(!isOpen)}
      >
        {/* Left Block: Namespace badge and 32-byte key/string identifier */}
        <div className="flex items-center gap-3 w-1/3 min-w-[200px] truncate">
          <span className="text-zinc-500 dark:text-zinc-400 font-mono text-[11px] font-semibold shrink-0  tracking-wider">
            Key:
          </span>
          <span className="text-zinc-900 dark:text-zinc-100 font-medium truncate ">
            {record.key}
          </span>
        </div>

        {/* Center Block: ISO-standard UTC timestamp representation */}
        <div className="text-center text-zinc-500 dark:text-zinc-400 w-1/4 shrink-0 font-mono text-[11px] tracking-tight tabular-nums">
          {dateStr}
        </div>

        {/* Right Block: Inline, truncated one-line view of the raw payload value & chevron toggle */}
        <div className="flex items-center justify-end gap-3 w-5/12 min-w-[250px] truncate text-right">
          <span className="text-zinc-400 dark:text-zinc-500 truncate text-[11px] font-medium font-mono">
            {record.flags & 0x02
              ? "TOMBSTONE"
              : formattedValue.replace(/\s+/g, " ").trim().substring(0, 50) +
                (formattedValue.length > 50 ? "..." : "")}
          </span>
          <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>
        </div>
      </div>

      {/* Expanded Row View */}
      {isOpen && (
        <div className="px-6 pb-5 pt-3 border-t border-zinc-200/40 dark:border-zinc-800/30 bg-zinc-50/20 dark:bg-zinc-950/20 space-y-4">
          {/* Collapsible Accordion: Engine Metrics / System View (hidden by default) */}
          <div className="rounded-lg border border-zinc-200/60 dark:border-zinc-800/40 bg-zinc-100 dark:bg-zinc-900 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 dark:text-accent 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 (Always Visible when Row is Open) */}
          <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">
              <CodeBlock language="liven" code={highlightedHtml} />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
