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

/* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
"use client";
/* eslint-disable @typescript-eslint/no-non-null-assertion */

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): React.ReactElement {
  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) => {
              const variant = selectedPrompt === prompt ? "default" : "outline";
              return (
                <Button
                  key={prompt}
                  variant={variant}
                  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>
  );
}