stack/apps/web/src/components/personalities/PersonalityPreview.tsx

"use client";

import { useState } from "react";
import type { Personality } from "@mosaic/shared";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Sparkles } from "lucide-react";

interface PersonalityPreviewProps {
  personality: Personality;
}

const SAMPLE_PROMPTS = [
  "Explain quantum computing in simple terms",
  "What's the best way to organize my tasks?",
  "Help me brainstorm ideas for a new project",
];

const FORMALITY_LABELS: Record<string, string> = {
  VERY_CASUAL: "Very Casual",
  CASUAL: "Casual",
  NEUTRAL: "Neutral",
  FORMAL: "Formal",
  VERY_FORMAL: "Very Formal",
};

export function PersonalityPreview({ personality }: PersonalityPreviewProps): JSX.Element {
  const [selectedPrompt, setSelectedPrompt] = useState<string>(SAMPLE_PROMPTS[0]);

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <Sparkles className="h-5 w-5" />
              {personality.name}
            </CardTitle>
            <CardDescription>{personality.description}</CardDescription>
          </div>
          {personality.isDefault && (
            <Badge variant="secondary">Default</Badge>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Personality Attributes */}
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span className="text-muted-foreground">Tone:</span>
            <Badge variant="outline" className="ml-2">
              {personality.tone}
            </Badge>
          </div>
          <div>
            <span className="text-muted-foreground">Formality:</span>
            <Badge variant="outline" className="ml-2">
              {FORMALITY_LABELS[personality.formalityLevel]}
            </Badge>
          </div>
        </div>

        {/* Sample Interaction */}
        <div className="space-y-2">
          <label className="text-sm font-medium">Preview with Sample Prompt:</label>
          <div className="flex flex-wrap gap-2">
            {SAMPLE_PROMPTS.map((prompt) => (
              <Button
                key={prompt}
                variant={selectedPrompt === prompt ? "default" : "outline"}
                size="sm"
                onClick={() => setSelectedPrompt(prompt)}
              >
                {prompt.substring(0, 30)}...
              </Button>
            ))}
          </div>
        </div>

        {/* System Prompt Template */}
        <div className="space-y-2">
          <label className="text-sm font-medium">System Prompt Template:</label>
          <Textarea
            value={personality.systemPromptTemplate}
            readOnly
            className="min-h-[100px] bg-muted"
          />
        </div>

        {/* Mock Response Preview */}
        <div className="space-y-2">
          <label className="text-sm font-medium">Sample Response Style:</label>
          <div className="rounded-md border bg-muted/50 p-4 text-sm">
            <p className="italic text-muted-foreground">
              "{selectedPrompt}"
            </p>
            <div className="mt-2 text-foreground">
              {personality.formalityLevel === "VERY_CASUAL" && (
                <p>Hey! So quantum computing is like... imagine if your computer could be in multiple places at once. Pretty wild, right? 🤯</p>
              )}
              {personality.formalityLevel === "CASUAL" && (
                <p>Sure! Think of quantum computing like a super-powered calculator that can try lots of solutions at the same time.</p>
              )}
              {personality.formalityLevel === "NEUTRAL" && (
                <p>Quantum computing uses quantum mechanics principles to process information differently from classical computers, enabling parallel computation.</p>
              )}
              {personality.formalityLevel === "FORMAL" && (
                <p>Quantum computing represents a paradigm shift in computational methodology, leveraging quantum mechanical phenomena to perform calculations.</p>
              )}
              {personality.formalityLevel === "VERY_FORMAL" && (
                <p>Quantum computing constitutes a fundamental departure from classical computational architectures, employing quantum superposition and entanglement principles.</p>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}