import type { ThemeProps } from "../../types";
import logo from "../../assets/icon.png";
import "./glass.css";

export default function GlassTheme({ config, state }: ThemeProps) {
  const { step, progress, installPath } = state;
  const { texts, primaryColor, successColor } = config;

  const getStatusText = () => {
    for (let i = texts.progressFrames.length - 1; i >= 0; i--) {
      if (progress <= texts.progressFrames[i].limit)
        return texts.progressFrames[i].text;
    }
    return texts.progressFrames[texts.progressFrames.length - 1]?.text ?? "";
  };

  const cssVars: React.CSSProperties = {
    // @ts-expect-error
    "--glass-primary": primaryColor,
    "--glass-success": successColor,
  };

  return (
    <div
      className="w-screen h-screen flex justify-center items-center glass-root"
      style={cssVars}
    >
      {/* 动态流光背景 */}
      <div
        className="glass-orb glass-orb-1"
        style={{ background: primaryColor }}
      />
      <div
        className="glass-orb glass-orb-2"
        style={{ background: successColor || "#06b6d4" }}
      />
      <div
        className="glass-orb glass-orb-3"
        style={{ background: config.accentColor || "#8b5cf6" }}
      />

      <div className="glass-panel glass-draggable">
        <header data-tauri-drag-region>
          <div className="glass-brand">
            <img src={logo} alt="Logo" />
            <span>{config.appDisplayName}</span>
          </div>
          <button className="glass-btn-close" onClick={state.close}>
            <svg
              viewBox="0 0 24 24"
              width="18"
              height="18"
              stroke="currentColor"
              strokeWidth="2"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </header>

        <main>
          {step === 1 && (
            <div className="glass-step glass-anim-in">
              <div className="glass-hero">
                <h1>{texts.welcomeTitle}</h1>
                <p>{texts.welcomeSubtitle}</p>
              </div>

              <div className="glass-control-group">
                <label>Storage Location</label>
                <div className="glass-input-morph" onClick={state.selectPath}>
                  <div className="glass-path-text" title={installPath}>
                    {installPath}
                  </div>
                  <div className="glass-btn-sm">Modify</div>
                </div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="glass-step glass-anim-in glass-center">
              <div className="glass-circular-progress">
                <svg viewBox="0 0 120 120">
                  <circle
                    cx="60"
                    cy="60"
                    r="54"
                    className="glass-circle-track"
                  />
                  <circle
                    cx="60"
                    cy="60"
                    r="54"
                    className="glass-circle-fill"
                    style={{
                      strokeDashoffset: 339.29 - (339.29 * progress) / 100,
                    }}
                  />
                </svg>
                <div className="glass-percent">{progress}%</div>
              </div>
              <div className="glass-status">{getStatusText()}</div>
            </div>
          )}

          {step === 3 && (
            <div className="glass-step glass-anim-in glass-center">
              <div className="glass-success-badge">
                <svg
                  viewBox="0 0 24 24"
                  width="40"
                  height="40"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                  <path d="M22 4L12 14.01l-3-3" />
                </svg>
              </div>
              <h2>{texts.successTitle}</h2>
              <p>{texts.successSubtitle}</p>

              <div className="glass-chips">
                {texts.features.map((f) => (
                  <div
                    key={f.label}
                    className="glass-chip"
                    style={{ "--chip-color": f.color } as any}
                  >
                    {f.label}
                  </div>
                ))}
              </div>
            </div>
          )}
        </main>

        <footer className={`${step === 3 ? "success" : ""}`}>
          {step === 1 && (
            <>
              <span className="glass-hint">
                By continuing, you agree to the <a href="#">License</a>
              </span>
              <button
                className="glass-btn-primary"
                onClick={state.startInstall}
              >
                {texts.installButton}
              </button>
            </>
          )}
          {step === 3 && (
            <button
              className="glass-btn-primary glass-btn-success"
              onClick={state.launch}
            >
              {texts.launchButton}
            </button>
          )}
        </footer>
      </div>
    </div>
  );
}