import { useEffect, useMemo } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { supabase } from "@/components/atomic-crm/providers/supabase/supabase";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ds/ui/card";
import { Badge } from "@/components/ds/ui/badge";
import { Skeleton } from "@/components/ds/ui/skeleton";
import {
  Mail,
  Phone,
  MessageSquare,
  StickyNote,
  Play,
  Calendar,
  User,
  Clock,
  CheckCircle2,
  AlertCircle,
} from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { Button } from "@/components/ds/ui/button";
import { useTranslate, useLocale } from "ra-core";
import { getDateFnsLocale } from "@/i18n/date-fns";

interface ActivityFeedProps {
  contactId?: number;
  salesId?: number; // Optional: filter by agent
  className?: string;
}

export const ActivityFeed = ({
  contactId,
  salesId,
  className,
}: ActivityFeedProps) => {
  const queryClient = useQueryClient();
  const queryKey = useMemo(
    () => ["activities", contactId, salesId],
    [contactId, salesId],
  );
  const translate = useTranslate();

  // 1. Initial Fetch
  const { data: activities, isLoading } = useQuery({
    queryKey,
    queryFn: async () => {
      let query = supabase
        .from("activities")
        .select(
          `
            *,
            sales:sales_id (first_name, last_name)
        `,
        )
        .order("created_at", { ascending: false })
        .limit(50);

      if (contactId) {
        query = query.eq("contact_id", contactId);
      }
      if (salesId) {
        query = query.eq("sales_id", salesId);
      }

      const { data, error } = await query;
      if (error) throw error;
      return data;
    },
  });

  // 2. Realtime Subscription
  useEffect(() => {
    const channel = supabase
      .channel("activities-feed")
      .on(
        "postgres_changes",
        {
          event: "*",
          schema: "public",
          table: "activities",
          filter: contactId ? `contact_id=eq.${contactId}` : undefined,
        },
        (payload) => {
          console.log("Realtime update:", payload);
          // Invalidate query to refetch (simplest way to keep sync)
          queryClient.invalidateQueries({ queryKey });
        },
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [contactId, queryClient, queryKey]);

  if (isLoading) {
    return (
      <div className={`space-y-4 ${className}`}>
        <Skeleton className="h-24 w-full" />
        <Skeleton className="h-24 w-full" />
        <Skeleton className="h-24 w-full" />
      </div>
    );
  }

  if (!activities || activities.length === 0) {
    return (
      <div
        className={`text-center py-8 text-muted-foreground bg-muted/20 rounded-lg border border-dashed ${className}`}
      >
        {translate("crm.activity_feed.empty")}
      </div>
    );
  }

  return (
    <div className={`space-y-4 ${className}`}>
      {activities.map((activity) => (
        <ActivityCard key={activity.id} activity={activity} />
      ))}
    </div>
  );
};

const ActivityCard = ({ activity }: { activity: any }) => {
  const isPending =
    activity.status === "pending" || activity.status === "claimed";
  const isFailed = activity.status === "failed";
  const translate = useTranslate();
  const locale = useLocale();

  return (
    <Card
      className={`relative overflow-hidden transition-all ${isPending ? "border-info/30 bg-info/10" : ""}`}
    >
      {isPending && (
        <div className="absolute left-0 right-0 top-0 h-1 bg-info/20">
          <div className="h-full w-full origin-left animate-progress bg-info"></div>
        </div>
      )}

      <CardHeader className="py-3 px-4 flex flex-row items-start justify-between space-y-0">
        <div className="flex items-center gap-3">
          <ActivityIcon type={activity.type} />
          <div>
            <CardTitle className="text-base font-medium flex items-center gap-2">
              <span>
                {translate(`crm.activity_feed.type.${activity.type}`, {
                  _: activity.type,
                })}
              </span>
              {activity.direction === "inbound" && (
                <Badge variant="outline" className="text-[10px] h-5">
                  {translate("crm.activity_feed.direction.inbound")}
                </Badge>
              )}
              {activity.direction === "outbound" && (
                <Badge variant="info" className="h-5 text-[10px]">
                  {translate("crm.activity_feed.direction.outbound")}
                </Badge>
              )}
            </CardTitle>
            <div className="text-xs text-muted-foreground flex items-center gap-2 mt-0.5">
              <Clock className="h-3 w-3" />
              {formatDistanceToNow(new Date(activity.created_at), {
                addSuffix: true,
                locale: getDateFnsLocale(locale),
              })}
              {activity.sales && (
                <>
                  <span>•</span>
                  <User className="h-3 w-3" />
                  {activity.sales.first_name} {activity.sales.last_name}
                </>
              )}
            </div>
          </div>
        </div>

        <StatusBadge status={activity.status} />
      </CardHeader>

      <CardContent className="pb-4 px-4 pt-0">
        {/* Content Body */}
        <div className="mt-2 text-sm">
          {isPending ? (
            <div className="flex items-center gap-2 text-muted-foreground italic">
              <div
                className="h-2 w-2 rounded-full bg-info animate-bounce"
                style={{ animationDelay: "0ms" }}
              ></div>
              <div
                className="h-2 w-2 rounded-full bg-info animate-bounce"
                style={{ animationDelay: "150ms" }}
              ></div>
              <div
                className="h-2 w-2 rounded-full bg-info animate-bounce"
                style={{ animationDelay: "300ms" }}
              ></div>
              <span>
                {translate("crm.activity_feed.label.processing_content")}
              </span>
            </div>
          ) : isFailed ? (
            <p className="text-destructive">
              {translate("crm.activity_feed.label.processing_failed")}
            </p>
          ) : (
            <div className="space-y-2">
              {/* Transcript / Text */}
              {activity.processed_data?.transcript ? (
                <div className="bg-muted/50 p-3 rounded-md border text-foreground/90 whitespace-pre-wrap">
                  {activity.processed_data.transcript}
                </div>
              ) : activity.raw_data?.source_type === "text" ? (
                <p className="whitespace-pre-wrap">
                  {activity.raw_data.content}
                </p>
              ) : null}

              {/* Audio Player */}
              {activity.raw_data?.source_type === "url" && (
                <div className="flex items-center gap-2 bg-secondary p-2 rounded-md w-fit">
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-8 w-8 rounded-full"
                  >
                    <Play className="h-4 w-4" />
                  </Button>
                  <span className="text-xs font-mono">
                    {translate("crm.activity_feed.label.audio_recording")}
                  </span>
                </div>
              )}

              {/* Atomic Facts / Summary */}
              {activity.processed_data?.summary && (
                <div className="rounded border border-warning/30 bg-warning/10 p-2 text-xs">
                  <span className="mb-1 block font-semibold text-warning">
                    {translate("crm.activity_feed.label.summary")}
                  </span>
                  {activity.processed_data.summary}
                </div>
              )}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
};

const ActivityIcon = ({ type }: { type: string }) => {
  const className = "h-5 w-5 text-muted-foreground";
  switch (type) {
    case "email":
      return <Mail className={className} />;
    case "call":
      return <Phone className={className} />;
    case "sms":
      return <MessageSquare className={className} />;
    case "meeting":
      return <Calendar className={className} />;
    default:
      return <StickyNote className={className} />;
  }
};

const StatusBadge = ({ status }: { status: string }) => {
  const translate = useTranslate();
  switch (status) {
    case "pending":
    case "claimed":
    case "processing":
      return (
        <Badge variant="info">
          {translate("crm.activity_feed.status.processing")}
        </Badge>
      );
    case "completed":
      return <CheckCircle2 className="h-4 w-4 text-success" />;
    case "failed":
      return <AlertCircle className="h-4 w-4 text-destructive" />;
    default:
      return null;
  }
};