import "katex/dist/katex.min.css";
import { DomUtils, parseDocument } from "htmlparser2";
import Latex from "react-latex-next";
import { useState } from "react";
import { Navigate, useNavigate, useParams } from "react-router";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import {
  ArrowLeft,
  Clock,
  User,
  UserCheck,
  MessageSquare,
  Paperclip,
  Star,
  ChevronUp,
  ChevronDown,
  MapPinHouse,
  Users,
  RefreshCw,
  Share2,
  ExternalLink,
} from "lucide-react";
import { Separator } from "~/components/ui/separator";
import UserDropdown from "~/components/user-dropdown";
import ColleDetailsSkeleton from "~/components/details/skeleton-details";
import AttachmentItem from "~/components/details/attachment";
// TODO: Scroll restoration
// import { ScrollToTopOnMount } from "~/components/noscroll";
import Error from "~/components/error";
import { Badge } from "~/components/ui/badge";
import { AUTH_ERROR, useColle, useUser } from "~/lib/api";
import { toast } from "sonner";
import { formatDate, formatGrade, formatTime, goBack } from "~/lib/utils";

// TODO: Preferences for subject colors
const getSubjectColor = (_: string) => {
  // Mock placeholder function
  return "bg-blue-100 text-blue-800"; // Default color
};
const getSubjectEmoji = (_: string) => {
  // Mock placeholder function
  return "📚"; // Default emoji
};

