import React, { useState } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm, router } from '@inertiajs/react';
import { PageProps } from '@/types';
import { swal } from '@/lib/swal';

interface NotificationLog {
    id: number;
    title: string;
    body: string;
    target_type: string;
    target_user?: { first_name: string, last_name: string, email: string };
    sender?: { first_name: string, last_name: string };
    status: string;
    created_at: string;
}

interface NotificationsProps extends PageProps {
    logs: {
        data: NotificationLog[];
        links: any[];
        meta: { current_page: number; last_page: number; total: number; per_page: number };
    };
    users: { id: number, first_name: string, last_name: string, email: string }[];
}

export default function NotificationsIndex({ logs, users }: NotificationsProps) {
    const { data, setData, post, processing, reset, errors } = useForm<{
        title: string;
        body: string;
        image_url: string;
        deep_link: string;
        target_type: string;
        target_user_id: string;
    }>({
        title: '',
        body: '',
        image_url: '',
        deep_link: '',
        target_type: 'all',
        target_user_id: '',
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route('notifications.store'), {
            onSuccess: () => {
                reset();
                swal.success('Dispatched', 'Notification has been sent to devices.');
            },
        });
    };

    return (
        <AuthenticatedLayout>
            <Head title="Push Notifications" />

            <div className="flex items-center justify-between mb-8 anim-down">
                <div>
                    <h1 className="text-xl font-bold text-[#3D4E4B] tracking-tight leading-none">Notification Center</h1>
                    <p className="text-sm font-semibold text-gray-400 tracking-tight mt-2">Broadcast messages and alerts to Android devices</p>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                {/* Composer Form */}
                <div className="lg:col-span-5">
                    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden anim-up">
                        <div className="px-6 py-4 border-b border-gray-50 bg-gray-50/30">
                            <h2 className="text-sm font-bold text-[#3D4E4B] tracking-tight">Compose Broadcast</h2>
                            <p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1">New FCM Message</p>
                        </div>
                        <div className="p-8">
                            <form onSubmit={handleSubmit} className="space-y-6">
                                <div className="space-y-1.5">
                                    <label className="text-xs font-bold text-gray-500 ml-1">Message Title</label>
                                    <input value={data.title} onChange={e => setData('title', e.target.value)} placeholder="e.g. Flash Sale Alert!" className={`input-field ${errors.title ? 'is-error' : ''}`} />
                                    {errors.title && <p className="text-[10px] text-red-500 font-bold ml-1">{errors.title}</p>}
                                </div>

                                <div className="space-y-1.5">
                                    <label className="text-xs font-bold text-gray-500 ml-1">Message Body</label>
                                    <textarea value={data.body} onChange={e => setData('body', e.target.value)} rows={3} placeholder="Write your notification message here..." className={`input-field py-3 resize-none ${errors.body ? 'is-error' : ''}`} />
                                    {errors.body && <p className="text-[10px] text-red-500 font-bold ml-1">{errors.body}</p>}
                                </div>

                                <div className="grid grid-cols-2 gap-4">
                                    <div className="space-y-1.5 text-xs font-bold text-gray-500 ml-1">
                                        <label>Target Audience</label>
                                        <select value={data.target_type} onChange={e => setData('target_type', e.target.value)} className="input-field mt-1.5 h-10">
                                            <option value="all">All Users</option>
                                            <option value="individual">Specific User</option>
                                        </select>
                                    </div>
                                    {data.target_type === 'individual' && (
                                        <div className="space-y-1.5 text-xs font-bold text-gray-500 ml-1">
                                            <label>Select User</label>
                                            <select value={data.target_user_id} onChange={e => setData('target_user_id', e.target.value)} className="input-field mt-1.5 h-10">
                                                <option value="">Choose User...</option>
                                                {users.map(u => <option key={u.id} value={u.id}>{u.first_name} {u.last_name}</option>)}
                                            </select>
                                        </div>
                                    )}
                                </div>

                                <div className="space-y-1.5">
                                    <label className="text-xs font-bold text-gray-500 ml-1">Deep Link (Optional)</label>
                                    <input value={data.deep_link} onChange={e => setData('deep_link', e.target.value)} placeholder="app://screen/profile" className="input-field" />
                                </div>

                                <div className="pt-4 border-t border-gray-50">
                                    <button type="submit" disabled={processing} className="w-full h-11 bg-[#3D4E4B] text-white text-xs font-black uppercase tracking-widest rounded-xl hover:bg-[#2D3A38] transition-all shadow-lg shadow-[#3D4E4B]/20 disabled:opacity-60">
                                        {processing ? 'Sending...' : 'Send Notification'}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {/* History Table */}
                <div className="lg:col-span-7">
                    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden anim-up" style={{ animationDelay: '0.1s' }}>
                        <div className="px-6 py-4 border-b border-gray-50">
                            <h2 className="text-sm font-bold text-[#3D4E4B] tracking-tight">Recent Broadcasts</h2>
                        </div>
                        <div className="overflow-x-auto">
                            <table className="w-full text-left border-collapse">
                                <thead className="bg-gray-50/50">
                                    <tr>
                                        <th className="px-6 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">Message</th>
                                        <th className="px-6 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">Target</th>
                                        <th className="px-6 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">Status</th>
                                        <th className="px-6 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">Sent At</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-gray-50">
                                    {logs.data.map(log => (
                                        <tr key={log.id} className="hover:bg-gray-50/30 transition-colors group">
                                            <td className="px-6 py-4">
                                                <div className="text-sm font-bold text-[#3D4E4B] tracking-tight">{log.title}</div>
                                                <div className="text-[10px] text-gray-400 font-medium truncate max-w-[200px] mt-0.5">{log.body}</div>
                                            </td>
                                            <td className="px-6 py-4">
                                                <span className={`text-[10px] font-black uppercase tracking-widest ${log.target_type === 'all' ? 'text-[#D4A017]' : 'text-blue-600'}`}>
                                                    {log.target_type === 'all' ? 'All Devices' : (log.target_user?.first_name || 'Individual')}
                                                </span>
                                            </td>
                                            <td className="px-6 py-4">
                                                <span className={`px-2 py-0.5 rounded-md text-[9px] font-black uppercase tracking-widest border ${log.status === 'sent' ? 'bg-emerald-50 text-emerald-600 border-emerald-100' : 'bg-red-50 text-red-500 border-red-100'}`}>
                                                    {log.status}
                                                </span>
                                            </td>
                                            <td className="px-6 py-4 text-[10px] font-bold text-gray-400">
                                                {new Date(log.created_at).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}
                                            </td>
                                        </tr>
                                    ))}
                                    {logs.data.length === 0 && (
                                        <tr>
                                            <td colSpan={4} className="px-6 py-16 text-center">
                                                <div className="flex flex-col items-center gap-3">
                                                    <div className="w-12 h-12 rounded-2xl bg-gray-50 border border-gray-100 flex items-center justify-center">
                                                        <svg className="w-5 h-5 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
                                                    </div>
                                                    <p className="text-xs font-bold text-gray-300">No broadcasts sent yet</p>
                                                </div>
                                            </td>
                                        </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>

                        {/* Pagination */}
                        {logs.meta && logs.meta.last_page > 1 && (
                            <div className="px-6 py-4 border-t border-gray-50 flex items-center justify-between">
                                <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                                    {logs.meta.total} total — page {logs.meta.current_page} of {logs.meta.last_page}
                                </p>
                                <div className="flex items-center gap-1">
                                    {logs.links.map((link: any, i: number) => (
                                        <button
                                            key={i}
                                            disabled={!link.url || link.active}
                                            onClick={() => link.url && router.get(link.url, {}, { preserveScroll: true })}
                                            className={`h-8 min-w-[2rem] px-2 rounded-lg text-xs font-bold transition-all border
                                                ${link.active ? 'bg-[#3D4E4B] text-white border-[#3D4E4B]' : 'bg-white text-gray-400 border-gray-100 hover:border-gray-200 hover:text-[#3D4E4B]'}
                                                ${!link.url ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer'}`}
                                            dangerouslySetInnerHTML={{ __html: link.label }}
                                        />
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
