"use client";

import { AuthorizedAction } from "@/components/auth/authorized-action";
import { Button } from "@/components/ui/button";
import { useRouter } from "@/i18n/routing";
import { Eye, Pencil } from "lucide-react";
import { useTranslations } from "next-intl";
import Image from "next/image";

interface SocialMediaCardProps {
  platform: string;
  platformIcon: string;
  accountName: string;
  accountAvatar: string;
  followers: number;
  views: number;
  shares?: number;
  engagements: number;
  engagementRate?: number;
  variant?: "default" | "with-actions"; // default for /social-media, with-actions for /accounts
  accountId?: string;
  profile_image_url?: string;
}

export function SocialMediaCard({
  platform,
  platformIcon,
  accountName,
  accountAvatar,
  followers,
  views,
  shares,
  engagementRate,
  variant = "default",
  accountId,
  profile_image_url
}: SocialMediaCardProps) {
  const t = useTranslations();
  const router = useRouter();

  // Use placeholder SVG if avatar doesn't exist or is the old placeholder
  const avatarSrc =
    !accountAvatar || accountAvatar === "/images/social-media/avatar.png"
      ? "/profile-placeholder.svg"
      : accountAvatar;
  const resolvedProfileImage = profile_image_url || avatarSrc;

  const handleViewDetails = () => {
    if (accountId) {
      router.push(`/social-media/accounts/${accountId}`);
    }
  };

  const handleEdit = () => {
    if (accountId) {
      router.push(`/social-media/accounts/${accountId}/edit`);
    }
  };

  return (
    <div className="bg-card border border-border rounded-2xl p-4 flex flex-col gap-4">
      {/* Main Content - Two Rows */}
      <div className="flex flex-col gap-2 w-full">
        {/* Row 1: Platform Icon (left), Account Info (middle), Avatar (right) */}
        <div className="flex items-start gap-3 w-full" dir="ltr">
          {/* Platform Icon - Left Side */}
          <div className="relative size-8 shrink-0">
            <Image
              src={platformIcon}
              alt={platform}
              fill
              sizes="32px"
              className="object-contain"
            />
          </div>

          {/* Account Info - Middle (flex-1 to take remaining space) */}
          <div className="flex flex-col gap-1 flex-1 text-right" dir="rtl">
            <p className="text-base text-muted-foreground">{accountName}</p>
            <p className="text-lg font-bold text-foreground">
              {followers.toLocaleString()} {t("socialMedia.follower")}
            </p>
          </div>

          {/* Avatar - Right Side */}
          <div className="relative size-12 shrink-0 rounded overflow-hidden bg-muted border-2 border-white">
            <Image
              src={resolvedProfileImage}
              alt={accountName || "Account avatar"}
              fill
              sizes="48px"
              unoptimized={Boolean(profile_image_url)}
              className="object-cover"
            />
          </div>
        </div>

        {/* Row 2: Stats */}
        <div className="flex gap-1 items-center w-full">
          {/* Engagement Rate */}
          {engagementRate !== undefined && (
            <>
              <div className="flex gap-1 items-center text-xs">
                <p className="text-muted-foreground">
                  {t("socialMedia.engagementRate")}
                </p>
                <p className="font-semibold text-foreground">
                  {engagementRate}%
                </p>
              </div>
              <div className="size-6 flex items-center justify-center">
                <div className="h-px w-5 bg-border rotate-90" />
              </div>
            </>
          )}

          {/* Shares */}
          {shares !== undefined && (
            <>
              <div className="flex gap-1 items-center text-xs">
                <p className="text-muted-foreground">
                  {t("socialMedia.shares")}
                </p>
                <p className="font-semibold text-foreground">
                  {shares.toLocaleString()}
                </p>
              </div>
              <div className="size-6 flex items-center justify-center">
                <div className="h-px w-5 bg-border rotate-90" />
              </div>
            </>
          )}

          {/* Views */}
          <div className="flex gap-1 items-center text-xs">
            <p className="text-muted-foreground">{t("socialMedia.views")}</p>
            <p className="font-semibold text-foreground">
              {(views || 0).toLocaleString()}
            </p>
          </div>
        </div>
      </div>

      {/* Action Buttons - Only show for with-actions variant */}
      {variant === "with-actions" && (
        <div className="flex gap-4 w-full">
          <AuthorizedAction
            action={{ actionKey: "social_media.update" }}
            surface="card"
          >
            <Button
              variant="outline"
              className="flex-1 h-8 gap-1"
              onClick={handleEdit}
            >
              <Pencil className="size-4" />
              <span className="text-sm font-medium">{t("common.edit")}</span>
            </Button>
          </AuthorizedAction>
          <AuthorizedAction
            action={{ actionKey: "social_media.view_details" }}
            surface="card"
          >
            <Button
              variant="outline"
              className="flex-1 h-8 gap-1"
              onClick={handleViewDetails}
            >
              <Eye className="size-4" />
              <span className="text-sm font-medium">{t("common.view")}</span>
            </Button>
          </AuthorizedAction>
        </div>
      )}
    </div>
  );
}