import React, { useState } from 'react';
import { Head } from '@inertiajs/react';
import EmployerLayout from '../../Layouts/EmployerLayout';
import { 
    Megaphone, 
    Send, 
    CheckCircle2, 
    Users, 
    Search, 
    Calendar,
    Target,
    Filter,
    ChevronRight,
    MessageSquare,
    Info
} from 'lucide-react';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DialogFooter
} from '@/components/ui/dialog';

export default function Announcements() {
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [searchTerm, setSearchTerm] = useState('');
    const [newAnnouncement, setNewAnnouncement] = useState({ title: '', content: '', audience: 'Shortlisted' });
    const [toastMessage, setToastMessage] = useState(null);
    const [announcements, setAnnouncements] = useState([
        {
            id: 1,
            title: 'Interview Schedule Updates',
            content: 'Hello everyone, we will be conducting the next round of interviews next week. Please keep your phones available and ensure you have a stable internet connection for the video call.',
            audience: 'Selected Candidates',
            created_at: '2 days ago',
            reads: 12,
            replies: 4
        },
        {
            id: 2,
            title: 'Welcome to the Recruitment Pool',
            content: 'We have successfully added your profile to our recruitment pool. We will contact you if your skills match our requirements.',
            audience: 'Shortlisted',
            created_at: '5 days ago',
            reads: 45,
            replies: 0
        }
    ]);

    const showToast = (message) => {
        setToastMessage(message);
        setTimeout(() => setToastMessage(null), 3000);
    };

    const handleCreate = (e) => {
        e.preventDefault();
        const newEntry = {
            id: announcements.length + 1,
            title: newAnnouncement.title,
            content: newAnnouncement.content,
            audience: newAnnouncement.audience,
            created_at: 'Just now',
            reads: 0,
            replies: 0
        };
        setAnnouncements([newEntry, ...announcements]);
        setNewAnnouncement({ title: '', content: '', audience: 'Shortlisted' });
        setIsDialogOpen(false);
        showToast('Announcement sent successfully');
    };

    const filteredAnnouncements = announcements.filter(ann => 
        ann.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        ann.content.toLowerCase().includes(searchTerm.toLowerCase())
    );

    const stats = [
        { label: 'Total Announcements', value: announcements.length, icon: Megaphone, color: 'text-blue-600', bg: 'bg-blue-50' },
        { label: 'Audience Reach', value: '57 Candidates', icon: Target, color: 'text-emerald-600', bg: 'bg-emerald-50' },
        { label: 'Avg. Engagement', value: '82%', icon: CheckCircle2, color: 'text-purple-600', bg: 'bg-purple-50' },
    ];

    return (
        <EmployerLayout title="Announcements">
            <Head title="Announcements - Employer Portal" />

            {toastMessage && (
                <div className="fixed bottom-8 right-8 bg-slate-900 text-white px-6 py-4 rounded-2xl shadow-2xl flex items-center space-x-3 z-[100] animate-in slide-in-from-bottom-5">
                    <div className="bg-emerald-500 p-1 rounded-full">
                        <CheckCircle2 className="w-4 h-4 text-white" />
                    </div>
                    <span className="font-bold text-xs uppercase tracking-widest">{toastMessage}</span>
                </div>
            )}

            <div className="space-y-6 select-none max-w-5xl mx-auto">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[32px] border border-slate-100 shadow-sm">
                    <div className="relative flex-1 max-w-md group">
                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
                        <input
                            type="text"
                            placeholder="Search announcements..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                        />
                    </div>

                    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                        <DialogTrigger asChild>
                            <button className="bg-[#185FA5] hover:bg-[#144f8a] text-white px-8 py-3 rounded-2xl font-black text-xs uppercase tracking-widest flex items-center justify-center space-x-2 transition-all shadow-lg shadow-blue-200/50 hover:-translate-y-1 active:translate-y-0">
                                <Megaphone className="w-4 h-4" />
                                <span>New Announcement</span>
                            </button>
                        </DialogTrigger>
                        <DialogContent className="sm:max-w-[500px] rounded-3xl p-0 overflow-hidden border-none shadow-2xl">
                            <div className="bg-[#185FA5] p-8 text-white relative">
                                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl" />
                                <DialogTitle className="text-2xl font-black relative z-10">Post Announcement</DialogTitle>
                                <DialogDescription className="text-blue-100 font-medium mt-2 relative z-10">
                                    This will be visible to your selected candidates immediately.
                                </DialogDescription>
                            </div>
                            
                            <form onSubmit={handleCreate} className="p-8 space-y-6 bg-white">
                                <div className="space-y-2">
                                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Target Audience</label>
                                    <div className="grid grid-cols-2 gap-3">
                                        {['Shortlisted', 'Selected Candidates'].map(aud => (
                                            <button
                                                key={aud}
                                                type="button"
                                                onClick={() => setNewAnnouncement({ ...newAnnouncement, audience: aud })}
                                                className={`px-4 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest border transition-all ${
                                                    newAnnouncement.audience === aud
                                                        ? 'bg-blue-50 border-[#185FA5] text-[#185FA5]'
                                                        : 'bg-slate-50 border-slate-200 text-slate-500 hover:bg-white'
                                                }`}
                                            >
                                                {aud}
                                            </button>
                                        ))}
                                    </div>
                                </div>

                                <div className="space-y-2">
                                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Title</label>
                                    <input
                                        type="text"
                                        required
                                        value={newAnnouncement.title}
                                        onChange={(e) => setNewAnnouncement({ ...newAnnouncement, title: e.target.value })}
                                        className="w-full px-5 py-3.5 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                                        placeholder="e.g. Schedule for Video Interview"
                                    />
                                </div>

                                <div className="space-y-2">
                                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Message Content</label>
                                    <textarea
                                        required
                                        rows="4"
                                        value={newAnnouncement.content}
                                        onChange={(e) => setNewAnnouncement({ ...newAnnouncement, content: e.target.value })}
                                        className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none resize-none"
                                        placeholder="Enter your message..."
                                    ></textarea>
                                </div>

                                <DialogFooter className="pt-4">
                                    <button
                                        type="submit"
                                        className="w-full bg-[#185FA5] hover:bg-[#144f8a] text-white py-4 rounded-2xl text-xs font-black uppercase tracking-widest flex items-center justify-center space-x-2 transition-all shadow-lg shadow-blue-200/50"
                                    >
                                        <Send className="w-4 h-4" />
                                        <span>Post Announcement</span>
                                    </button>
                                </DialogFooter>
                            </form>
                        </DialogContent>
                    </Dialog>
                </div>

                <div className="grid grid-cols-1 gap-4">
                    {filteredAnnouncements.length === 0 ? (
                        <div className="text-center py-24 bg-white rounded-[40px] border border-slate-200 shadow-sm text-slate-500 border-dashed">
                            <div className="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-6">
                                <Megaphone className="w-10 h-10 text-slate-200" />
                            </div>
                            <h3 className="font-black text-slate-900 text-lg uppercase tracking-tight">No announcements</h3>
                            <p className="font-bold text-xs text-slate-400 mt-1 uppercase tracking-widest">You haven't posted any announcements yet</p>
                        </div>
                    ) : (
                        filteredAnnouncements.map((ann) => (
                            <div key={ann.id} className="group bg-white rounded-[32px] border border-slate-100 p-6 shadow-sm hover:shadow-md transition-all duration-300 relative overflow-hidden flex flex-col md:flex-row md:items-start gap-6">
                                <div className="flex-1 space-y-3">
                                    <div className="flex flex-wrap items-center gap-3">
                                        <span className={`px-3 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-widest border ${
                                            ann.audience === 'Selected Candidates' 
                                                ? 'bg-emerald-50 border-emerald-100 text-emerald-700' 
                                                : 'bg-blue-50 border-blue-100 text-[#185FA5]'
                                        }`}>
                                            To: {ann.audience}
                                        </span>
                                        <div className="flex items-center text-slate-400 text-[10px] font-black uppercase tracking-widest">
                                            <Calendar className="w-3.5 h-3.5 mr-1.5" />
                                            {ann.created_at}
                                        </div>
                                    </div>

                                    <div className="space-y-1">
                                        <h4 className="text-lg font-black text-slate-900 tracking-tight">{ann.title}</h4>
                                        <p className="text-sm font-medium text-slate-600 leading-relaxed">{ann.content}</p>
                                    </div>
                                </div>

                                <div className="flex items-center space-x-3 md:border-l md:border-slate-50 md:pl-6 shrink-0">
                                    <button className="p-3 rounded-2xl bg-slate-50 text-slate-400 hover:text-[#185FA5] transition-all">
                                        <ChevronRight className="w-5 h-5" />
                                    </button>
                                </div>
                            </div>
                        ))
                    )}
                </div>
            </div>
        </EmployerLayout>
    );
}
