"use client"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { Play, RotateCcw, CheckCircle2, XCircle, AlertTriangle, ArrowRight, ArrowDown, FileText, Search, Edit3, Sparkles, Package } from "lucide-react"; import { useTranslations, useLocale } from "next-intl"; import { getLocaleField } from "./locales"; type StepStatus = "pending" | "running" | "success" | "failed" | "invalid" | "retrying"; // ============================================ // Validation Demo // ============================================ interface ValidationStep { id: string; name: string; status: StepStatus; output?: string; validationResult?: "valid" | "invalid"; reason?: string; } export function ValidationDemo() { const locale = useLocale(); const localeData = getLocaleField(locale, "validationDemo"); const [scenario, setScenario] = useState<"valid" | "invalid">("invalid"); const [isRunning, setIsRunning] = useState(false); const getInitialSteps = (): ValidationStep[] => localeData.steps.map(s => ({ ...s, status: "pending" as StepStatus })); const [steps, setSteps] = useState(getInitialSteps()); const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); const updateStep = (id: string, updates: Partial) => { setSteps(prev => prev.map(s => s.id === id ? { ...s, ...updates } : s)); }; const resetSteps = () => { setSteps(getInitialSteps()); }; const runDemo = async () => { setIsRunning(true); resetSteps(); await delay(300); // Step 1: Generate data updateStep("generate", { status: "running" }); await delay(800); if (scenario === "invalid") { // First attempt produces invalid data updateStep("generate", { status: "success", output: '{"name": "John", "age": "twenty-five"}' }); await delay(400); updateStep("validate", { status: "running" }); await delay(600); updateStep("validate", { status: "failed", validationResult: "invalid", reason: localeData.outputs.ageMustBeNumber }); await delay(600); // Retry with feedback updateStep("generate", { status: "retrying", output: localeData.outputs.retryingWithFeedback }); await delay(1000); updateStep("generate", { status: "success", output: '{"name": "John", "age": 25}' }); await delay(400); updateStep("validate", { status: "running", validationResult: undefined, reason: undefined }); await delay(600); updateStep("validate", { status: "success", validationResult: "valid", reason: localeData.outputs.allFieldsValid }); } else { // Valid scenario updateStep("generate", { status: "success", output: '{"name": "John", "age": 25}' }); await delay(400); updateStep("validate", { status: "running" }); await delay(600); updateStep("validate", { status: "success", validationResult: "valid", reason: localeData.outputs.allFieldsValid }); } await delay(400); updateStep("process", { status: "running" }); await delay(700); updateStep("process", { status: "success", output: localeData.outputs.dataProcessedSuccessfully }); setIsRunning(false); }; return (

{localeData.title}

{/* Generate Step */}

{localeData.step} 1

{steps[0].status === "pending" &&

} {steps[0].status === "running" &&

} {steps[0].status === "success" && } {steps[0].status === "retrying" && } {steps[0].name}

{steps[0].output && (

{steps[0].output}

)}

{/* Validate Step */}

{localeData.step} 2

{steps[1].status === "pending" &&

} {steps[1].status === "running" &&

} {steps[1].status === "success" && } {steps[1].status === "failed" && } {steps[1].name}

{steps[1].validationResult === "invalid" && (

✗ INVALID

{steps[1].reason}

)} {steps[1].validationResult === "valid" && (

✓ VALID

{steps[1].reason}

)} {steps[1].status === "pending" && (

{localeData.checksOutput}

)}

{/* Process Step */}

{localeData.step} 3

{steps[2].status === "pending" &&

} {steps[2].status === "running" &&

} {steps[2].status === "success" && } {steps[2].name}

{steps[2].output &&

{steps[2].output}

} {steps[2].status === "pending" && (

{localeData.usesValidatedData}

)}

{/* Retry indicator */} {scenario === "invalid" && steps[0].status === "retrying" && (

↺ {localeData.retryingStep} — {localeData.validationFailed}: "{steps[1].reason}"

)}

); } // ============================================ // Fallback Demo // ============================================ interface FallbackStep { id: string; name: string; type: "primary" | "fallback"; status: StepStatus; output?: string; confidence?: number; } export function FallbackDemo() { const locale = useLocale(); const localeData = getLocaleField(locale, "fallbackDemo"); const [scenario, setScenario] = useState<"primary" | "fallback">("fallback"); const [isRunning, setIsRunning] = useState(false); const getInitialSteps = (): FallbackStep[] => localeData.steps.map(s => ({ ...s, type: s.type as "primary" | "fallback", status: "pending" as StepStatus })); const [steps, setSteps] = useState(getInitialSteps()); const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); const updateStep = (id: string, updates: Partial) => { setSteps(prev => prev.map(s => s.id === id ? { ...s, ...updates } : s)); }; const resetSteps = () => { setSteps(getInitialSteps()); }; const runDemo = async () => { setIsRunning(true); resetSteps(); await delay(300); updateStep("primary", { status: "running" }); await delay(1000); if (scenario === "fallback") { updateStep("primary", { status: "failed", output: localeData.outputs.lowConfidence.replace("{confidence}", "32"), confidence: 32 }); await delay(500); updateStep("fallback", { status: "running" }); await delay(800); updateStep("fallback", { status: "success", output: localeData.outputs.extractedKeyEntities, confidence: 95 }); await delay(400); updateStep("output", { status: "running" }); await delay(600); updateStep("output", { status: "success", output: localeData.outputs.resultFromFallback }); } else { updateStep("primary", { status: "success", output: localeData.outputs.deepAnalysisComplete, confidence: 94 }); await delay(400); updateStep("output", { status: "running" }); await delay(600); updateStep("output", { status: "success", output: localeData.outputs.resultFromPrimary }); } setIsRunning(false); }; return (

