"use client";

import { useState, useEffect } from "react";
import ToolLayout from "@/components/ToolLayout";

// Pure JavaScript MD5 Implementation (RFC 1321)
function md5(string: string): string {
  function add32(a: number, b: number): number {
    return (a + b) & 0xffffffff;
  }

  function cmn(q: number, a: number, b: number, x: number, s: number, t: number): number {
    a = add32(add32(a, q), add32(x, t));
    return add32((a << s) | (a >>> (32 - s)), b);
  }

  function ff(a: number, b: number, c: number, d: number, x: number, s: number, t: number): number {
    return cmn((b & c) | (~b & d), a, b, x, s, t);
  }

  function gg(a: number, b: number, c: number, d: number, x: number, s: number, t: number): number {
    return cmn((b & d) | (c & ~d), a, b, x, s, t);
  }

  function hh(a: number, b: number, c: number, d: number, x: number, s: number, t: number): number {
    return cmn(b ^ c ^ d, a, b, x, s, t);
  }

  function ii(a: number, b: number, c: number, d: number, x: number, s: number, t: number): number {
    return cmn(c ^ (b | ~d), a, b, x, s, t);
  }

  function md5cycle(x: number[], k: number[]) {
    let a = x[0],
      b = x[1],
      c = x[2],
      d = x[3];

    a = ff(a, b, c, d, k[0], 7, -680876936);
    d = ff(d, a, b, c, k[1], 12, -389564586);
    c = ff(c, d, a, b, k[2], 17, 606105819);
    b = ff(b, c, d, a, k[3], 22, -1044525330);
    a = ff(a, b, c, d, k[4], 7, -176418897);
    d = ff(d, a, b, c, k[5], 12, 1200080426);
    c = ff(c, d, a, b, k[6], 17, -1473231341);
    b = ff(b, c, d, a, k[7], 22, -45705983);
    a = ff(a, b, c, d, k[8], 7, 1770035416);
    d = ff(d, a, b, c, k[9], 12, -1958414417);
    c = ff(c, d, a, b, k[10], 17, -42063);
    b = ff(b, c, d, a, k[11], 22, -1990404162);
    a = ff(a, b, c, d, k[12], 7, 1804603682);
    d = ff(d, a, b, c, k[13], 12, -40341101);
    c = ff(c, d, a, b, k[14], 17, -1502002290);
    b = ff(b, c, d, a, k[15], 22, 1236535329);

    a = gg(a, b, c, d, k[1], 5, -165796510);
    d = gg(d, a, b, c, k[6], 9, -1069501632);
    c = gg(c, d, a, b, k[11], 14, 643717713);
    b = gg(b, c, d, a, k[0], 20, -373897302);
    a = gg(a, b, c, d, k[5], 5, -701558691);
    d = gg(d, a, b, c, k[10], 9, 38016083);
    c = gg(c, d, a, b, k[15], 14, -660478335);
    b = gg(b, c, d, a, k[4], 20, -405537848);
    a = gg(a, b, c, d, k[9], 5, 568446438);
    d = gg(d, a, b, c, k[14], 9, -1019803690);
    c = gg(c, d, a, b, k[3], 14, -187363961);
    b = gg(b, c, d, a, k[8], 20, 1163531501);
    a = gg(a, b, c, d, k[13], 5, -1444681467);
    d = gg(d, a, b, c, k[2], 9, -51403784);
    c = gg(c, d, a, b, k[7], 14, 1735328473);
    b = gg(b, c, d, a, k[12], 20, -1926607734);

    a = hh(a, b, c, d, k[5], 4, -378558);
    d = hh(d, a, b, c, k[8], 11, -2022574463);
    c = hh(d, a, b, c, k[11], 16, 1839030562);
    b = hh(b, c, d, a, k[14], 23, -35309556);
    a = hh(a, b, c, d, k[1], 4, -1530992060);
    d = hh(d, a, b, c, k[4], 11, 1272893353);
    c = hh(c, d, a, b, k[7], 16, -155497632);
    b = hh(b, c, d, a, k[10], 23, -1094730640);
    a = hh(a, b, c, d, k[13], 4, 681279174);
    d = hh(d, a, b, c, k[0], 11, -358537222);
    c = hh(c, d, a, b, k[3], 16, -722521979);
    b = hh(b, c, d, a, k[6], 23, 76029189);
    a = hh(a, b, c, d, k[9], 4, -640364487);
    d = hh(d, a, b, c, k[12], 11, -421815835);
    c = hh(c, d, a, b, k[15], 16, 530742520);
    b = hh(b, c, d, a, k[2], 23, -995338651);

    a = ii(a, b, c, d, k[0], 6, -198630844);
    d = ii(d, a, b, c, k[7], 10, 1126891415);
    c = ii(c, d, a, b, k[14], 15, -1416354905);
    b = ii(b, c, d, a, k[5], 21, -57434055);
    a = ii(a, b, c, d, k[12], 6, 1700485571);
    d = ii(d, a, b, c, k[3], 10, -1894986606);
    c = ii(c, d, a, b, k[10], 15, -1051523);
    b = ii(b, c, d, a, k[1], 21, -2054922799);
    a = ii(a, b, c, d, k[8], 6, 1873313359);
    d = ii(d, a, b, c, k[15], 10, -30611744);
    c = ii(c, d, a, b, k[6], 15, -1560198380);
    b = ii(b, c, d, a, k[13], 21, 1309151649);
    a = ii(a, b, c, d, k[4], 6, -145523070);
    d = ii(d, a, b, c, k[11], 10, -1120210379);
    c = ii(c, d, a, b, k[2], 15, 718787259);
    b = ii(b, c, d, a, k[9], 21, -343485551);

    x[0] = add32(a, x[0]);
    x[1] = add32(b, x[1]);
    x[2] = add32(c, x[2]);
    x[3] = add32(d, x[3]);
  }

  const utf8 = new TextEncoder().encode(string);
  const n = utf8.length;
  const state = [1732584193, -271733879, -1732584194, 271733878];

  let i = 0;
  for (i = 64; i <= n; i += 64) {
    const blk: number[] = [];
    for (let j = 0; j < 64; j += 4) {
      const idx = i - 64 + j;
      blk[j >> 2] =
        utf8[idx] | (utf8[idx + 1] << 8) | (utf8[idx + 2] << 16) | (utf8[idx + 3] << 24);
    }
    md5cycle(state, blk);
  }

  const tail = utf8.slice(i - 64);
  const tailBlk: number[] = new Array(16).fill(0);
  for (let j = 0; j < tail.length; j++) {
    tailBlk[j >> 2] |= tail[j] << ((j % 4) << 3);
  }
  tailBlk[tail.length >> 2] |= 0x80 << ((tail.length % 4) << 3);

  if (tail.length > 55) {
    md5cycle(state, tailBlk);
    for (let j = 0; j < 16; j++) tailBlk[j] = 0;
  }

  const bitLen = n * 8;
  tailBlk[14] = bitLen & 0xffffffff;
  tailBlk[15] = Math.floor(bitLen / 0x100000000);
  md5cycle(state, tailBlk);

  const hex_chr = "0123456789abcdef";
  let result = "";
  for (let j = 0; j < 4; j++) {
    const val = state[j];
    for (let k = 0; k <= 3; k++) {
      result += hex_chr[(val >> (k * 8 + 4)) & 0x0f] + hex_chr[(val >> (k * 8)) & 0x0f];
    }
  }

  return result;
}