// TODO: Move all code to components
export default function ColleDetailPage() {
  const { user, isLoading: isUserLoading, error: userError } = useUser();

  const navigate = useNavigate();
  const params = useParams<{ colleId: string }>();

  const [isReloading, setIsReloading] = useState(false);

  if (isUserLoading) {
    return <ColleDetailsSkeleton />;
  }
  if (userError?.message === AUTH_ERROR) {
    return <Navigate to="/login" replace />;
  }
  if (userError) {
    return <Error message={userError.message} />;
  }

  // TODO: Favorite toggle function
  const toggleStar = () => {};

  const colleId = parseInt(params.colleId!);
  if (isNaN(colleId)) {
    return <Navigate to="/" />;
  }

  const { colle, error, isLoading } = useColle(colleId);
  if (error)
    return (
      <Error
        title="Impossible de charger cette colle"
        message={error?.toString()}
        code={500}
        description="Une erreur s'est produite lors du chargement de la colle."
      />
    );
  if (isLoading || !colle) return <ColleDetailsSkeleton />;

  const handleToggleFavorite = () => {};

  const handleReload = () => {
    setIsReloading(true);
    // TODO: HARD RELOAD
  };

  const handleShare = async () => {
    const shareUrl = window.location.href;
    const shareTitle = `Colle de ${colle.subject.name} - ${colle.student.firstName}`;
    const shareText = `Colle de ${colle.subject.name} du ${formatDate(
      colle.date
    )} à ${formatTime(colle.date)} - ${colle.student} avec ${
      colle.examiner
    }.\n\nConsultez-le résumé ici :`;
    try {
      if (navigator.share) {
        await navigator.share({
          title: shareTitle,
          text: shareText,
          url: shareUrl,
        });
      } else {
        // Fallback to copying the URL
        await navigator.clipboard.writeText(shareUrl);
        toast("Lien copié dans le presse-papiers", {
          icon: "📋",
          description: "Vous pouvez le partager avec vos amis !",
        });
      }
    } catch (error) {
      console.error("Error sharing:", error);
    }
  };

  const handleOpenBJColle = () => {
    const url = `https://bjcolle.fr/students_oral_disp.php?colle=${colle.bjid}&hgfebrgl8ri3h=${colle.bjsecret}`;
    window.open(url, "_blank");
    toast("Ouverture de BJColle", {
      icon: "🔗",
      description: "Redirection vers BJColle...",
    });
  };

  const subjectColor = getSubjectColor(colle.subject.name);
  const subjectEmoji = getSubjectEmoji(colle.subject.name);

  return (
    <div className="container mx-auto py-6 px-4 pb-20 md:pb-6 md:py-8">
      {/* <ScrollToTopOnMount /> */}

      <div className="flex justify-between items-center mb-4">
        <Button variant="outline" onClick={() => goBack(navigate)}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Retour
        </Button>
        <div className="hidden md:block">
          <UserDropdown user={user} />
        </div>
        <div className="flex md:hidden items-center gap-2">
          <Button
            variant="outline"
            size="icon"
            className="h-10 w-10"
            onClick={handleReload}
            disabled={isReloading}
          >
            <RefreshCw
              className={`h-5 w-5 ${isReloading ? "animate-spin" : ""}`}
            />
            <span className="sr-only">Recharger</span>
          </Button>
          <UserDropdown user={user} />
        </div>
      </div>

      <Card className="max-w-3xl mx-auto">
        <CardHeader className="pb-2">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
            <div className="flex flex-col">
              <div className="flex items-center justify-between">
                <CardTitle className="text-2xl">Résumé de Colle</CardTitle>
                {colle.grade && (
                  <div
                    className={`md:hidden px-3 py-1 rounded-md text-sm font-medium ${subjectColor}`}
                  >
                    {formatGrade(colle.grade)}/20
                  </div>
                )}
              </div>
              <div className="flex items-center gap-2 mt-2">
                <Badge className={subjectColor}>
                  {colle.subject.name} {subjectEmoji}
                </Badge>
              </div>
            </div>

            {/* Desktop Action Buttons */}
            <div className="hidden md:flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                className="h-9 w-9"
                onClick={handleShare}
                title="Partager"
              >
                <Share2 className="h-4 w-4" />
                <span className="sr-only">Partager</span>
              </Button>

              <Button
                variant="outline"
                size="sm"
                className="h-9 w-9"
                onClick={handleReload}
                disabled={isReloading}
                title="Recharger"
              >
                <RefreshCw
                  className={`h-4 w-4 ${isReloading ? "animate-spin" : ""}`}
                />
                <span className="sr-only">Recharger</span>
              </Button>

              <Button
                variant="ghost"
                size="sm"
                className={`h-9 w-9 ${
                  // TODO: Use a proper favorite state
                  false ? "text-yellow-500" : "text-muted-foreground"
                }`}
                onClick={handleToggleFavorite}
              >
                <Star
                  className={`h-5 w-5 ${
                    // TODO: Use a proper favorite state
                    false ? "fill-yellow-500" : ""
                  }`}
                />
                <span className="sr-only">Ajouter aux favoris</span>
              </Button>

              {colle.grade && (
                <div
                  className={`px-3 py-1 rounded-md text-sm font-medium ${subjectColor}`}
                >
                  {formatGrade(colle.grade)}/20
                </div>
              )}
            </div>
          </div>
        </CardHeader>

        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-medium text-muted-foreground mb-1">
                  Date
                </h3>
                <div className="flex items-center gap-2">
                  <Clock className="h-4 w-4" />
                  <span>
                    {formatDate(colle.date)}, à {formatTime(colle.date)}
                  </span>
                </div>
              </div>

              <div>
                <h3 className="text-sm font-medium text-muted-foreground mb-1">
                  Colleur
                </h3>
                <div className="flex items-center gap-2">
                  <UserCheck className="h-4 w-4" />
                  <span>{colle.examiner.name}</span>
                </div>
              </div>
            </div>

            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-medium text-muted-foreground mb-1">
                  Étudiant
                </h3>
                <div className="flex items-center gap-2">
                  <User className="h-4 w-4" />
                  <span>{colle.student.fullName}</span>
                </div>
              </div>

              {/* TODO: Colles groups - others students */}
              {/* {colle.group?.length > 0 && (
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground mb-1">
                    Autres élèves
                  </h3>
                  {colle.group.map((linkedColle) => (
                    <div className="flex items-center gap-2">
                      <Users className="h-4 w-4" />
                      <Link
                        to={`/colles/${linkedColle.id}`}
                        key={linkedColle.id}
                      >
                        {linkedColle.student}
                      </Link>
                    </div>
                  ))}
                </div>
              )} */}
            </div>

            {colle.room && (
              <div className="space-y-4">
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground mb-1">
                    Salle
                  </h3>
                  <div className="flex items-center gap-2">
                    <MapPinHouse className="h-4 w-4" />
                    <span>{colle.room.name}</span>
                  </div>
                </div>
              </div>
            )}
          </div>

          {colle.content && (
            <>
              <Separator />

              <div>
                <h3 className="text-lg font-medium mb-2 flex items-center gap-2">
                  <MessageSquare className="h-5 w-5" />
                  Sujet
                </h3>

                <div className="p-4 bg-muted rounded-lg">
                  <ExpandableComment comment={colle.content} />
                </div>
              </div>
            </>
          )}

          {colle.comment && (
            <>
              <Separator />

              <div>
                <h3 className="text-lg font-medium mb-2 flex items-center gap-2">
                  <MessageSquare className="h-5 w-5" />
                  Commentaires
                </h3>
                <div className="p-4 bg-muted rounded-lg">
                  <ExpandableComment comment={colle.comment} />
                </div>
              </div>
            </>
          )}

          {/* TODO: Attachments */}
          {colle.attachments && colle.attachments?.length > 0 && (
            <div>
              <h3 className="text-lg font-medium mb-3 flex items-center gap-2">
                <Paperclip className="h-5 w-5" />
                Attachments
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {colle.attachments.map((attachment, index) => (
                  <AttachmentItem key={index} attachment={attachment} />
                ))}
              </div>
            </div>
          )}

          {/* BJColle External Link */}
          <div className="mt-8 pt-4 border-t border-dashed">
            <div className="flex justify-end items-center space-x-1 mt-1 text-xs text-muted-foreground">
              <ExternalLink className="h-4 w-4" />
              <span onClick={handleOpenBJColle}>
                Accéder à la colle depuis BJColle
              </span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Mobile Action Bar - Fixed at Bottom */}
      <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
        <div className="container mx-auto px-4 py-2 flex items-center justify-around">
          <Button
            variant="ghost"
            size="lg"
            className={`flex-1 h-12 ${
              // TODO: Use a proper favorite state
              false ? "text-yellow-500" : "text-muted-foreground"
            }`}
            onClick={handleToggleFavorite}
          >
            <Star
              className={`h-5 w-5 mr-2 ${
                // TODO: Use a proper favorite state
                false ? "fill-yellow-500" : ""
              }`}
            />
            {/* TODO: */}
            {false ? "Favori" : "Ajouter"}
          </Button>

          <Separator orientation="vertical" className="h-8" />

          <Button
            variant="ghost"
            size="lg"
            className="flex-1 h-12"
            onClick={handleShare}
          >
            <Share2 className="h-5 w-5 mr-2" />
            Partager
          </Button>
        </div>
      </div>
    </div>
  );
}

