{t('Create Banner')}

{t('Create a new banner message to display to users')}

{t('Banner Information')} {t('Enter the details for the new banner message')}

Title * setData('title', e.target.value)} className={errors.title ? 'border-red-500' : ''} placeholder={t('Enter banner title')} /> {errors.title && (

{errors.title}

)}

Message *

setData('message', e.target.value)}
                  rows={4}
                  className={errors.message ? 'border-red-500' : ''}
                  placeholder={t('Enter banner message (HTML supported)')}
                />
                {errors.message && (
                  <p className="text-sm text-red-500">{errors.message}</p>
                )}
                <p className="text-sm text-muted-foreground">{t('HTML tags are supported for formatting')}</p>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="type">Type *</Label>
                  <Select value={data.type} onValueChange={(value: 'info' | 'warning' | 'success' | 'error') => setData('type', value)}>
                    <SelectTrigger id="type" className={errors.type ? 'border-red-500' : ''}>
                      <SelectValue placeholder={t('Select banner type')} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="info">{t('Info')}</SelectItem>
                      <SelectItem value="warning">{t('Warning')}</SelectItem>
                      <SelectItem value="success">{t('Success')}</SelectItem>
                      <SelectItem value="error">{t('Error')}</SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.type && (
                    <p className="text-sm text-red-500">{errors.type}</p>
                  )}
                </div>

<div className="space-y-2">
                  <Label htmlFor="target_audience">Target Audience *</Label>
                  <Select value={data.target_audience} onValueChange={(value: 'members' | 'students' | 'parents' | 'all') => setData('target_audience', value)}>
                    <SelectTrigger id="target_audience" className={errors.target_audience ? 'border-red-500' : ''}>
                      <SelectValue placeholder={t('Select audience')} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">{t('All Users')}</SelectItem>
                      <SelectItem value="members">{t('Members')}</SelectItem>
                      <SelectItem value="students">{t('Students')}</SelectItem>
                      <SelectItem value="parents">{t('Parents')}</SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.target_audience && (
                    <p className="text-sm text-red-500">{errors.target_audience}</p>
                  )}
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="start_date">Start Date *</Label>
                  <Input
                    id="start_date"
                    type="date"
                    value={data.start_date}
                    onChange={(e) => setData('start_date', e.target.value)}
                    className={errors.start_date ? 'border-red-500' : ''}
                  />
                  {errors.start_date && (
                    <p className="text-sm text-red-500">{errors.start_date}</p>
                  )}
                </div>

<div className="space-y-2">
                  <Label htmlFor="end_date">{t('End Date')}</Label>
                  <Input
                    id="end_date"
                    type="date"
                    value={data.end_date}
                    onChange={(e) => setData('end_date', e.target.value)}
                    className={errors.end_date ? 'border-red-500' : ''}
                  />
                  {errors.end_date && (
                    <p className="text-sm text-red-500">{errors.end_date}</p>
                  )}
                  <p className="text-sm text-muted-foreground">{t('Leave empty for no end date')}</p>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="display_duration_seconds">Display Duration (seconds) *</Label>
                <Input
                  id="display_duration_seconds"
                  type="number"
                  min="1"
                  max="300"
                  value={data.display_duration_seconds}
                  onChange={(e) => setData('display_duration_seconds', Number.parseInt(e.target.value, 10))}
                  className={errors.display_duration_seconds ? 'border-red-500' : ''}
                />
                {errors.display_duration_seconds && (
                  <p className="text-sm text-red-500">{errors.display_duration_seconds}</p>
                )}
                <p className="text-sm text-muted-foreground">{t('How long the banner stays visible (1-300 seconds)')}</p>
              </div>
            </CardContent>
          </Card>

<Card className="max-w-3xl">
            <CardHeader>
              <CardTitle>{t('Action Button (Optional)')}</CardTitle>
              <CardDescription>
                {t('Add a call-to-action button to the banner')}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="action_text">{t('Button Text')}</Label>
                <Input
                  id="action_text"
                  type="text"
                  value={data.action_text}
                  onChange={(e) => setData('action_text', e.target.value)}
                  className={errors.action_text ? 'border-red-500' : ''}
                  placeholder={t('e.g., Learn More, Sign Up')}
                />
                {errors.action_text && (
                  <p className="text-sm text-red-500">{errors.action_text}</p>
                )}
              </div>

<div className="space-y-2">
                <Label htmlFor="action_url">{t('Button URL')}</Label>
                <Input
                  id="action_url"
                  type="url"
                  value={data.action_url}
                  onChange={(e) => setData('action_url', e.target.value)}
                  className={errors.action_url ? 'border-red-500' : ''}
                  placeholder={t('https://example.com')}
                />
                {errors.action_url && (
                  <p className="text-sm text-red-500">{errors.action_url}</p>
                )}
              </div>
            </CardContent>
          </Card>

<Card className="max-w-3xl">
            <CardHeader>
              <CardTitle>{t('Display Options')}</CardTitle>
              <CardDescription>
                {t('Configure where and how the banner appears')}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <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="font-normal cursor-pointer">
                  Active (banner will be displayed immediately)
                </Label>
              </div>

<div className="flex items-center space-x-2">
                <Checkbox
                  id="is_dismissible"
                  checked={data.is_dismissible}
                  onCheckedChange={(checked) => setData('is_dismissible', checked as boolean)}
                />
                <Label htmlFor="is_dismissible" className="font-normal cursor-pointer">
                  Dismissible (users can close the banner)
                </Label>
              </div>

<div className="flex items-center space-x-2">
                <Checkbox
                  id="show_on_login"
                  checked={data.show_on_login}
                  onCheckedChange={(checked) => setData('show_on_login', checked as boolean)}
                />
                <Label htmlFor="show_on_login" className="font-normal cursor-pointer">
                  {t('Show on login page')}
                </Label>
              </div>

<div className="flex items-center space-x-2">
                <Checkbox
                  id="show_on_dashboard"
                  checked={data.show_on_dashboard}
                  onCheckedChange={(checked) => setData('show_on_dashboard', checked as boolean)}
                />
                <Label htmlFor="show_on_dashboard" className="font-normal cursor-pointer">
                  {t('Show on dashboard')}
                </Label>
              </div>

<div className="flex items-center space-x-2">
                <Checkbox
                  id="send_as_push_notification"
                  checked={data.send_as_push_notification}
                  onCheckedChange={(checked) => setData('send_as_push_notification', checked as boolean)}
                />
                <Label htmlFor="send_as_push_notification" className="font-normal cursor-pointer">
                  Send as push notification (mobile apps)
                </Label>
              </div>
            </CardContent>
          </Card>

<div className="flex gap-4 max-w-3xl">
            <Button type="submit" disabled={processing}>
              {processing ? 'Creating...' : 'Create Banner'}
            </Button>
            <Link href="/admin/banners">
              <Button type="button" variant="outline">
                {t('Cancel')}
              </Button>
            </Link>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}