import { MessageSquareText } from 'lucide-react';

import type { VisualNovelResultDraft } from '../../../packages/shared/src/contracts/visualNovel';

type VisualNovelSettingsPanelProps = {
  draft: VisualNovelResultDraft;
  textModeEnabled: boolean;
  onTextModeChange?: (enabled: boolean) => void;
};

export function VisualNovelSettingsPanel({
  draft,
  textModeEnabled,
  onTextModeChange,
}: VisualNovelSettingsPanelProps) {
  return (
    <div className="space-y-2">
      <button
        type="button"
        onClick={() => onTextModeChange?.(!textModeEnabled)}
        className="flex min-h-12 w-full items-center justify-between gap-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/78 px-3 text-left transition hover:bg-white"
      >
        <span className="flex min-w-0 items-center gap-2 text-sm font-semibold text-[var(--platform-text-strong)]">
          <MessageSquareText className="h-4 w-4 shrink-0" />
          <span>文本模式</span>
        </span>
        <span className="rounded-full bg-[var(--platform-neutral-bg)] px-3 py-1 text-xs font-black text-[var(--platform-neutral-text)]">
          {textModeEnabled ? '开启' : '关闭'}
        </span>
      </button>
      <div className="flex min-h-12 items-center justify-between gap-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/78 px-3">
        <span className="text-sm font-semibold text-[var(--platform-text-strong)]">
          自由输入
        </span>
        <span className="rounded-full bg-[var(--platform-neutral-bg)] px-3 py-1 text-xs font-black text-[var(--platform-neutral-text)]">
          {draft.runtimeConfig.allowFreeTextAction ? '开启' : '关闭'}
        </span>
      </div>
      <div className="flex min-h-12 items-center justify-between gap-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/78 px-3">
        <span className="text-sm font-semibold text-[var(--platform-text-strong)]">
          历史重生成
        </span>
        <span className="rounded-full bg-[var(--platform-neutral-bg)] px-3 py-1 text-xs font-black text-[var(--platform-neutral-text)]">
          {draft.runtimeConfig.allowHistoryRegeneration ? '开启' : '关闭'}
        </span>
      </div>
    </div>
  );
}

export default VisualNovelSettingsPanel;