Interview Prep Hub

"use client";
import { useState, useRef, useEffect } from "react";

type RoundType = "technical" | "behavioral" | "system" | "hr" | "panel";

const ROUND_LABELS: Record<RoundType, string> = {
  technical:  "Technical",
  behavioral: "Behavioral",
  system:     "System Design",
  hr:         "HR Screening",
  panel:      "Final Panel",
};

interface InterviewPrepPanelProps {
  jobTitle: string;
  company: string;
  roundType: RoundType;
  onRoundChange: (r: RoundType) => void;
  /** Async generator that yields accumulated text chunks */
  streamPrep: (roundType: RoundType) => AsyncGenerator<string, void, unknown>;
}

export function InterviewPrepPanel({
  jobTitle, company, roundType, onRoundChange, streamPrep,
}: InterviewPrepPanelProps) {
  const [content, setContent] = useState("");
  const [isStreaming, setIsStreaming] = useState(false);
  const abortRef = useRef(false);

  useEffect(() => { setContent(""); }, [roundType]);

  async function generate() {
    abortRef.current = false;
    setIsStreaming(true);
    setContent("");
    for await (const chunk of streamPrep(roundType)) {
      if (abortRef.current) break;
      setContent(chunk);
    }
    setIsStreaming(false);
  }

  return (
    <div className="flex flex-col gap-3">
      {/* Job context */}
      <div className="flex items-center gap-3 p-3 rounded-xl bg-[rgb(var(--surface-raised))] border border-[rgb(var(--border))]">
        <div className="text-xs font-semibold text-[rgb(var(--text-primary))]">
          {jobTitle} · {company}
        </div>
        <span className="ml-auto text-[11px] font-semibold px-2 py-0.5 rounded-full bg-[rgb(var(--accent)_/_0.1)] text-[rgb(var(--accent))]">
          Pro
        </span>
      </div>

      {/* Round tabs */}
      <div className="flex flex-wrap gap-1.5">
        {(Object.keys(ROUND_LABELS) as RoundType[]).map(r => (
          <button key={r} onClick={() => onRoundChange(r)}
            className={`px-3 py-1 rounded-full text-xs font-semibold border transition-colors ${
              r === roundType
                ? "border-[rgb(var(--accent))] bg-[rgb(var(--accent)_/_0.1)] text-[rgb(var(--accent))]"
                : "border-[rgb(var(--border))] text-[rgb(var(--text-secondary))] hover:border-[rgb(var(--accent)_/_0.5)]"
            }`}
          >
            {ROUND_LABELS[r]}
          </button>
        ))}
      </div>

      {/* CTA */}
      <button onClick={generate} disabled={isStreaming}
        className="w-full py-2.5 rounded-xl bg-[rgb(var(--accent))] text-white text-sm font-semibold disabled:opacity-60"
      >
        {isStreaming ? "Generating…" : `Generate ${ROUND_LABELS[roundType]} Prep`}
      </button>

      {/* Content */}
      {(content || isStreaming) && (
        <div className="p-4 rounded-2xl bg-[rgb(var(--surface))] border border-[rgb(var(--border))] text-sm text-[rgb(var(--text-secondary))] leading-relaxed whitespace-pre-line">
          {content}
          {isStreaming && <span className="text-[rgb(var(--accent))] animate-pulse"> ▌</span>}
        </div>
      )}
    </div>
  );
}