import React from 'react';
import { Link } from 'react-router-dom';
import { SettingsLayout } from '../components/SettingsLayout';
import { SettingsCard } from '../components/SettingsCard';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { ChevronLeft } from 'lucide-react';
import { __ } from '@/lib/i18n';

export default function PushConfiguration() {
  return (
    <SettingsLayout
      title={__('Push Notifications Configuration')}
      description={__('Configure push notification templates and connection settings')}
      action={
        <Link to="/settings/notifications/channels">
          <Button variant="ghost" size="sm">
            <ChevronLeft className="mr-2 h-4 w-4" />
            {__('Back to Channels')}
          </Button>
        </Link>
      }
    >
      <Tabs defaultValue="template" className="space-y-6">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="template">{__('Template Settings')}</TabsTrigger>
          <TabsTrigger value="connection">{__('Connection Settings')}</TabsTrigger>
        </TabsList>

        <TabsContent value="template" className="space-y-4">
          <SettingsCard
            title={__('Push Notification Template')}
            description={__('Customize how push notifications appear')}
          >
            <div className="space-y-6">
              {/* Icon */}
              <div className="space-y-2">
                <Label htmlFor="push-icon">{__('Notification Icon URL')}</Label>
                <Input
                  id="push-icon"
                  type="url"
                  placeholder="https://example.com/icon.png"
                />
                <p className="text-xs text-muted-foreground">
                  {__('Icon displayed in push notifications (recommended: 192x192px PNG)')}
                </p>
              </div>

              {/* Badge */}
              <div className="space-y-2">
                <Label htmlFor="push-badge">{__('Badge Icon URL')}</Label>
                <Input
                  id="push-badge"
                  type="url"
                  placeholder="https://example.com/badge.png"
                />
                <p className="text-xs text-muted-foreground">
                  {__('Small icon shown on notification badge (recommended: 96x96px PNG)')}
                </p>
              </div>

              {/* Sound */}
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>{__('Enable Sound')}</Label>
                  <p className="text-xs text-muted-foreground">
                    {__('Play default notification sound')}
                  </p>
                </div>
                <Switch defaultChecked />
              </div>

              {/* Vibrate */}
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>{__('Enable Vibration')}</Label>
                  <p className="text-xs text-muted-foreground">
                    {__('Vibrate device on notification (mobile only)')}
                  </p>
                </div>
                <Switch defaultChecked />
              </div>
            </div>
          </SettingsCard>
        </TabsContent>

        <TabsContent value="connection" className="space-y-4">
          <SettingsCard
            title={__('Push Notification Service')}
            description={__('Configure how push notifications are delivered')}
          >
            <div className="space-y-4">
              <div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                <h4 className="font-medium text-sm mb-2">{__('Browser-Native Push (Default)')}</h4>
                <p className="text-sm text-muted-foreground">
                  {__(
                    'Uses the browser\'s built-in Push API. No external service required. Works great for PWA applications.'
                  )}
                </p>
              </div>

              <div className="bg-muted/50 rounded-lg p-4">
                <p className="text-sm text-muted-foreground mb-3">
                  💡 {__('Want more features? Install one of these addons:')}
                </p>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li className="flex items-start gap-2">
                    <span className="text-primary">•</span>
                    <span>
                      <strong>{__('Firebase Cloud Messaging (FCM)')}</strong> - {__('Advanced features, analytics, and cross-platform support')}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-primary">•</span>
                    <span>
                      <strong>{__('OneSignal')}</strong> - {__('Easy setup, segmentation, and A/B testing')}
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </SettingsCard>
        </TabsContent>
      </Tabs>
    </SettingsLayout>
  );
}