{/* Header */}

{t('Create PDF Template')}

{t('Create a new PDF template with dynamic fields')}

{/* Basic Information */} {t('Basic Information')} {t('Template name, slug, and category')}

Template Name * handleNameChange(e.target.value)} placeholder={t('e.g., Yahrzeit Donation Letter')} required /> {errors.name &&

{errors.name}

}

Slug * setData('slug', e.target.value)} placeholder={t('e.g., yahrzeit-donation-letter')} required />

Unique identifier (letters, numbers, and hyphens only)

{errors.slug &&

{errors.slug}

}

Category * {errors.category &&

{errors.category}

}

{t('Description')}

setData('description', e.target.value)}
                                        placeholder={t("Brief description of this template's purpose...")}
                                        rows={3}
                                    />
                                    {errors.description && <p className="text-sm text-red-600 mt-1">{errors.description}</p>}
                                </div>

<div className="flex items-center space-x-2">
                                    <Checkbox
                                        id="is_active"
                                        checked={data.is_active}
                                        onCheckedChange={(checked) => setData('is_active', checked as boolean)}
                                    />
                                    <Label htmlFor="is_active" className="cursor-pointer">
                                        Active (available for use)
                                    </Label>
                                </div>
                            </CardContent>
                        </Card>

{/* Available Fields */}
                        <Card>
                            <CardHeader>
                                <CardTitle>{t('Available Fields')}</CardTitle>
                                <CardDescription>
                                    Define fields that can be used in the template using {'{{'} field_name {'}}'}
                                </CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start space-x-3">
                                    <Info className="h-5 w-5 text-blue-600 mt-0.5" />
                                    <div className="text-sm text-blue-800">
                                        <p className="font-semibold mb-1">{t('How to use fields:')}</p>
                                        <p>In your HTML content, use {'{{'} field_name {'}}'} to insert field values. For example: {'{{'} deceased_name {'}}'} will be replaced with the actual deceased person's name.</p>
                                    </div>
                                </div>

{/* Field List */}
                                {data.available_fields.length > 0 && (
                                    <div className="space-y-2">
                                        {data.available_fields.map((field, index) => (
                                            <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                                <div className="flex-1">
                                                    <div className="flex items-center gap-2">
                                                        <code className="text-sm bg-gray-200 px-2 py-1 rounded">
                                                            {'{{'} {field.name} {'}}'}
                                                        </code>
                                                        <span className="font-medium">{field.label}</span>
                                                        {field.required && (
                                                            <span className="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">{t('Required')}</span>
                                                        )}
                                                    </div>
                                                    {field.description && (
                                                        <p className="text-sm text-gray-600 mt-1">{field.description}</p>
                                                    )}
                                                </div>
                                                <Button
                                                    type="button"
                                                    variant="ghost"
                                                    size="sm"
                                                    onClick={() => handleRemoveField(index)}
                                                >
                                                    <Trash2 className="h-4 w-4 text-red-500" />
                                                </Button>
                                            </div>
                                        ))}
                                    </div>
                                )}

{/* Add New Field */}
                                <div className="border-t pt-4 space-y-4">
                                    <h4 className="font-semibold">{t('Add New Field')}</h4>
                                    <div className="grid gap-4 md:grid-cols-2">
                                        <div>
                                            <Label htmlFor="field_name">Field Name *</Label>
                                            <Input
                                                id="field_name"
                                                value={newField.name}
                                                onChange={(e) => setNewField({ ...newField, name: e.target.value.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '') })}
                                                placeholder={t('e.g., deceased_name')}
                                            />
                                        </div>
                                        <div>
                                            <Label htmlFor="field_label">Field Label *</Label>
                                            <Input
                                                id="field_label"
                                                value={newField.label}
                                                onChange={(e) => setNewField({ ...newField, label: e.target.value })}
                                                placeholder={t('e.g., Deceased Name')}
                                            />
                                        </div>
                                        <div>
                                            <Label htmlFor="field_type">{t('Field Type')}</Label>
                                            <Select 
                                                value={newField.type} 
                                                onValueChange={(value: any) => setNewField({ ...newField, type: value })}
                                            >
                                                <SelectTrigger>
                                                    <SelectValue />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="text">{t('Text')}</SelectItem>
                                                    <SelectItem value="textarea">{t('Textarea')}</SelectItem>
                                                    <SelectItem value="date">{t('Date')}</SelectItem>
                                                    <SelectItem value="number">{t('Number')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </div>
                                        <div>
                                            <Label htmlFor="field_default">{t('Default Value')}</Label>
                                            <Input
                                                id="field_default"
                                                value={newField.default_value}
                                                onChange={(e) => setNewField({ ...newField, default_value: e.target.value })}
                                                placeholder={t('Optional')}
                                            />
                                        </div>
                                        <div className="md:col-span-2">
                                            <Label htmlFor="field_description">{t('Description')}</Label>
                                            <Input
                                                id="field_description"
                                                value={newField.description}
                                                onChange={(e) => setNewField({ ...newField, description: e.target.value })}
                                                placeholder={t('Optional field description')}
                                            />
                                        </div>
                                        <div className="flex items-center space-x-2">
                                            <Checkbox
                                                id="field_required"
                                                checked={newField.required}
                                                onCheckedChange={(checked) => setNewField({ ...newField, required: checked as boolean })}
                                            />
                                            <Label htmlFor="field_required" className="cursor-pointer">
                                                {t('Required field')}
                                            </Label>
                                        </div>
                                    </div>
                                    <Button type="button" onClick={handleAddField} variant="outline" size="sm">
                                        <Plus className="h-4 w-4 me-2" />
                                        {t('Add Field')}
                                    </Button>
                                </div>
                                {errors.available_fields && <p className="text-sm text-red-600 mt-1">{errors.available_fields}</p>}
                            </CardContent>
                        </Card>

{/* HTML Content */}
                        <Card>
                            <CardHeader>
                                <CardTitle>{t('HTML Content')}</CardTitle>
                                <CardDescription>
                                    {t('HTML template with field placeholders')}
                                </CardDescription>
                            </CardHeader>
                            <CardContent>
                                <Textarea
                                    value={data.html_content}
                                    onChange={(e) => setData('html_content', e.target.value)}
                                    placeholder="Enter HTML content with {{field_name}} placeholders..."
                                    rows={15}
                                    className="font-mono text-sm"
                                    required
                                />
                                {errors.html_content && <p className="text-sm text-red-600 mt-1">{errors.html_content}</p>}
                            </CardContent>
                        </Card>

{/* Actions */}
                        <div className="flex items-center justify-end space-x-4">
                            <Link href="/admin/pdf-templates">
                                <Button type="button" variant="outline">{t('Cancel')}</Button>
                            </Link>
                            <Button type="submit" disabled={processing}>
                                {processing ? 'Creating...' : 'Create Template'}
                            </Button>
                        </div>
                    </form>
                </div>
            </div>
        </AppLayout>
    );
}