'use client';

import { useState } from 'react';
import { Send, Bell } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';

const ORANGE_BTN = 'bg-gradient-to-r from-orange-600 to-amber-500 shadow-sm';

export function AdminNotifications() {
  const [title, setTitle] = useState('');
  const [message, setMessage] = useState('');
  const [target, setTarget] = useState('all');
  const [sending, setSending] = useState(false);

  const handleSend = async (e: React.FormEvent) => {
    e.preventDefault(); setSending(true);
    try { await fetch('/api/admin/notify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title, message, target }) }); setTitle(''); setMessage(''); setTarget('all'); } catch { }
    setSending(false);
  };

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-semibold">Send Notifications</h3>
        <p className="text-sm text-muted-foreground">Broadcast notifications to your users</p>
      </div>
      <Card className="border-0 shadow-sm">
        <CardHeader><CardTitle className="flex items-center gap-2 text-sm"><Bell className="h-4 w-4 text-orange-500" />New Notification</CardTitle></CardHeader>
        <CardContent>
          <form onSubmit={handleSend} className="space-y-4">
            <div className="space-y-1.5"><Label className="text-xs font-medium">Title</Label><Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Notification title" required /></div>
            <div className="space-y-1.5"><Label className="text-xs font-medium">Message</Label><Input value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Notification message" required /></div>
            <div className="space-y-1.5">
              <Label className="text-xs font-medium">Target Audience</Label>
              <select value={target} onChange={(e) => setTarget(e.target.value)} className="w-full rounded-lg border bg-background px-3 py-2 text-sm">
                <option value="all">All Users</option><option value="active">Active Users</option><option value="houseOwners">House Owners</option><option value="shopOwners">Shop Owners</option><option value="sellers">Sellers</option><option value="admins">Admins</option>
              </select>
            </div>
            <Button type="submit" className={`gap-2 ${ORANGE_BTN} font-semibold`} disabled={sending}>
              <Send className="h-4 w-4" />{sending ? 'Sending...' : 'Send Notification'}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}