import { Bell, Plus, Send, Trash2 } from 'lucide-react';
import { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { useToast } from '@/hooks/use-toast';

interface Notification {
  id: string;
  title: string;
  message: string;
  type: 'info' | 'success' | 'warning' | 'error';
  target: 'all' | 'users' | 'providers' | 'admins';
  status: 'draft' | 'sent' | 'scheduled';
  createdAt: string;
  sentAt?: string;
}

export default function Notifications() {
  const { toast } = useToast();
  const [notifications] = useState<Notification[]>([
    {
      id: '1',
      title: 'Sistem Bakımı',
      message: 'Sistem bakımı 15 Ocak 2026 tarihinde yapılacaktır.',
      type: 'warning',
      target: 'all',
      status: 'sent',
      createdAt: '2026-01-10T10:00:00Z',
      sentAt: '2026-01-10T10:00:00Z',
    },
    {
      id: '2',
      title: 'Yeni Özellik',
      message: 'Persona analizi özelliği aktif edildi.',
      type: 'success',
      target: 'admins',
      status: 'sent',
      createdAt: '2026-01-08T14:30:00Z',
      sentAt: '2026-01-08T14:30:00Z',
    },
  ]);

  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState('');
  const [message, setMessage] = useState('');
  const [type, setType] = useState<'info' | 'success' | 'warning' | 'error'>('info');
  const [target, setTarget] = useState<'all' | 'users' | 'providers' | 'admins'>('all');

  const handleSendNotification = () => {
    toast({
      title: 'Bildirim Gönderildi',
      description: 'Bildirim başarıyla gönderildi.',
    });
    setOpen(false);
    setTitle('');
    setMessage('');
    setType('info');
    setTarget('all');
  };

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'success':
        return 'bg-green-500/10 text-green-500';
      case 'warning':
        return 'bg-yellow-500/10 text-yellow-500';
      case 'error':
        return 'bg-red-500/10 text-red-500';
      default:
        return 'bg-blue-500/10 text-blue-500';
    }
  };

  const getTargetLabel = (target: string) => {
    switch (target) {
      case 'all':
        return 'Tüm Kullanıcılar';
      case 'users':
        return 'Kullanıcılar';
      case 'providers':
        return 'Sağlayıcılar';
      case 'admins':
        return 'Adminler';
      default:
        return target;
    }
  };

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Bildirim Yönetimi</h1>
          <p className="text-muted-foreground mt-1">
            Kullanıcılara sistem bildirimleri gönderin
          </p>
        </div>
        <Dialog open={open} onOpenChange={setOpen}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              Yeni Bildirim
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Yeni Bildirim Oluştur</DialogTitle>
              <DialogDescription>
                Kullanıcılara göndermek için yeni bir bildirim oluşturun
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label htmlFor="title">Başlık</Label>
                <Input
                  id="title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="Bildirim başlığı"
                />
              </div>
              <div>
                <Label htmlFor="message">Mesaj</Label>
                <Textarea
                  id="message"
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  placeholder="Bildirim mesajı"
                  rows={4}
                />
              </div>
              <div>
                <Label htmlFor="type">Tip</Label>
                <Select value={type} onValueChange={(value: any) => setType(value)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="info">Bilgi</SelectItem>
                    <SelectItem value="success">Başarı</SelectItem>
                    <SelectItem value="warning">Uyarı</SelectItem>
                    <SelectItem value="error">Hata</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="target">Hedef Kitle</Label>
                <Select value={target} onValueChange={(value: any) => setTarget(value)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tüm Kullanıcılar</SelectItem>
                    <SelectItem value="users">Kullanıcılar</SelectItem>
                    <SelectItem value="providers">Sağlayıcılar</SelectItem>
                    <SelectItem value="admins">Adminler</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setOpen(false)}>
                İptal
              </Button>
              <Button onClick={handleSendNotification}>
                <Send className="h-4 w-4 mr-2" />
                Gönder
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      {/* Stats */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Toplam Bildirim</CardTitle>
            <Bell className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{notifications.length}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Gönderilen</CardTitle>
            <Send className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {notifications.filter((n) => n.status === 'sent').length}
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Taslak</CardTitle>
            <Bell className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {notifications.filter((n) => n.status === 'draft').length}
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Zamanlanmış</CardTitle>
            <Bell className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {notifications.filter((n) => n.status === 'scheduled').length}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Notifications List */}
      <Card>
        <CardHeader>
          <CardTitle>Bildirimler</CardTitle>
          <CardDescription>Gönderilen ve taslak bildirimlerin listesi</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {notifications.map((notification) => (
              <div
                key={notification.id}
                className="flex items-start justify-between p-4 border rounded-lg"
              >
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <h3 className="font-semibold">{notification.title}</h3>
                    <Badge className={getTypeColor(notification.type)}>{notification.type}</Badge>
                    <Badge variant="outline">{getTargetLabel(notification.target)}</Badge>
                    <Badge variant={notification.status === 'sent' ? 'default' : 'secondary'}>
                      {notification.status === 'sent' ? 'Gönderildi' : notification.status}
                    </Badge>
                  </div>
                  <p className="text-sm text-muted-foreground mb-2">{notification.message}</p>
                  <p className="text-xs text-muted-foreground">
                    {notification.sentAt
                      ? `Gönderilme: ${new Date(notification.sentAt).toLocaleString('tr-TR')}`
                      : `Oluşturulma: ${new Date(notification.createdAt).toLocaleString('tr-TR')}`}
                  </p>
                </div>
                <Button variant="ghost" size="icon" className="text-destructive">
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
