import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { TeacherChatPanel } from './TeacherChatPanel';
import { teacherApi } from '@/lib/coding-teacher';
export function TeacherPreviewPage() {
  const [params] = useSearchParams();
  const revision = Number(params.get('draftRevision'));
  const [result, setResult] = useState<{revision:number;error:string} | null>(null);
  const [sample, setSample] = useState('');
  const ready = result?.revision === revision && !result.error;
  const error = result?.revision === revision ? result.error : '';
  useEffect(() => {
    let current = true;
    void teacherApi
      .preview(revision)
      .then(() => {
        if (current) setResult({revision,error:''});
      })
      .catch((e) => {
        if (current) setResult({revision,error:e instanceof Error ? e.message : '无法打开试聊'});
      });
    return () => {
      current = false;
    };
  }, [revision]);
  return (
    <main className="flex h-full min-h-0 flex-col gap-4 p-5">
      <div>
        <h1 className="text-lg font-semibold">智能体 · 草稿试聊</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          使用当前运营账号的词元点数。填写示例上下文后新建话题，不会读取学生项目。
        </p>
      </div>
      {error && (
        <p role="alert" className="text-destructive">
          {error}
        </p>
      )}
      {ready && (
        <div className="flex min-h-0 flex-1 gap-5">
          <label className="w-1/3 text-sm">
            示例会话上下文
            <textarea
              aria-label="示例会话上下文"
              className="mt-2 h-60 w-full rounded border p-3"
              value={sample}
              maxLength={12000}
              onChange={(e) => setSample(e.target.value)}
            />
          </label>
          <div className="min-h-0 flex-1 overflow-hidden rounded-xl border">
            <TeacherChatPanel
              key={revision}
              projectId="preview"
              sourceId="preview"
              draftRevision={revision}
              sampleContext={sample}
            />
          </div>
        </div>
      )}
    </main>
  );
}