// TODO: Custom render component for LaTeX rendering
// Component for expandable comments
function ExpandableComment({ comment }: { comment: string }) {
  // Crop comments longer than 750 characters
  const [isExpanded, setIsExpanded] = useState(false);
  const commentLimit = 750; // Character limit before truncating
  const isLongComment = removeHtmlElements(comment).length > commentLimit;

  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };

  const displayedComment =
    isExpanded || !isLongComment
      ? comment
      : `${comment.substring(0, commentLimit)}...`;

  return (
    <div>
      <Latex delimiters={[{ left: "$$", right: "$$", display: false }]}>
        {displayedComment}
      </Latex>
      {isLongComment && (
        <Button
          variant="ghost"
          size="sm"
          className="mt-1 h-7 px-2 text-primary"
          onClick={toggleExpand}
        >
          {isExpanded ? (
            <span className="flex items-center gap-1">
              Afficher moins <ChevronUp className="h-3 w-3" />
            </span>
          ) : (
            <span className="flex items-center gap-1">
              Afficher plus <ChevronDown className="h-3 w-3" />
            </span>
          )}
        </Button>
      )}
    </div>
  );
}

// Remove HTML elements and return plain text (for text length calculation and cropping)
function removeHtmlElements(htmlString: string) {
  const document = parseDocument(htmlString);
  return DomUtils.textContent(document).trim();
}