import React from "react";

function formatRedisValue(value, type) {
  if (value === null || value === undefined) return "null";
  if (type === "hash" && typeof value === "object" && !Array.isArray(value)) {
    return JSON.stringify(value, null, 2);
  }
  if (type === "zset" && Array.isArray(value)) {
    return value.map(([member, score]) => `${score}  ${member}`).join("\n");
  }
  if (Array.isArray(value)) {
    return value.map((v, i) => `[${i}] ${typeof v === "object" ? JSON.stringify(v) : v}`).join("\n");
  }
  if (typeof value === "object") {
    return JSON.stringify(value, null, 2);
  }
  return String(value);
}

function formatSize(bytes) {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1073741824) return `${(bytes / 1048576).toFixed(1)} MB`;
  return `${(bytes / 1073741824).toFixed(1)} GB`;
}

export function RedisDetailPanel({ detail, loading, onClose }) {
  if (!detail && !loading) return null;

  return (
    <div
      style={{
        width: 420,
        minWidth: 320,
        borderLeft: "1px solid var(--border)",
        background: "var(--panel)",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
        flexShrink: 0,
      }}
    >
      <div
        style={{
          padding: "12px 16px",
          borderBottom: "1px solid var(--border)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--cyan)" }}>
          {loading ? "Loading..." : detail?.key || "Key Detail"}
        </span>
        <button
          onClick={onClose}
          style={{
            background: "none",
            border: "none",
            color: "var(--text-dim)",
            cursor: "pointer",
            fontFamily: "inherit",
            fontSize: 14,
            padding: "0 4px",
            borderRadius: 3,
          }}
          onMouseEnter={(e) => { e.target.style.color = "var(--red)"; }}
          onMouseLeave={(e) => { e.target.style.color = "var(--text-dim)"; }}
        >
          x
        </button>
      </div>

      {loading && <div style={{ padding: 20, color: "var(--text-dim)", fontSize: 12 }}>Loading...</div>}

      {detail && !loading && (
        <div style={{ flex: 1, overflow: "auto", padding: 16 }}>
          <div style={{ display: "flex", gap: 12, marginBottom: 16, flexWrap: "wrap" }}>
            <div style={{ fontSize: 11 }}>
              <span style={{ color: "var(--text-dim)" }}>Type </span>
              <span style={{
                color: "var(--cyan)",
                background: "var(--cyan-bg)",
                padding: "2px 6px",
                borderRadius: 3,
                fontSize: 10,
                fontWeight: 600,
              }}>
                {detail.type}
              </span>
            </div>
            {detail.ttl !== null && detail.ttl !== undefined && (
              <div style={{ fontSize: 11 }}>
                <span style={{ color: "var(--text-dim)" }}>TTL </span>
                <span style={{ color: "var(--yellow)" }}>{detail.ttl}s</span>
              </div>
            )}
            {detail.size !== null && detail.size !== undefined && (
              <div style={{ fontSize: 11 }}>
                <span style={{ color: "var(--text-dim)" }}>Size </span>
                <span style={{ color: "var(--text)" }}>{detail.size} bytes</span>
              </div>
            )}
          </div>
          <div style={{ marginBottom: 8 }}>
            <span style={{ fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-dim)" }}>
              Value
            </span>
          </div>
          <pre
            style={{
              background: "var(--bg)",
              border: "1px solid var(--border)",
              borderRadius: 6,
              padding: 12,
              margin: 0,
              color: "var(--text)",
              fontSize: 12,
              lineHeight: 1.6,
              whiteSpace: "pre-wrap",
              wordBreak: "break-all",
              overflow: "auto",
              maxHeight: "calc(100vh - 200px)",
            }}
          >
            {formatRedisValue(detail.value, detail.type)}
          </pre>
        </div>
      )}
    </div>
  );
}

export function S3DetailPanel({ detail, loading, onClose }) {
  if (!detail && !loading) return null;

  return (
    <div
      style={{
        width: 420,
        minWidth: 320,
        borderLeft: "1px solid var(--border)",
        background: "var(--panel)",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
        flexShrink: 0,
      }}
    >
      <div
        style={{
          padding: "12px 16px",
          borderBottom: "1px solid var(--border)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <span
          style={{
            fontSize: 12,
            fontWeight: 600,
            color: "var(--orange)",
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
            flex: 1,
            marginRight: 8,
          }}
        >
          {loading ? "Loading..." : detail?.key || "Object Detail"}
        </span>
        <button
          onClick={onClose}
          style={{
            background: "none",
            border: "none",
            color: "var(--text-dim)",
            cursor: "pointer",
            fontFamily: "inherit",
            fontSize: 14,
            padding: "0 4px",
            borderRadius: 3,
            flexShrink: 0,
          }}
          onMouseEnter={(e) => { e.target.style.color = "var(--red)"; }}
          onMouseLeave={(e) => { e.target.style.color = "var(--text-dim)"; }}
        >
          x
        </button>
      </div>

      {loading && <div style={{ padding: 20, color: "var(--text-dim)", fontSize: 12 }}>Loading...</div>}

      {detail && !loading && (
        <div style={{ flex: 1, overflow: "auto", padding: 16 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 16 }}>
            <div style={{ fontSize: 11 }}>
              <span style={{ color: "var(--text-dim)" }}>Size </span>
              <span style={{ color: "var(--text)" }}>{formatSize(detail.size)}</span>
            </div>
            <div style={{ fontSize: 11 }}>
              <span style={{ color: "var(--text-dim)" }}>Type </span>
              <span style={{
                color: "var(--orange)",
                background: "var(--orange-bg)",
                padding: "2px 6px",
                borderRadius: 3,
                fontSize: 10,
                fontWeight: 600,
              }}>
                {detail.content_type}
              </span>
            </div>
            <div style={{ fontSize: 11 }}>
              <span style={{ color: "var(--text-dim)" }}>Modified </span>
              <span style={{ color: "var(--text)" }}>{detail.last_modified}</span>
            </div>
            <div style={{ fontSize: 11 }}>
              <span style={{ color: "var(--text-dim)" }}>ETag </span>
              <span style={{ color: "var(--text-dim)" }}>{detail.etag}</span>
            </div>
            {detail.metadata && Object.keys(detail.metadata).length > 0 && (
              <div style={{ fontSize: 11 }}>
                <span style={{ color: "var(--text-dim)" }}>Metadata </span>
                <span style={{ color: "var(--text)" }}>{JSON.stringify(detail.metadata)}</span>
              </div>
            )}
          </div>
          <div style={{ marginBottom: 8 }}>
            <span style={{ fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-dim)" }}>
              Content
            </span>
          </div>
          <pre
            style={{
              background: "var(--bg)",
              border: "1px solid var(--border)",
              borderRadius: 6,
              padding: 12,
              margin: 0,
              color: "var(--text)",
              fontSize: 12,
              lineHeight: 1.6,
              whiteSpace: "pre-wrap",
              wordBreak: "break-all",
              overflow: "auto",
              maxHeight: "calc(100vh - 280px)",
            }}
          >
            {detail.value || "[no preview available]"}
          </pre>
        </div>
      )}
    </div>
  );
}
