"use client";

/**
 * 鱼骨屏加载：主脊 + 双侧骨刺骨架，叠在 IDE 壳（侧栏 / 顶栏 / 主区）之上。
 * 用于整站首屏与 Suspense fallback。
 */

function Bone({
  className,
  style,
  delay = 0,
}: {
  className?: string;
  style?: React.CSSProperties;
  delay?: number;
}) {
  return (
    <div
      className={`pi-fishbone-bone ${className ?? ""}`}
      style={{ ...style, animationDelay: `${delay}ms` }}
    />
  );
}

/** 中央鱼骨装饰：脊骨 + 成对肋骨 */
function FishboneMark({ size = 120 }: { size?: number }) {
  const ribs = 5;
  const cx = size / 2;
  const spineTop = size * 0.12;
  const spineBot = size * 0.88;
  const spineLen = spineBot - spineTop;

  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      className="pi-fishbone-mark"
      aria-hidden
    >
      {/* spine */}
      <line
        className="pi-fishbone-spine"
        x1={cx}
        y1={spineTop}
        x2={cx}
        y2={spineBot}
        strokeWidth="2.2"
        strokeLinecap="round"
      />
      {/* head diamond */}
      <path
        className="pi-fishbone-spine"
        d={`M ${cx} ${spineTop - 2} L ${cx + 7} ${spineTop + 10} L ${cx} ${spineTop + 18} L ${cx - 7} ${spineTop + 10} Z`}
        fill="none"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
      {/* tail */}
      <path
        className="pi-fishbone-spine"
        d={`M ${cx} ${spineBot} L ${cx - 10} ${spineBot + 12} M ${cx} ${spineBot} L ${cx + 10} ${spineBot + 12}`}
        fill="none"
        strokeWidth="1.8"
        strokeLinecap="round"
      />
      {Array.from({ length: ribs }, (_, i) => {
        const t = (i + 1) / (ribs + 1);
        const y = spineTop + spineLen * t;
        const len = size * (0.22 + (i % 2) * 0.04);
        const delay = i * 0.08;
        return (
          <g key={i} className="pi-fishbone-rib" style={{ animationDelay: `${delay}s` }}>
            <line
              x1={cx}
              y1={y}
              x2={cx - len}
              y2={y - len * 0.35}
              strokeWidth="1.6"
              strokeLinecap="round"
            />
            <line
              x1={cx}
              y1={y}
              x2={cx + len}
              y2={y - len * 0.35}
              strokeWidth="1.6"
              strokeLinecap="round"
            />
          </g>
        );
      })}
    </svg>
  );
}

/**
 * Compact fishbone skeleton for panels (Add Plugin / Add skill list loading).
 * Parent should allow flex growth (minHeight ~ 180+).
 */
export function FishboneListLoader({
  label = "加载中…",
  rows = 6,
}: {
  label?: string;
  rows?: number;
}) {
  return (
    <div
      className="pi-fishbone-list-loader"
      role="status"
      aria-live="polite"
      aria-busy="true"
    >
      <div className="pi-fishbone-list-center">
        <FishboneMark size={88} />
        <div className="pi-fishbone-brand">
          <span className="pi-fishbone-pi">π</span>
          <span className="pi-fishbone-label">{label}</span>
        </div>
      </div>
      <div className="pi-fishbone-list-rows">
        {Array.from({ length: rows }, (_, i) => (
          <div key={i} className="pi-fishbone-list-row">
            <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 6 }}>
              <Bone style={{ width: `${55 + (i % 3) * 12}%`, height: 12, borderRadius: 4 }} delay={i * 60} />
              <Bone style={{ width: `${70 + (i % 2) * 15}%`, height: 9, borderRadius: 4 }} delay={i * 60 + 30} />
            </div>
            <Bone style={{ width: 64, height: 28, borderRadius: 6, flexShrink: 0 }} delay={i * 60 + 40} />
          </div>
        ))}
      </div>
    </div>
  );
}

