import { useState, useEffect } from 'react' import { Head, Link, router, usePage } from '@inertiajs/react' import { PageTemplate } from '@/components/page-template' import { Button } from '@/components/ui/button' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Badge } from '@/components/ui/badge' import { RichTextField } from '@/components/ui/rich-text-field' import { Save } from 'lucide-react' import { useTranslation } from 'react-i18next' import { toast } from '@/components/custom-toast' interface EmailTemplateLang { id: number lang: string subject: string content: string } interface EmailTemplate { id: number name: string from: string email_template_langs: EmailTemplateLang[] } interface Language { code: string name: string countryCode: string } interface Props { template: EmailTemplate languages: Language[] variables: Record } export default function EmailTemplateShow({ template, languages, variables }: Props) { const { t } = useTranslation() const { flash } = usePage().props as any const [fromName, setFromName] = useState(template.from) const [currentLang, setCurrentLang] = useState(languages[0]?.code || 'en') const [templateLangs, setTemplateLangs] = useState( template.email_template_langs.reduce((acc, lang) => { acc[lang.lang] = { subject: lang.subject, content: lang.content } return acc }, {} as Record) ) const handleSubjectChange = (lang: string, subject: string) => { setTemplateLangs(prev => ({ ...prev, [lang]: { ...prev[lang], subject } })) } const handleContentChange = (lang: string, content: string) => { setTemplateLangs(prev => ({ ...prev, [lang]: { ...prev[lang], content } })) } const handleSave = () => { alert('Save functionality will be implemented later') } // Handle flash messages useEffect(() => { if (flash?.success) { toast.success(flash.success) } if (flash?.error) { toast.error(flash.error) } }, [flash]) const breadcrumbs = [ { title: t('Dashboard'), href: route('dashboard') }, { title: t('Email Templates'), href: route('email-templates.index') }, { title: template.name } ] const pageActions: any[] = [] return (

{t("Template Settings")}

{t("Template Name")}

{t("Template name cannot be changed")}

{t("From Name")} setFromName(e.target.value)} placeholder={t("Enter from name (e.g., {app_name}, Support Team)")} className="focus:ring-2 focus:ring-primary" />

{t("Email Content")}

{t("Customize email content for different languages")}

{languages.map((language) => ( {language.code.toUpperCase()} ))}

{languages.map((language) => (

{language.code.toUpperCase()}

{language.name}

{t("Edit email content for this language")}

{t("Email Subject")} handleSubjectChange(language.code, e.target.value)} placeholder={t("Enter email subject (you can use variables like {app_name})")} className="focus:ring-2 focus:ring-primary" />

handleContentChange(language.code, content)} placeholder={t("Write your email content here. You can use HTML formatting and variables...")} className="min-h-[300px]" />

💡 {t("Tip: Use the variables from the sidebar to personalize your emails")}

))}

{t("Available Variables")} {Object.keys(variables).length}

{t("Click to copy variables to use in your email content")}

{Object.entries(variables).map(([variable, description]) => (

{ navigator.clipboard.writeText(variable) }} >


                        {variable}

{t("Click to copy")}

{description}

))}

💡 {t("Tip")}: {t("These variables will be automatically replaced with actual values when emails are sent.")}

) }