'use client';

/**
 * Announcement Feed Component
 * 
 * Display system announcements and notices
 */

import { useState } from 'react';
import { useAnnouncements, Announcement } from '../../hooks/use-announcements';
import { 
  Bell, 
  Info, 
  AlertTriangle, 
  CheckCircle, 
  AlertCircle, 
  X, 
  ChevronRight,
  ExternalLink,
  Loader2 
} from 'lucide-react';

const TYPE_STYLES: Record<Announcement['type'], { bg: string; text: string; icon: any; border: string }> = {
  info: {
    bg: 'bg-blue-50',
    text: 'text-blue-700',
    icon: Info,
    border: 'border-blue-200',
  },
  warning: {
    bg: 'bg-amber-50',
    text: 'text-amber-700',
    icon: AlertTriangle,
    border: 'border-amber-200',
  },
  success: {
    bg: 'bg-emerald-50',
    text: 'text-emerald-700',
    icon: CheckCircle,
    border: 'border-emerald-200',
  },
  urgent: {
    bg: 'bg-red-50',
    text: 'text-red-700',
    icon: AlertCircle,
    border: 'border-red-200',
  },
};

interface AnnouncementCardProps {
  announcement: Announcement;
  onDismiss: (id: string) => void;
  compact?: boolean;
}

function AnnouncementCard({ announcement, onDismiss, compact = false }: AnnouncementCardProps) {
  const style = TYPE_STYLES[announcement.type];
  const Icon = style.icon;

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

    if (diffDays === 0) return 'Today';
    if (diffDays === 1) return 'Yesterday';
    if (diffDays < 7) return `${diffDays} days ago`;
    return date.toLocaleDateString();
  };

  if (compact) {
    return (
      <div
        className={`flex items-center gap-3 rounded-lg border ${style.border} ${style.bg} p-3 ${
          announcement.read ? 'opacity-60' : ''
        }`}
      >
        <Icon className={`h-4 w-4 ${style.text} flex-shrink-0`} />
        <div className="flex-1 min-w-0">
          <div className={`text-sm font-medium ${style.text} truncate`}>
            {announcement.title}
          </div>
        </div>
        <button
          onClick={() => onDismiss(announcement.id)}
          className={`p-1 rounded-full hover:bg-white/50 ${style.text}`}
        >
          <X className="h-3 w-3" />
        </button>
      </div>
    );
  }

  return (
    <div
      className={`rounded-xl border ${style.border} ${style.bg} p-4 ${
        announcement.read ? 'opacity-70' : ''
      }`}
    >
      <div className="flex items-start gap-3">
        <div className={`flex h-8 w-8 items-center justify-center rounded-full bg-white ${style.text}`}>
          <Icon className="h-4 w-4" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between gap-2">
            <h3 className={`font-semibold ${style.text}`}>{announcement.title}</h3>
            {announcement.pinned && (
              <span className="text-xs bg-white/50 px-2 py-0.5 rounded-full">Pinned</span>
            )}
          </div>
          <p className="mt-1 text-sm text-slate-600">{announcement.message}</p>
          <div className="mt-3 flex items-center justify-between">
            <span className="text-xs text-slate-400">{formatDate(announcement.createdAt)}</span>
            {announcement.link && (
              <a
                href={announcement.link}
                className={`flex items-center gap-1 text-sm font-medium ${style.text} hover:underline`}
              >
                {announcement.linkText || 'Learn more'}
                <ExternalLink className="h-3 w-3" />
              </a>
            )}
          </div>
        </div>
        <button
          onClick={() => onDismiss(announcement.id)}
          className={`p-1 rounded-full hover:bg-white/50 ${style.text} flex-shrink-0`}
        >
          <X className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}

interface AnnouncementFeedProps {
  maxItems?: number;
  showHeader?: boolean;
  compact?: boolean;
}

export function AnnouncementFeed({ maxItems = 5, showHeader = true, compact = false }: AnnouncementFeedProps) {
  const { announcements, unreadCount, isLoading, markAsRead, markAllAsRead, dismiss } = useAnnouncements();
  const [showAll, setShowAll] = useState(false);

  const displayedAnnouncements = showAll ? announcements : announcements.slice(0, maxItems);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-8">
        <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
      </div>
    );
  }

  if (announcements.length === 0) {
    return (
      <div className="text-center p-8 text-slate-500">
        <Bell className="h-8 w-8 mx-auto mb-2 opacity-50" />
        <p className="text-sm">No announcements</p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {showHeader && (
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-slate-900">Announcements</h3>
            {unreadCount > 0 && (
              <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1.5 text-xs font-medium text-white">
                {unreadCount}
              </span>
            )}
          </div>
          {unreadCount > 0 && (
            <button
              onClick={markAllAsRead}
              className="text-xs text-blue-600 hover:underline"
            >
              Mark all read
            </button>
          )}
        </div>
      )}

      <div className="space-y-2">
        {displayedAnnouncements.map((announcement) => (
          <AnnouncementCard
            key={announcement.id}
            announcement={announcement}
            onDismiss={dismiss}
            compact={compact}
          />
        ))}
      </div>

      {!showAll && announcements.length > maxItems && (
        <button
          onClick={() => setShowAll(true)}
          className="flex items-center justify-center gap-1 w-full py-2 text-sm text-slate-500 hover:text-slate-700"
        >
          Show {announcements.length - maxItems} more
          <ChevronRight className="h-4 w-4" />
        </button>
      )}
    </div>
  );
}

// Urgent announcement banner (for top of page)
export function UrgentAnnouncementBanner() {
  const { urgentAnnouncements, dismiss } = useAnnouncements();

  if (urgentAnnouncements.length === 0) return null;

  const announcement = urgentAnnouncements[0];

  return (
    <div className="bg-red-500 text-white px-4 py-2">
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-2">
          <AlertCircle className="h-4 w-4 flex-shrink-0" />
          <span className="text-sm font-medium">{announcement.title}</span>
          <span className="text-sm opacity-90">— {announcement.message}</span>
        </div>
        <button
          onClick={() => dismiss(announcement.id)}
          className="p-1 hover:bg-white/20 rounded-full"
        >
          <X className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}