import React from 'react';
import { Link } from 'react-router-dom';
import { SettingsLayout } from './components/SettingsLayout';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { __ } from '@/lib/i18n';
import { Bell, Users, ChevronRight, Activity, Settings } from 'lucide-react';

export default function NotificationsSettings() {
  return (
    <SettingsLayout
      title={__('Notifications')}
      description={__('Manage notification recipients and delivery channels')}
      action={<div />} // Empty action to trigger contextual header
    >
      <div className="space-y-8">
        {/* Recipients Section */}
        <div>
          <div className="mb-4">
            <h2 className="text-lg font-semibold">{__('Recipients')}</h2>
            <p className="text-sm text-muted-foreground">
              {__('Configure notifications for different user types')}
            </p>
          </div>
          <div className="grid gap-6 md:grid-cols-2">
            {/* Staff Notifications */}
            <Card className="hover:shadow-md transition-shadow">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-primary/10 rounded-lg">
                    <Bell className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <CardTitle>{__('Staff')}</CardTitle>
                    <CardDescription>
                      {__('Alerts for admins and staff members')}
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-sm text-muted-foreground">
                  {__('Get notified about orders, low stock, new customers, and more. Configure email and push notifications for your team.')}
                </p>
                <div className="flex items-center justify-between pt-2">
                  <div className="text-sm text-muted-foreground">
                    {__('Orders, Products, Customers')}
                  </div>
                  <Link to="/settings/notifications/staff">
                    <Button variant="outline" size="sm">
                      {__('Configure')}
                      <ChevronRight className="ml-2 h-4 w-4" />
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>

            {/* Customer Notifications */}
            <Card className="hover:shadow-md transition-shadow">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-blue-500/10 rounded-lg">
                    <Users className="h-6 w-6 text-blue-500" />
                  </div>
                  <div>
                    <CardTitle>{__('Customer')}</CardTitle>
                    <CardDescription>
                      {__('Transactional emails and updates for customers')}
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-sm text-muted-foreground">
                  {__('Manage order confirmations, shipping updates, account emails, and marketing messages sent to your customers.')}
                </p>
                <div className="flex items-center justify-between pt-2">
                  <div className="text-sm text-muted-foreground">
                    {__('Orders, Shipping, Account')}
                  </div>
                  <Link to="/settings/notifications/customer">
                    <Button variant="outline" size="sm">
                      {__('Configure')}
                      <ChevronRight className="ml-2 h-4 w-4" />
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

        {/* Channels Section */}
        <div>
          <div className="mb-4">
            <h2 className="text-lg font-semibold">{__('Channels')}</h2>
            <p className="text-sm text-muted-foreground">
              {__('Configure notification delivery methods and settings')}
            </p>
          </div>
          <div className="grid gap-6 md:grid-cols-2">
            {/* Channel Configuration */}
            <Card className="hover:shadow-md transition-shadow">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-green-500/10 rounded-lg">
                    <Settings className="h-6 w-6 text-green-500" />
                  </div>
                  <div>
                    <CardTitle>{__('Channel Configuration')}</CardTitle>
                    <CardDescription>
                      {__('Configure notification channels and settings')}
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-sm text-muted-foreground">
                  {__('Configure email, push notifications, WhatsApp, Telegram, and other notification channels. Set templates and connection settings.')}
                </p>
                <div className="flex items-center justify-between pt-2">
                  <div className="text-sm text-muted-foreground">
                    {__('Email, Push, WhatsApp, Telegram')}
                  </div>
                  <Link to="/settings/notifications/channels">
                    <Button variant="outline" size="sm">
                      {__('Configure')}
                      <ChevronRight className="ml-2 h-4 w-4" />
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>

            {/* Activity Log */}
            <Card className="hover:shadow-md transition-shadow">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-purple-500/10 rounded-lg">
                    <Activity className="h-6 w-6 text-purple-500" />
                  </div>
                  <div>
                    <CardTitle>{__('Activity Log')}</CardTitle>
                    <CardDescription>
                      {__('View notification history and activities')}
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-sm text-muted-foreground">
                  {__('Track all notification activities, view delivery status, and monitor system events.')}
                </p>
                <div className="flex items-center justify-between pt-2">
                  <div className="text-sm text-muted-foreground">
                    {__('Coming soon')}
                  </div>
                  <Button variant="outline" size="sm" disabled>
                    {__('View Log')}
                    <ChevronRight className="ml-2 h-4 w-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </SettingsLayout>
  );
}