interface HashResult {
  algorithm: string;
  name: string;
  bitLength: number;
  hash: string;
  securityNote: string;
}

export default function HashGeneratorPage() {
  const [inputText, setInputText] = useState<string>("Hello, DevToolbox!");
  const [uppercase, setUppercase] = useState<boolean>(false);
  const [hashes, setHashes] = useState<HashResult[]>([]);
  const [copiedKey, setCopiedKey] = useState<string | null>(null);
  const [copiedAll, setCopiedAll] = useState<boolean>(false);

  useEffect(() => {
    let isCancelled = false;

    async function runCompute() {
      const encoder = new TextEncoder();
      const data = encoder.encode(inputText);

      const md5Hash = md5(inputText);

      const getSubtleHash = async (algo: string): Promise<string> => {
        try {
          const buffer = await crypto.subtle.digest(algo, data);
          const hashArray = Array.from(new Uint8Array(buffer));
          return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
        } catch (err) {
          console.error(`Failed to calculate ${algo}:`, err);
          return "";
        }
      };

      const [sha1Hash, sha256Hash, sha384Hash, sha512Hash] = await Promise.all([
        getSubtleHash("SHA-1"),
        getSubtleHash("SHA-256"),
        getSubtleHash("SHA-384"),
        getSubtleHash("SHA-512"),
      ]);

      if (!isCancelled) {
        setHashes([
          {
            algorithm: "MD5",
            name: "MD5 (Message Digest 5)",
            bitLength: 128,
            hash: md5Hash,
            securityNote: "Legacy / Checksums only (vulnerable to collisions)",
          },
          {
            algorithm: "SHA-1",
            name: "SHA-1 (Secure Hash Algorithm 1)",
            bitLength: 160,
            hash: sha1Hash,
            securityNote: "Legacy (Git commits, legacy checksums)",
          },
          {
            algorithm: "SHA-256",
            name: "SHA-256 (SHA-2 Family)",
            bitLength: 256,
            hash: sha256Hash,
            securityNote: "Industry Standard (High security, SSL, Bitcoin)",
          },
          {
            algorithm: "SHA-384",
            name: "SHA-384 (SHA-2 Family)",
            bitLength: 384,
            hash: sha384Hash,
            securityNote: "High Security (Government & enterprise grade)",
          },
          {
            algorithm: "SHA-512",
            name: "SHA-512 (SHA-2 Family)",
            bitLength: 512,
            hash: sha512Hash,
            securityNote: "Maximum Security (64-bit optimized systems)",
          },
        ]);
      }
    }

    runCompute();

    return () => {
      isCancelled = true;
    };
  }, [inputText]);

  const copyHash = async (hashValue: string, key: string) => {
    const formatted = uppercase ? hashValue.toUpperCase() : hashValue.toLowerCase();
    try {
      await navigator.clipboard.writeText(formatted);
      setCopiedKey(key);
      setTimeout(() => setCopiedKey(null), 2000);
    } catch (err) {
      console.error("Failed to copy hash: ", err);
    }
  };

  const copyAllHashes = async () => {
    const allFormatted = hashes
      .map((h) => {
        const val = uppercase ? h.hash.toUpperCase() : h.hash.toLowerCase();
        return `${h.algorithm}: ${val}`;
      })
      .join("\n");

    try {
      await navigator.clipboard.writeText(allFormatted);
      setCopiedAll(true);
      setTimeout(() => setCopiedAll(false), 2000);
    } catch (err) {
      console.error("Failed to copy all hashes: ", err);
    }
  };

  const sampleTexts = [
    { label: "Hello World", text: "Hello, world!" },
    { label: "Password", text: "correct horse battery staple" },
    { label: "Empty String", text: "" },
    { label: "Quick Fox", text: "The quick brown fox jumps over the lazy dog" },
  ];

  const byteLength = new TextEncoder().encode(inputText).length;

  return (
    <ToolLayout
      title="Hash Generator"
      description="Compute MD5, SHA-1, SHA-256, SHA-384, and SHA-512 cryptographic message digests in real-time with zero server latency."
    >
      <div className="space-y-6">
        {/* Input Section */}
        <div>
          <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
            <label
              htmlFor="hash-input"
              className="text-xs font-semibold uppercase tracking-wider text-gray-400"
            >
              Input Text
            </label>
            <div className="flex items-center gap-3 text-xs text-gray-500">
              <span>{inputText.length} characters</span>
              <span>•</span>
              <span>{byteLength} UTF-8 bytes</span>
            </div>
          </div>

          <textarea
            id="hash-input"
            rows={4}
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            placeholder="Type or paste text to generate cryptographic hashes..."
            className="w-full  border border-[#1a1a1a] bg-[#0a0a0a] p-3 font-mono text-sm text-gray-200 shadow-inner focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-900/20"
          />

          {/* Quick Presets and Clear */}
          <div className="mt-2.5 flex flex-wrap items-center justify-between gap-2">
            <div className="flex flex-wrap items-center gap-1.5">
              <span className="text-xs text-gray-500">Samples:</span>
              {sampleTexts.map((sample) => (
                <button
                  key={sample.label}
                  type="button"
                  onClick={() => setInputText(sample.text)}
                  className=" bg-[#111] px-2 py-1 text-xs font-medium text-gray-400 hover:bg-[#1a1a1a]"
                >
                  {sample.label}
                </button>
              ))}
            </div>

            {inputText && (
              <button
                type="button"
                onClick={() => setInputText("")}
                className="text-xs font-medium text-red-400 hover:text-red-400"
              >
                Clear input
              </button>
            )}
          </div>
        </div>

        {/* Hashes Section Toolbar */}
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#1a1a1a] pb-3">
          <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-400">
            Computed Hashes
          </h2>

          <div className="flex flex-wrap items-center gap-3">
            <label className="inline-flex cursor-pointer items-center gap-2 text-xs font-medium text-gray-400">
              <input
                type="checkbox"
                checked={uppercase}
                onChange={(e) => setUppercase(e.target.checked)}
                className="h-4 w-4 border-[#1a1a1a] text-blue-600 focus:ring-blue-900"
              />
              <span>UPPERCASE HEX</span>
            </label>

            <button
              type="button"
              onClick={copyAllHashes}
              className={`inline-flex items-center gap-1.5  px-3 py-1.5 text-xs font-medium transition-colors ${
                copiedAll
                  ? "bg-green-600 text-white"
                  : "bg-[#111] text-gray-400 hover:bg-[#1a1a1a]"
              }`}
            >
              {copiedAll ? (
                <>
                  <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                  All Copied!
                </>
              ) : (
                <>
                  <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                    />
                  </svg>
                  Copy All Hashes
                </>
              )}
            </button>
          </div>
        </div>

        {/* Hashes List */}
        <div className="space-y-4">
          {hashes.map((item) => {
            const displayHash = uppercase ? item.hash.toUpperCase() : item.hash.toLowerCase();
            const isCopied = copiedKey === item.algorithm;

            return (
              <div
                key={item.algorithm}
                className=" border border-[#1a1a1a] bg-black/50 p-4 transition-all hover:border-[#1a1a1a]"
              >
                <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                  <div className="flex items-center gap-2">
                    <span className="font-bold text-gray-200">
                      {item.algorithm}
                    </span>
                    <span className="rounded bg-[#1a1a1a] px-1.5 py-0.5 text-[10px] font-semibold text-gray-400">
                      {item.bitLength}-bit ({item.hash.length} chars)
                    </span>
                  </div>
                  <span className="text-xs text-gray-500">
                    {item.securityNote}
                  </span>
                </div>

                <div className="flex items-center gap-2">
                  <div className="relative flex-1 overflow-hidden  border border-[#1a1a1a] bg-[#0a0a0a] p-2.5">
                    <p className="select-all break-all font-mono text-xs font-medium text-gray-300 sm:text-sm">
                      {displayHash || "—"}
                    </p>
                  </div>

                  <button
                    type="button"
                    onClick={() => copyHash(item.hash, item.algorithm)}
                    aria-label={`Copy ${item.algorithm} hash`}
                    className={`flex shrink-0 items-center gap-1.5  px-3 py-2 text-xs font-medium transition-all ${
                      isCopied
                        ? "bg-green-600 text-white"
                        : "bg-blue-600 text-white hover:bg-blue-700 active:scale-95"
                    }`}
                  >
                    {isCopied ? (
                      <>
                        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                        Copied
                      </>
                    ) : (
                      <>
                        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                          />
                        </svg>
                        Copy
                      </>
                    )}
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        {/* Educational / Comparison Guide */}
        <div className=" border border-gray-100 bg-black/80 p-4 text-xs text-gray-500">
          <h4 className="mb-2 font-semibold text-gray-300">
            About Cryptographic Hashes
          </h4>
          <p className="leading-relaxed">
            A cryptographic hash function is a one-way deterministic mathematical algorithm that maps arbitrary-size data to a fixed-size string. Hashes are widely used for data integrity verification, password storage with salt, digital signatures, and content-addressable storage systems.
          </p>
        </div>
      </div>
    </ToolLayout>
  );
}