export function FishboneLoader({
  label = "加载中…",
  fullScreen = true,
  fill = false,
}: {
  label?: string;
  fullScreen?: boolean;
  /** Fill parent instead of fixed/absolute viewport (parent must be positioned) */
  fill?: boolean;
}) {
  const positionStyle: React.CSSProperties = fill
    ? { position: "relative", width: "100%", height: "100%" }
    : fullScreen
      ? { position: "fixed", inset: 0, zIndex: 9999 }
      : { position: "absolute", inset: 0, zIndex: 50 };

  return (
    <div
      className="pi-fishbone-loader"
      role="status"
      aria-live="polite"
      aria-busy="true"
      style={positionStyle}
    >
      {/* Shell skeleton: sidebar + main */}
      <div className="pi-fishbone-shell">
        {/* Sidebar */}
        <aside className="pi-fishbone-sidebar">
          <div className="pi-fishbone-side-head">
            <Bone style={{ width: 28, height: 28, borderRadius: 8 }} delay={0} />
            <Bone style={{ flex: 1, height: 12, borderRadius: 4 }} delay={40} />
          </div>
          <Bone style={{ height: 32, borderRadius: 8, margin: "0 12px 10px" }} delay={80} />
          <div className="pi-fishbone-side-list">
            {[0, 1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="pi-fishbone-side-row">
                <Bone style={{ width: 8, height: 8, borderRadius: "50%" }} delay={100 + i * 50} />
                <Bone style={{ flex: 1, height: 10, borderRadius: 4 }} delay={120 + i * 50} />
              </div>
            ))}
          </div>
          <div style={{ flex: 1 }} />
          <div className="pi-fishbone-side-foot">
            <Bone style={{ height: 10, width: "70%", borderRadius: 4 }} delay={400} />
            <Bone style={{ height: 10, width: "45%", borderRadius: 4 }} delay={440} />
          </div>
        </aside>

        {/* Main */}
        <main className="pi-fishbone-main">
          <header className="pi-fishbone-topbar">
            <Bone style={{ width: 32, height: 20, borderRadius: 4 }} delay={60} />
            <Bone style={{ width: 72, height: 12, borderRadius: 4 }} delay={100} />
            <Bone style={{ width: 64, height: 12, borderRadius: 4 }} delay={140} />
            <div style={{ flex: 1 }} />
            <Bone style={{ width: 48, height: 12, borderRadius: 4 }} delay={180} />
            <Bone style={{ width: 48, height: 12, borderRadius: 4 }} delay={200} />
          </header>

          <div className="pi-fishbone-chat">
            {/* Fishbone centerpiece */}
            <div className="pi-fishbone-center">
              <FishboneMark size={132} />
              <div className="pi-fishbone-brand">
                <span className="pi-fishbone-pi">π</span>
                <span className="pi-fishbone-label">{label}</span>
              </div>
            </div>

            {/* Message bone rows — alternate left/right like ribs */}
            <div className="pi-fishbone-msgs">
              {[0, 1, 2, 3].map((i) => {
                const right = i % 2 === 1;
                return (
                  <div
                    key={i}
                    className="pi-fishbone-msg-row"
                    style={{ justifyContent: right ? "flex-end" : "flex-start" }}
                  >
                    <Bone
                      style={{
                        width: right ? "42%" : "58%",
                        height: right ? 36 : 56,
                        borderRadius: 12,
                      }}
                      delay={200 + i * 70}
                    />
                  </div>
                );
              })}
            </div>
          </div>

          <footer className="pi-fishbone-composer">
            <Bone style={{ flex: 1, height: 48, borderRadius: 12 }} delay={480} />
            <Bone style={{ width: 40, height: 40, borderRadius: "50%" }} delay={520} />
          </footer>
        </main>
      </div>
    </div>
  );
}