import React, { useState } from 'react';
import { Head, router } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';
import { 
    Send, 
    History,
    Sparkles
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';

export default function NotificationsCampaigns({ campaigns = [] }) {
    const [channel, setChannel] = useState('push');
    const [recipients, setRecipients] = useState('All Active Workers');
    const [title, setTitle] = useState('');
    const [message, setMessage] = useState('');

    const handleBroadcast = (e) => {
        e.preventDefault();
        router.post('/admin/notifications/broadcast', {
            channel,
            recipients,
            title,
            message
        }, {
            onSuccess: () => {
                setTitle('');
                setMessage('');
            }
        });
    };

    return (
        <AdminLayout title="Notifications">
            <Head title="Notifications" />

            <div className="font-sans max-w-4xl mx-auto space-y-8 pb-12">
                
                {/* Simplified Header */}
                <div className="border-b border-slate-200 pb-5">
                    <h1 className="text-xl font-black text-slate-800 uppercase tracking-tight">Send Notification</h1>
                    <p className="text-xs text-slate-500 mt-0.5 font-medium">Send quick push or WhatsApp alerts to workers and employers.</p>
                </div>

                <div className="grid grid-cols-1 gap-8">
                    
                    {/* Message Composer */}
                    <div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
                        <div className="mb-6 flex items-center justify-between">
                            <div>
                                <h3 className="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-1.5">
                                    <Sparkles className="w-4 h-4 text-[#0F6E56]" />
                                    <span>New Notification Alert</span>
                                </h3>
                                <p className="text-[10px] text-slate-400 font-semibold mt-1">Send a dynamic message immediately</p>
                            </div>
                        </div>

                        <form onSubmit={handleBroadcast} className="space-y-4 text-xs font-bold text-slate-700">
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div className="space-y-1">
                                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Message Channel</label>
                                    <select 
                                        className="w-full bg-slate-50 border rounded-xl px-3 py-2.5 outline-none cursor-pointer focus:bg-white"
                                        value={channel}
                                        onChange={e => setChannel(e.target.value)}
                                    >
                                        <option value="push">App Message</option>
                                        <option value="whatsapp">WhatsApp Message</option>
                                        <option value="both">Both Channels</option>
                                    </select>
                                </div>
                                <div className="space-y-1">
                                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Send To</label>
                                    <select 
                                        className="w-full bg-slate-50 border rounded-xl px-3 py-2.5 outline-none cursor-pointer focus:bg-white"
                                        value={recipients}
                                        onChange={e => setRecipients(e.target.value)}
                                    >
                                        <option value="All Active Workers">All Workers</option>
                                        <option value="All Employers">All Employers</option>
                                    </select>
                                </div>
                            </div>

                            <div className="space-y-1">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Message Title</label>
                                <input 
                                    type="text" 
                                    required
                                    className="w-full bg-slate-50 border rounded-xl px-3 py-2.5 outline-none focus:bg-white focus:ring-2 focus:ring-[#0F6E56]/10"
                                    placeholder="e.g. Account Update Alert"
                                    value={title}
                                    onChange={e => setTitle(e.target.value)}
                                />
                            </div>

                            <div className="space-y-1">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Message Text</label>
                                <textarea 
                                    rows="3"
                                    required
                                    className="w-full bg-slate-50 border rounded-xl p-3 outline-none focus:bg-white focus:ring-2 focus:ring-[#0F6E56]/10"
                                    placeholder="Type the message..."
                                    value={message}
                                    onChange={e => setMessage(e.target.value)}
                                />
                            </div>

                            <button type="submit" className="w-full py-3 bg-[#0F6E56] text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md hover:bg-[#085041] flex items-center justify-center gap-1.5">
                                <Send className="w-4 h-4" />
                                <span>Send Message</span>
                            </button>
                        </form>
                    </div>

                    {/* Recently Sent Logs */}
                    <div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm overflow-hidden">
                        <div className="mb-4">
                            <h3 className="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-1.5">
                                <History className="w-4 h-4 text-slate-600" />
                                <span>History</span>
                            </h3>
                            <p className="text-[10px] text-slate-400 font-semibold mt-0.5">Logs of recently sent alerts</p>
                        </div>

                        <div className="divide-y divide-slate-100">
                            {campaigns.map((camp) => (
                                <div key={camp.id} className="py-4 hover:bg-slate-50/50 transition-colors flex items-start justify-between gap-4 text-xs font-bold text-slate-700">
                                    <div className="space-y-1.5 flex-1">
                                        <div className="flex items-center space-x-2">
                                            <Badge className="bg-[#0F6E56]/10 text-[#0F6E56] border-none font-bold uppercase text-[8px]">{camp.channel}</Badge>
                                            <span className="text-[10px] text-slate-400 font-semibold">To: {camp.recipient_type}</span>
                                        </div>
                                        <h4 className="text-sm font-black text-slate-900">{camp.title}</h4>
                                        <p className="text-slate-500 font-medium text-[11px] leading-relaxed">{camp.message}</p>
                                    </div>
                                    <div className="text-right">
                                        <span className="text-[9px] text-slate-400 font-mono block">{camp.sent_at}</span>
                                        <div className="mt-2 text-[10px] font-black text-emerald-600 uppercase tracking-wide">
                                            Sent Successfully
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                </div>
            </div>
        </AdminLayout>
    );
}
