"use client";

import { useEffect, useState } from "react";
import {
  ArrowLeft,
  Bell,
  CheckCheck,
  Loader2,
  Calendar,
  Filter,
  ChevronDown,
  Megaphone,
} from "lucide-react";
import Link from "next/link";
import { useAnnouncements, Announcement } from "@/app/context/AnnouncementContext";
import { parseHtmlParagraphs, cleanHtmlContent } from "@/lib/htmlUtils";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

type FilterType = "all" | "read" | "unread";

export default function AnnouncementDetailsPage() {
  const {
    announcements,
    unreadCount,
    totalCount,
    loading,
    markAsRead,
    markAllAsRead,
  } = useAnnouncements();

  const { language } = useLanguage();
  const t = getTranslation(language).announcementPage;

  const [filter, setFilter] = useState<FilterType>("all");
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [expandedId, setExpandedId] = useState<string | null>(null);

  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
      return date.toLocaleDateString("en-US", {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
      });
    } catch {
      return "";
    }
  };

  const formatTime = (dateString: string) => {
    try {
      const date = new Date(dateString);
      return date.toLocaleTimeString("en-US", {
        hour: "2-digit",
        minute: "2-digit",
      });
    } catch {
      return "";
    }
  };

  const getFilteredAnnouncements = () => {
    switch (filter) {
      case "read":
        return announcements.filter((a) => a.is_read);
      case "unread":
        return announcements.filter((a) => !a.is_read);
      default:
        return announcements;
    }
  };

  const filteredAnnouncements = getFilteredAnnouncements();

  const handleToggleExpand = async (announcement: Announcement) => {
    // Mark as read when expanded
    if (!announcement.is_read) {
      await markAsRead([Number(announcement.id)]);
    }
    setExpandedId(expandedId === announcement.id ? null : announcement.id);
  };

  const handleMarkAllRead = async () => {
    await markAllAsRead();
  };

  const getFilterLabel = () => {
    switch (filter) {
      case "read":
        return t.read;
      case "unread":
        return t.unread;
      default:
        return t.all;
    }
  };

  const formatDescription = (text: string) => {
    return parseHtmlParagraphs(text);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-[#FFF8EE] to-white mt-20">
      {/* Top Bar (Mobile) */}
      <div className="flex md:hidden items-center gap-3 p-4 border-b bg-white sticky top-20 z-10">
        <Link href="/" className="text-gray-700">
          <ArrowLeft className="w-5 h-5" />
        </Link>
        <h1 className="text-lg font-semibold text-gray-900">{t.title}</h1>
      </div>

      {/* Desktop Header */}
      <div className="hidden md:block">
        <div className="max-w-4xl mx-auto px-4 pt-10 pb-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link
                href="/"
                className="p-2 rounded-full hover:bg-gray-100 transition-colors"
              >
                <ArrowLeft className="w-5 h-5 text-gray-600" />
              </Link>
              <div>
                <h1 className="text-3xl font-bold text-gray-900 tracking-wide">
                  {t.title}
                </h1>
                <p className="text-sm text-gray-500 mt-1">
                  {t.subtitle}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Stats & Actions Bar */}
      <div className="max-w-4xl mx-auto px-4 py-4">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            {/* Stats */}
            <div className="flex items-center gap-6">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#FFF4E4] to-[#FFF8EE] flex items-center justify-center">
                  <Megaphone className="w-6 h-6 text-[#FAA631]" />
                </div>
                <div>
                  <p className="text-2xl font-bold text-gray-900">
                    {totalCount}
                  </p>
                  <p className="text-xs text-gray-500">{t.totalAnnouncements}</p>
                </div>
              </div>

              {unreadCount > 0 && (
                <div className="flex items-center gap-2 px-4 py-2 bg-blue-50 rounded-full">
                  <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
                  <span className="text-sm font-medium text-blue-700">
                    {unreadCount} {t.unread}
                  </span>
                </div>
              )}
            </div>

            {/* Actions */}
            <div className="flex items-center gap-3">
              {/* Filter Dropdown */}
              <div className="relative">
                <button
                  onClick={() => setIsFilterOpen(!isFilterOpen)}
                  className="flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-200 hover:border-[#FAA631] transition-colors text-sm"
                >
                  <Filter className="w-4 h-4 text-gray-500" />
                  <span>{getFilterLabel()}</span>
                  <ChevronDown className="w-4 h-4 text-gray-500" />
                </button>

                {isFilterOpen && (
                  <div className="absolute right-0 mt-2 w-40 bg-white rounded-xl shadow-lg border overflow-hidden z-50">
                    {[
                      { value: "all" as const, label: t.all },
                      { value: "unread" as const, label: t.unread },
                      { value: "read" as const, label: t.read },
                    ].map((option) => (
                      <button
                        key={option.value}
                        onClick={() => {
                          setFilter(option.value);
                          setIsFilterOpen(false);
                        }}
                        className={`w-full px-4 py-2.5 text-left text-sm transition ${
                          filter === option.value
                            ? "bg-orange-50 text-[#FAA631] font-semibold"
                            : "hover:bg-gray-50 text-gray-700"
                        }`}
                      >
                        {option.label}
                      </button>
                    ))}
                  </div>
                )}
              </div>

              {/* Mark All Read Button */}
              {unreadCount > 0 && (
                <button
                  onClick={handleMarkAllRead}
                  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[#FAA631] text-white text-sm font-medium hover:bg-[#e0911d] transition-colors"
                >
                  <CheckCheck className="w-4 h-4" />
                  <span className="hidden md:inline">{t.markAllRead}</span>
                </button>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Announcements List */}
      <div className="max-w-4xl mx-auto px-4 py-4 pb-12">
        {loading ? (
          <div className="flex flex-col items-center justify-center py-20">
            <Loader2 className="w-10 h-10 text-[#FAA631] animate-spin" />
            <p className="text-sm text-gray-500 mt-4">
              {t.loading}
            </p>
          </div>
        ) : filteredAnnouncements.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-20 bg-white rounded-2xl border border-gray-100">
            <Megaphone className="w-16 h-16 text-gray-300 mb-4" />
            <p className="text-lg font-medium text-gray-700">
              {t.noAnnouncements}
            </p>
            <p className="text-sm text-gray-500 mt-1">
              {filter !== "all"
                ? t.noFiltered.replace("{filter}", filter === "read" ? t.read.toLowerCase() : t.unread.toLowerCase())
                : t.checkBackLater}
            </p>
          </div>
        ) : (
          <div className="space-y-4">
            {filteredAnnouncements.map((announcement) => (
              <div
                key={announcement.id}
                className={`bg-white rounded-2xl border overflow-hidden transition-all duration-300 hover:shadow-lg ${
                  !announcement.is_read
                    ? "border-l-4 border-l-[#FAA631] border-gray-100"
                    : "border-gray-100"
                }`}
              >
                <button
                  onClick={() => handleToggleExpand(announcement)}
                  className="w-full text-left"
                >
                  <div className="p-5 md:p-6">
                    <div className="flex items-start gap-4">
                      {/* Status Indicator */}
                      <div className="mt-1">
                        {!announcement.is_read ? (
                          <div className="w-3 h-3 rounded-full bg-[#FAA631] animate-pulse" />
                        ) : (
                          <div className="w-3 h-3 rounded-full bg-green-500" />
                        )}
                      </div>

                      {/* Content */}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex-1">
                            <h3
                              className={`text-base md:text-lg mb-2 ${
                                !announcement.is_read
                                  ? "font-bold text-gray-900"
                                  : "font-semibold text-gray-800"
                              }`}
                            >
                              {announcement.title}
                            </h3>

                            {/* Date Badge */}
                            <div className="flex items-center gap-2 text-xs text-gray-500 mb-3">
                              <Calendar className="w-3.5 h-3.5" />
                              <span>{formatDate(announcement.created_at)}</span>
                              <span className="text-gray-300">•</span>
                              <span>{formatTime(announcement.created_at)}</span>
                            </div>
                          </div>

                          {/* Status Badge */}
                          {!announcement.is_read && (
                            <span className="shrink-0 px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
                              {t.new}
                            </span>
                          )}
                        </div>

                        {/* Preview / Full Description */}
                        <div
                          className={`text-gray-600 text-sm md:text-base leading-relaxed overflow-hidden transition-all duration-300 ${
                            expandedId === announcement.id
                              ? "max-h-[2000px]"
                              : "max-h-12"
                          }`}
                        >
                          {expandedId === announcement.id ? (
                            <ul className="space-y-2">
                              {formatDescription(
                                announcement.description,
                              ).map((line, index) => (
                                <li key={index} className="flex gap-3 items-start">
                                  <span className="w-2 h-2 bg-[#284A5F] rounded-full mt-1.5 shrink-0" />
                                  <span>{line}</span>
                                </li>
                              ))}
                            </ul>
                          ) : (
                            <p className="line-clamp-2">
                              {cleanHtmlContent(
                                announcement.description,
                              )}
                            </p>
                          )}
                        </div>

                        {/* Expand/Collapse Hint */}
                        <p className="text-xs text-[#FAA631] mt-3 font-medium">
                          {expandedId === announcement.id
                            ? t.clickToCollapse
                            : t.clickToViewMore}
                        </p>
                      </div>
                    </div>
                  </div>
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}