{localeData.title}

{/* Primary */}

{localeData.primary}

{steps[0].status === "running" &&

} {steps[0].status === "success" && } {steps[0].status === "failed" && } {steps[0].status === "pending" &&

} {steps[0].name}

{steps[0].output &&

{steps[0].output}

} {steps[0].confidence && (

70 ? "bg-green-500" : "bg-red-500" )} style={{ width: `${steps[0].confidence}%` }} />

{localeData.confidence}: {steps[0].confidence}%

)}

{/* Fallback */}

{localeData.fallback}

{steps[1].status === "running" &&

} {steps[1].status === "success" && } {steps[1].status === "pending" && } {steps[1].name}

{steps[1].status === "pending" ? localeData.standbyIfPrimaryFails : steps[1].output}

{steps[1].confidence && (

{localeData.confidence}: {steps[1].confidence}%

)}

{/* Output */}

{localeData.output}

{steps[2].status === "running" &&

} {steps[2].status === "success" && } {steps[2].status === "pending" && } {steps[2].name}

{steps[2].output &&

{steps[2].output}

}

); } // ============================================ // Content Pipeline Demo // ============================================ interface PipelineStep { id: string; name: string; icon: typeof FileText; status: StepStatus; output?: string; parallel?: boolean; prompt?: string; } const pipelineIcons: Record = { input: Sparkles, outline: Search, draft: Edit3, review: FileText, edit: Edit3, metadata: Package, }; export function ContentPipelineDemo() { const locale = useLocale(); const localeData = getLocaleField(locale, "contentPipelineDemo"); const [isRunning, setIsRunning] = useState(false); const [expandedStep, setExpandedStep] = useState(null); const getInitialSteps = (): PipelineStep[] => localeData.steps.map(s => ({ ...s, icon: pipelineIcons[s.id], status: "pending" as StepStatus, output: s.id === "input" ? `"${localeData.prompts.input}"` : undefined, parallel: s.id === "draft" ? true : undefined, })); const [steps, setSteps] = useState(getInitialSteps()); const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); const updateStep = (id: string, updates: Partial) => { setSteps(prev => prev.map(s => s.id === id ? { ...s, ...updates } : s)); }; const resetSteps = () => { setExpandedStep(null); setSteps(getInitialSteps()); }; const runDemo = async () => { setIsRunning(true); resetSteps(); await delay(300); // Input ready updateStep("input", { status: "success" }); await delay(400); // Step 1: Outline updateStep("outline", { status: "running" }); await delay(1000); updateStep("outline", { status: "success", output: localeData.outputs.sectionsOutlined }); await delay(300); // Step 2: Draft (parallel) updateStep("draft", { status: "running", output: localeData.outputs.writingSectionsParallel }); await delay(1500); updateStep("draft", { status: "success", output: localeData.outputs.sectionsDrafted }); await delay(300); // Step 3: Review updateStep("review", { status: "running" }); await delay(1000); updateStep("review", { status: "success", output: localeData.outputs.editSuggestions }); await delay(300); // Step 4: Final Edit updateStep("edit", { status: "running" }); await delay(800); updateStep("edit", { status: "success", output: localeData.outputs.articlePolished }); await delay(300); // Step 5: Metadata updateStep("metadata", { status: "running" }); await delay(700); updateStep("metadata", { status: "success", output: localeData.outputs.seoMetadata }); setIsRunning(false); }; return (

{localeData.title}

{steps.map((step, index) => { const Icon = step.icon; const prompt = localeData.prompts[step.id]; const isExpanded = expandedStep === step.id; const showPrompt = step.status === "running" || isExpanded; return (

{index < steps.length - 1 && (

)}

{step.status === "pending" &&

} {step.status === "running" &&

} {step.status === "success" &&

}

{showPrompt && prompt && step.id !== "input" && (

{localeData.prompt}:

{prompt}

)}

); })}

); }