"use client";

import { useMemo } from "react";

import { pickColor } from "../highlight-colors.mjs";

export default function OutletPanel({
  outlets,
  hostUrl,
  onHighlight,
  onClearHighlight,
  onScrollIntoView,
}) {
  const colors = useMemo(
    () => outlets.map((o) => pickColor(o.name)),
    [outlets]
  );

  if (outlets.length === 0) {
    return (
      <div className="dt-empty">
        <div className="dt-empty-icon">🔲</div>
        <div className="dt-empty-title">No outlet data received yet.</div>
        <div className="dt-empty-subtitle">
          Waiting for outlet data from the host page...
        </div>
      </div>
    );
  }

  return (
    <div>
      <div className="dt-host-url">
        Host URL: <code className="dt-mono">{hostUrl || "—"}</code>
      </div>

      <div className="dt-card-grid">
        {outlets.map((outlet, i) => (
          <div
            key={outlet.name || i}
            data-outlet-name={outlet.name}
            className="dt-card dt-card-hover dt-outlet-card"
            onMouseEnter={() => {
              onHighlight?.(
                `[data-devtools-outlet="${outlet.name}"]`,
                colors[i],
                outlet.name
              );
            }}
            onMouseLeave={() => {
              onClearHighlight?.();
            }}
          >
            <div className="dt-outlet-info">
              <div className="dt-outlet-name">{outlet.name || "PAGE_ROOT"}</div>
              {outlet.url && <div className="dt-outlet-url">{outlet.url}</div>}
            </div>
            <div className="dt-outlet-actions">
              <div className="dt-badges">
                {outlet._fileRouter && (
                  <span className="dt-tag dt-tag-orange">router</span>
                )}
                {outlet.remote && (
                  <span className="dt-tag dt-tag-violet">remote</span>
                )}
                {outlet.live && (
                  <span className="dt-tag dt-tag-green">live</span>
                )}
                {outlet.defer && (
                  <span className="dt-tag dt-tag-amber">defer</span>
                )}
                {!outlet._fileRouter &&
                  !outlet.remote &&
                  !outlet.live &&
                  !outlet.defer && (
                    <span className="dt-tag dt-tag-gray">static</span>
                  )}
              </div>
              {outlet.name && outlet.name !== "PAGE_ROOT" && (
                <button
                  className="dt-outlet-refresh"
                  title={`Scroll to ${outlet.name} outlet`}
                  onClick={(e) => {
                    e.stopPropagation();
                    onScrollIntoView?.(
                      `[data-devtools-outlet="${outlet.name}"]`
                    );
                  }}
                >
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" />
                  </svg>
                </button>
              )}
              {!outlet._fileRouter && (
                <button
                  className="dt-outlet-refresh"
                  title={`Refresh ${outlet.name || "root"} outlet`}
                  onClick={(e) => {
                    e.stopPropagation();
                    window.parent.postMessage(
                      {
                        type: "devtools:refresh-outlet",
                        outlet: outlet.name,
                      },
                      "*"
                    );
                  }}
                >
                  ↻
                </button>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}