import type { CourseView } from '../types';
import React, { useState, useRef, useEffect } from 'react';
import { Send, Loader2 } from 'lucide-react';
import { challengeFollowUp } from '@/lib/provingGround';
import OwliverAvatar from '@/components/krow/OwliverAvatar';

// AI roleplay challenge — scenario prompt, worker responds, KROW follows up,
// then the worker submits the transcript for AI evaluation.
interface RoleplayChallengeProps {
  course: CourseView;
  onSubmit?: (...args: any[]) => void;
  submitting: boolean;
}

export default function RoleplayChallenge({ course, onSubmit, submitting }: RoleplayChallengeProps) {
  const initial = course?.challenge?.prompt || course?.description || 'Demonstrate the skill.';
  const [messages, setMessages] = useState([{ role: 'ai', content: initial }]);
  const [input, setInput] = useState('');
  const [busy, setBusy] = useState(false);
  const scrollRef = useRef(null);

  useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);

  const send = async () => {
    const text = input.trim();
    if (!text || busy) return;
    const next = [...messages, { role: 'user', content: text }];
    setMessages(next);
    setInput('');
    setBusy(true);
    try {
      const follow = await challengeFollowUp(course, next);
      setMessages([...next, { role: 'ai', content: follow }]);
    } catch {
      setMessages([...next, { role: 'ai', content: 'Thanks. Submit your proof when ready.' }]);
    } finally {
      setBusy(false);
    }
  };

  const transcript = messages.map((m) => `${m.role === 'user' ? 'Worker' : 'Owliver'}: ${m.content}`).join('\n');
  const hasResponded = messages.some((m) => m.role === 'user');

  return (
    <div>
      <div className="flex items-center gap-2 mb-3">
        <OwliverAvatar className="w-8 h-8" rounded="rounded-full" />
        <div>
          <p className="text-[13px] font-semibold text-ink-1">Owliver</p>
          <p className="text-[10px] text-ink-4">Your AI skills coach</p>
        </div>
      </div>
      <div className="space-y-3 mb-4 max-h-72 overflow-y-auto pr-1">
        {messages.map((m, i) => {
          const isAI = m.role !== 'user';
          return (
            <div key={i} className={`flex items-end gap-2 ${isAI ? 'justify-start' : 'justify-end'}`}>
              {isAI && <OwliverAvatar className="w-7 h-7 shrink-0" rounded="rounded-full" />}
              <div className={`max-w-[80%] px-3.5 py-2.5 rounded-xl text-[13px] leading-relaxed ${
                m.role === 'user' ? 'bg-krow-blue text-white rounded-br-sm' : 'bg-surface-sunken text-ink-1 rounded-bl-sm'
              }`}>{m.content}</div>
            </div>
          );
        })}
        <div ref={scrollRef} />
      </div>
      <div className="flex items-center gap-2 rounded-full bg-white pl-4 pr-1.5 py-1.5 shadow-[0_10px_30px_rgba(10,57,223,0.14),0_2px_6px_rgba(51,63,72,0.06)] ring-1 ring-black/5">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && send()}
          disabled={submitting || busy}
          placeholder="Type your response…"
          className="flex-1 h-9 bg-transparent px-1 text-[13px] focus:outline-none placeholder:text-ink-4"
        />
        <button onClick={send} disabled={busy || submitting} className="w-9 h-9 rounded-full bg-krow-blue text-white flex items-center justify-center disabled:opacity-50 shrink-0">
          {busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
        </button>
      </div>
      <button
        onClick={() => onSubmit(transcript)}
        disabled={!hasResponded || submitting || busy}
        className="mt-3 w-full h-10 rounded-xl bg-krow-navy text-white text-[13px] font-semibold disabled:opacity-40"
      >
        Submit proof for AI evaluation
      </button>
    </div>
  );
}