'use client';

import type { FunnelExperimentConfig } from '@/runtime/funnel-runtime';

type FunnelEditorPanelProps = {
  editorModeEnabled: boolean;
  editorPanelExpanded: boolean;
  experimentAssignmentForEditor: (experiment: FunnelExperimentConfig) => string;
  funnelExperiments: readonly FunnelExperimentConfig[];
  onSelectVariant: (experiment: FunnelExperimentConfig, variantKey: string) => void;
  onToggleExpanded: () => void;
};

export function FunnelEditorPanel({
  editorModeEnabled,
  editorPanelExpanded,
  experimentAssignmentForEditor,
  funnelExperiments,
  onSelectVariant,
  onToggleExpanded,
}: FunnelEditorPanelProps) {
  if (!editorModeEnabled) {
    return null;
  }

  return (
    <aside className={`funnel-editor-panel ${editorPanelExpanded ? 'is-expanded' : 'is-collapsed'}`}>
      <button type="button" className="funnel-editor-panel-toggle" onClick={onToggleExpanded}>
        {editorPanelExpanded ? 'Hide editor' : 'Editor'}
      </button>

      {editorPanelExpanded ? (
        <div className="funnel-editor-panel-content">
          <div className="funnel-editor-panel-tests">
            <p className="funnel-editor-panel-label">A/B TESTS</p>
            {funnelExperiments.length === 0 ? (
              <p className="funnel-editor-panel-helper">No configured tests.</p>
            ) : (
              <div className="funnel-editor-panel-test-list">
                {funnelExperiments.map((experiment) => {
                  const assignedVariantKey = experimentAssignmentForEditor(experiment);
                  return (
                    <label key={experiment.experimentId} className="funnel-editor-panel-test-item">
                      <span>{experiment.experimentId}</span>
                      <select
                        value={assignedVariantKey}
                        onChange={(event) => {
                          onSelectVariant(experiment, event.target.value);
                        }}
                      >
                        {experiment.variants.map((variant) => (
                          <option key={variant.variantKey} value={variant.variantKey}>
                            {variant.variantKey}
                          </option>
                        ))}
                      </select>
                    </label>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      ) : null}
    </aside>
  );
}

export const FunnelEditorPanelStyles = `
.funnel-editor-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1200;
  border-radius: 12px;
  border: 1px solid rgba(33, 41, 82, 0.25);
  background: rgba(255, 255, 255, 0.98);
  color: #202538;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.funnel-editor-panel.is-collapsed {
  width: auto;
}

.funnel-editor-panel.is-expanded {
  width: 184px;
}

.funnel-editor-panel-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}

.funnel-editor-panel-content {
  border-top: 1px solid rgba(33, 41, 82, 0.15);
  padding: 10px 12px 12px;
}

.funnel-editor-panel-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #53608a;
}

.funnel-editor-panel-tests {
  margin-top: 0;
}

.funnel-editor-panel-helper {
  margin: 0;
  font-size: 11px;
  color: #5a6387;
}

.funnel-editor-panel-test-list {
  display: grid;
  gap: 8px;
}

.funnel-editor-panel-test-item {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: #445073;
}

.funnel-editor-panel-test-item select {
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: 8px;
  background: #f5f7ff;
  color: #26315a;
  font-size: 12px;
  padding: 0 8px;
}
`;