"use client";

import { Copy, Download, Check, Terminal } from "lucide-react";

export interface GeneratedCHeaderProps {
  code: string | null;
  loading?: boolean;
  error?: string;
  onCopy?: () => void;
  onDownload?: () => void;
  copied?: boolean;
  title?: string;
  className?: string;
}

export default function GeneratedCHeader({
  code,
  loading = false,
  error = "",
  onCopy,
  onDownload,
  copied = false,
  title = "Generated C Header",
  className = "",
}: GeneratedCHeaderProps) {
  const crc32Hex = code
    ? Array.from(code)
        .reduce((h, c) => Math.imul(31, h) + c.charCodeAt(0) | 0, 0)
        .toString(16)
        .toUpperCase()
        .padStart(8, "0")
        .slice(-8)
    : null;

  return (
    <div className={`bg-canvas-cream flex flex-col h-full min-h-0 justify-between overflow-hidden ${className}`}>
      {/* Header Bar */}
      <div className="h-13 px-4 sm:px-5 border-b-2 border-ink bg-white flex justify-between items-center gap-3 shrink-0">
        <div className="flex items-center gap-2 min-w-0">
          <h2 className="text-[14px] font-bold tracking-wider uppercase truncate">{title}</h2>
          {code && (
            <span className="hidden xl:inline-block text-[10px] font-mono font-bold text-slate uppercase bg-canvas-cream border border-ink/30 px-2 py-0.5 shrink-0">
              {(code.length / 1024).toFixed(1)} KB · {code.split("\n").length} Lines
            </span>
          )}
        </div>
        {code && (
          <div className="flex items-center gap-2 shrink-0 pr-1">
            {onCopy && (
              <button
                type="button"
                onClick={onCopy}
                className="btn-tactile inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border-2 border-ink text-ink text-[11px] font-bold uppercase tracking-wider hover:bg-canvas-cream transition-colors cursor-pointer"
              >
                {copied ? <Check size={13} className="text-emerald-600" /> : <Copy size={13} />}
                {copied ? "Copied" : "Copy"}
              </button>
            )}
            {onDownload && (
              <button
                type="button"
                onClick={onDownload}
                className="btn-tactile inline-flex items-center gap-1.5 px-3 py-1.5 bg-ink border-2 border-ink text-white text-[11px] font-bold uppercase tracking-wider hover:bg-hazard hover:border-hazard transition-colors cursor-pointer"
              >
                <Download size={13} />
                Download
              </button>
            )}
          </div>
        )}
      </div>

      {/* Code Viewport */}
      <div className="flex-1 min-h-0 flex flex-col bg-white overflow-hidden relative">
        {error ? (
          <div className="flex-1 flex flex-col items-center justify-center text-hazard font-bold text-[13px] uppercase p-6 text-center gap-2">
            <span className="tech-tag-hazard">TRANSPILATION ERROR</span>
            <span>{error}</span>
          </div>
        ) : loading ? (
          <div className="flex-1 flex flex-col items-center justify-center text-slate text-[13px] font-bold uppercase tracking-wider gap-3 p-6">
            <div className="w-8 h-8 border-2 border-hazard border-t-transparent animate-spin" />
            <div className="text-ink font-mono font-bold">Transpiling AST to C99...</div>
            <div className="text-[10px] text-slate font-mono">Synthesizing zero-malloc ABI & memory buffers</div>
          </div>
        ) : code ? (
          <div className="flex-1 min-h-0 overflow-auto p-4 sm:p-5 select-text">
            <pre suppressHydrationWarning className="text-[12px] font-mono text-ink leading-[1.6] whitespace-pre" tabIndex={0}>
              {code}
            </pre>
          </div>
        ) : (
          <div className="flex-1 flex flex-col items-center justify-center p-8 text-center gap-4 bg-canvas-cream/40">
            <div className="w-12 h-12 border-2 border-ink flex items-center justify-center bg-white shadow-[2px_2px_0px_#141413]">
              <Terminal size={22} className="text-ink" />
            </div>
            <div className="flex flex-col gap-1.5 max-w-sm">
              <span className="text-[13px] font-black uppercase tracking-wider text-ink">
                STANDBY // AWAITING COMPILATION
              </span>
              <p className="text-[11px] font-mono uppercase text-slate leading-relaxed">
                Target configuration staged. Press <span className="text-hazard font-bold">[COMPILE C HEADER]</span> to transpile AST decision logic into bare-metal C99.
              </p>
            </div>
            <div className="tech-tag text-[10px] uppercase">
              STATUS: AWAITING_TRIGGER · 0 BYTES EMITTED
            </div>
          </div>
        )}

        {/* Status Bar at Bottom */}
        <div className="border-t-2 border-ink px-4 py-2 bg-canvas-cream flex justify-between items-center text-[10px] font-bold tracking-[0.12em] text-slate uppercase flex-wrap gap-2 shrink-0">
          {code ? (
            <>
              <span>CRC32: 0x{crc32Hex}</span>
              <span className="text-ink">Zero Dynamic Heap Allocation</span>
            </>
          ) : (
            <>
              <span>ABI: INT PREDICT(CONST FLOAT*)</span>
              <span className="text-hazard font-bold">READY TO COMPILE</span>
            </>
          )}
        </div>
      </div>
    </div>
  );
}