"use client";

import { useState, useCallback, useEffect } from "react";
import { Plus, Pin, Trash2, Edit2, X, ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import {
  fetchAnnouncements,
  createAnnouncement,
  updateAnnouncement,
  deleteAnnouncement,
  getUserRole,
  type Announcement,
} from "@/lib/supabase/noticeboard-actions";
import PageSkeleton from "./PageSkeleton";

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString("en-AU", {
    day: "numeric",
    month: "short",
    year: "numeric",
  });
}

function getInitials(name: string): string {
  return name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2);
}

export default function NoticeboardPage() {
  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
  const [loading, setLoading] = useState(true);
  const [role, setRole] = useState("employee");
  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
  const [selectedAnnouncement, setSelectedAnnouncement] = useState<Announcement | null>(null);

  const [formTitle, setFormTitle] = useState("");
  const [formBody, setFormBody] = useState("");
  const [formPinned, setFormPinned] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    Promise.all([fetchAnnouncements(), getUserRole()])
      .then(([anns, r]) => {
        if (!cancelled) {
          console.log("[Noticeboard] Role from server:", r);
          setAnnouncements(anns);
          setRole(r);
        }
      })
      .catch((err) => {
        console.error("[Noticeboard] Failed to load:", err);
        if (!cancelled) {
          setAnnouncements([]);
          setError(`Failed to load noticeboard: ${err.message}`);
        }
      })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const isAuthor = role === "owner" || role === "admin" || role === "hr_manager";

  const handleSubmit = async () => {
    setError(null);
    if (!formTitle.trim() || !formBody.trim()) { setError("Title and body are required"); return; }
    setSaving(true);
    try {
      if (editingId) {
        const result = await updateAnnouncement(editingId, formTitle, formBody, formPinned);
        if (!result.success) { setError(result.error || "Failed to update"); return; }
        setAnnouncements((prev) =>
          prev
            .map((a) =>
              a.id === editingId ? { ...a, title: formTitle, body: formBody, is_pinned: formPinned } : a
            )
            .sort((a, b) => (b.is_pinned ? 1 : 0) - (a.is_pinned ? 1 : 0) || new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
        );
      } else {
        const result = await createAnnouncement(formTitle, formBody, formPinned);
        if (!result.success) { setError(result.error || "Failed to create"); return; }
      }
      // Refresh
      const anns = await fetchAnnouncements();
      setAnnouncements(anns);
      resetForm();
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: string) => {
    const result = await deleteAnnouncement(id);
    if (result.success) setAnnouncements((prev) => prev.filter((a) => a.id !== id));
  };

  const handleEdit = (a: Announcement) => {
    setEditingId(a.id);
    setFormTitle(a.title);
    setFormBody(a.body);
    setFormPinned(a.is_pinned);
    setShowForm(true);
  };

  const resetForm = () => {
    setShowForm(false);
    setEditingId(null);
    setFormTitle("");
    setFormBody("");
    setFormPinned(false);
    setError(null);
  };

  const toggleExpanded = (id: string) => {
    setExpandedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  if (loading) return <PageSkeleton name="Noticeboard" />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Noticeboard</h1>
          <p className="text-gray-500 mt-1">Company announcements and updates</p>
        </div>
        {isAuthor && (
          <Button onClick={() => setShowForm(!showForm)} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
            <Plus className="w-4 h-4" />
            {showForm ? "Cancel" : "Post announcement"}
          </Button>
        )}
      </div>

      {/* Post Form */}
      {showForm && (
        <Card className="border-0 shadow-sm border-l-4 border-l-[#1D9E75]">
          <CardContent className="p-6 space-y-4">
            <h3 className="text-sm font-semibold text-gray-900">
              {editingId ? "Edit announcement" : "New announcement"}
            </h3>
            {error && (
              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
            )}
            <input
              value={formTitle}
              onChange={(e) => setFormTitle(e.target.value)}
              placeholder="Title"
              className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
            />
            <textarea
              value={formBody}
              onChange={(e) => setFormBody(e.target.value)}
              placeholder="Write your announcement..."
              rows={4}
              className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
            />
            <div className="flex items-center justify-between">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={formPinned}
                  onChange={(e) => setFormPinned(e.target.checked)}
                  className="rounded border-gray-300 text-[#1D9E75] focus:ring-[#1D9E75]"
                />
                <span className="text-sm text-gray-600">Pin this announcement</span>
              </label>
              <div className="flex gap-2">
                <Button variant="outline" onClick={resetForm} className="cursor-pointer">Cancel</Button>
                <Button onClick={handleSubmit} disabled={saving} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
                  {saving ? <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> : null}
                  {saving ? "Posting..." : editingId ? "Update" : "Post"}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Announcements Feed */}
      {announcements.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
          <Pin className="w-8 h-8 text-gray-300 mb-3" />
          <p className="text-sm text-gray-500 font-medium">No announcements yet</p>
          {isAuthor && (
            <p className="text-xs text-gray-400 mt-1 mb-4">Post the first announcement to get started</p>
          )}
        </div>
      ) : (
        <div className="space-y-4">
          {announcements.map((a) => {
            const isExpanded = expandedIds.has(a.id);
            const isTruncated = !isExpanded && a.body.length > 200;
            return (
              <Card
                key={a.id}
                className={`border-0 shadow-sm border-l-4 cursor-pointer ${
                  a.is_pinned ? "border-l-[#1D9E75] bg-teal-50/30" : "border-l-gray-200 hover:bg-gray-50/50"
                }`}
                onClick={() => setSelectedAnnouncement(a)}
              >
                <CardContent className="p-5">
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        {a.is_pinned && <Pin className="w-3.5 h-3.5 text-[#1D9E75] flex-shrink-0" />}
                        <h3 className="text-sm font-semibold text-gray-900 truncate">{a.title}</h3>
                      </div>
                      <div className="flex items-center gap-2 mb-2">
                        <div className="w-6 h-6 rounded-full bg-[#1D9E75] flex items-center justify-center text-white text-[10px] font-semibold flex-shrink-0">
                          {getInitials(a.author_name)}
                        </div>
                        <span className="text-xs text-gray-500">{a.author_name}</span>
                        <span className="text-xs text-gray-400">·</span>
                        <span className="text-xs text-gray-400">{formatDate(a.created_at)}</span>
                      </div>
                      <p className={`text-sm text-gray-600 leading-relaxed ${isTruncated ? "line-clamp-3" : ""}`}>
                        {a.body}
                      </p>
                      {isTruncated && (
                        <button
                          onClick={() => toggleExpanded(a.id)}
                          className="text-xs text-[#1D9E75] hover:underline font-medium mt-1 flex items-center gap-1 cursor-pointer"
                        >
                          Read more <ChevronDown className="w-3 h-3" />
                        </button>
                      )}
                      {isExpanded && (
                        <button
                          onClick={() => toggleExpanded(a.id)}
                          className="text-xs text-gray-400 hover:text-gray-600 font-medium mt-1 flex items-center gap-1 cursor-pointer"
                        >
                          Show less <ChevronUp className="w-3 h-3" />
                        </button>
                      )}
                    </div>

                    {/* Admin actions */}
                    {isAuthor && (
                      <div className="flex items-center gap-1 flex-shrink-0">
                        <button onClick={() => handleEdit(a)} className="p-1.5 text-gray-400 hover:text-teal-600 hover:bg-teal-50 rounded transition-colors cursor-pointer">
                          <Edit2 className="w-3.5 h-3.5" />
                        </button>
                        <button onClick={() => handleDelete(a.id)} className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors cursor-pointer">
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      {/* Announcement Detail Modal */}
      {selectedAnnouncement && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4" onClick={() => setSelectedAnnouncement(null)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden" onClick={(e) => e.stopPropagation()}>
            <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
              <div className="flex items-center gap-2">
                {selectedAnnouncement.is_pinned && <Pin className="w-4 h-4 text-[#1D9E75]" />}
                <h3 className="text-sm font-semibold text-gray-900">Announcement</h3>
              </div>
              <button onClick={() => setSelectedAnnouncement(null)} className="p-1.5 hover:bg-gray-100 rounded-lg cursor-pointer">
                <X className="w-4 h-4 text-gray-400" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              <div>
                <h2 className="text-lg font-bold text-gray-900">{selectedAnnouncement.title}</h2>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-xs text-gray-500">{selectedAnnouncement.author_name}</span>
                  <span className="text-xs text-gray-300">·</span>
                  <span className="text-xs text-gray-400">
                    Posted {new Date(selectedAnnouncement.created_at).toLocaleDateString("en-AU", { day: "numeric", month: "long", year: "numeric" })}
                  </span>
                  {selectedAnnouncement.expires_at && (
                    <>
                      <span className="text-xs text-gray-300">·</span>
                      <span className="text-xs text-amber-500">
                        Auto-deletes {new Date(selectedAnnouncement.expires_at).toLocaleDateString("en-AU", { day: "numeric", month: "short" })}
                      </span>
                    </>
                  )}
                </div>
              </div>
              <p className="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">{selectedAnnouncement.body}</p>
              {isAuthor && (
                <div className="flex items-center gap-2 pt-2 border-t border-gray-100">
                  <Button variant="outline" size="sm" onClick={() => { handleEdit(selectedAnnouncement); setSelectedAnnouncement(null); }} className="gap-1 cursor-pointer text-xs">
                    <Edit2 className="w-3 h-3" /> Edit
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => { handleDelete(selectedAnnouncement.id); setSelectedAnnouncement(null); }} className="gap-1 cursor-pointer text-xs text-red-600 border-red-200">
                    <Trash2 className="w-3 h-3" /> Delete
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}