#定制空会话内容与位置

import '@volcengine/chatkit/styles.css';

import { Chatkit, useChatkitActions, useChatRuntime } from '@volcengine/chatkit';
import { createMockAdapter } from '@volcengine/chatkit/adapters/mock';
import { useState } from 'react';

const adapter = createMockAdapter({});

type Position = 'top' | 'center';

function BusinessEmptyState() {
  const { send } = useChatkitActions();
  const suggestions = [
    { title: '整理本周进展', prompt: '帮我整理一份本周工作周报' },
    { title: '梳理项目计划', prompt: '帮我列出一份项目启动计划' },
  ];

  return (
    <section
      style={{
        width: '100%',
        maxWidth: 500,
        padding: 24,
        border: '1px solid #e2e4ea',
        borderRadius: 20,
        background: '#fff',
        boxShadow: '0 12px 36px rgba(26, 32, 44, 0.06)',
        boxSizing: 'border-box',
      }}
    >
      <span style={{ color: '#4758a8', fontSize: 13, fontWeight: 600 }}>项目助手</span>
      <h2 style={{ margin: '12px 0 8px', fontSize: 26, lineHeight: 1.25 }}>今天从哪里开始？</h2>
      <p style={{ margin: 0, color: '#626979', lineHeight: 1.6 }}>
        可以直接在下方提问，也可以从常用任务开始。项目助手会帮你整理信息并给出下一步建议。
      </p>
      <div style={{ display: 'grid', gap: 10, marginTop: 24 }}>
        {suggestions.map(({ title, prompt }) => (
          <button
            key={title}
            type="button"
            onClick={() => void send(prompt)}
            style={{
              padding: '12px 16px',
              border: '1px solid #dfe3ef',
              borderRadius: 12,
              background: '#f8f9fd',
              color: '#242a38',
              font: 'inherit',
              textAlign: 'left',
              cursor: 'pointer',
            }}
          >
            {title}{' '}
            <span aria-hidden="true" style={{ float: 'right' }}>
              →
            </span>
          </button>
        ))}
      </div>
    </section>
  );
}

function EmptyLayout({ position }: { position: Position }) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: position === 'center' ? 'center' : 'flex-start',
        justifyContent: 'center',
        minHeight: '100%',
        padding: '24px 16px',
        boxSizing: 'border-box',
      }}
    >
      <BusinessEmptyState />
    </div>
  );
}

export default function EmptyState() {
  const runtime = useChatRuntime({ sessionId: 'empty-state', adapter });
  const [position, setPosition] = useState<Position>('center');

  if (!runtime) return null;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, padding: 12, borderBottom: '1px solid #e8e8ec' }}>
        <fieldset style={{ display: 'flex', gap: 8, margin: 0, padding: 0, border: 0 }}>
          <legend>空态位置</legend>
          {(['top', 'center'] as const).map(value => (
            <label key={value}>
              <input
                type="radio"
                name="empty-position"
                checked={position === value}
                onChange={() => setPosition(value)}
              />
              {value === 'top' ? '顶部' : '居中'}
            </label>
          ))}
        </fieldset>
      </div>
      <div style={{ flex: 1, minHeight: 0 }}>
        <Chatkit
          runtime={runtime}
          slots={{
            'session.empty': () => <EmptyLayout position={position} />,
          }}
        />
      </div>
    </div>
  );
}