"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { SOCIAL_PLATFORMS, type SocialPlatformId } from "@/lib/social/platforms";

interface SocialPlatformPreviewProps {
  platform: SocialPlatformId;
  caption: string;
  hashtags?: string[];
  mediaSrc?: string;
  mediaMime?: string;
}

export function SocialPlatformPreview({
  platform,
  caption,
  hashtags,
  mediaSrc,
  mediaMime,
}: SocialPlatformPreviewProps) {
  const plat = SOCIAL_PLATFORMS[platform];
  const tagBudget = hashtags?.slice(0, plat.maxHashtags) ?? [];
  const trailing = tagBudget.length ? "\n\n" + tagBudget.map((t) => `#${t.replace(/^#/, "")}`).join(" ") : "";
  const full = `${caption}${trailing}`;
  const overLimit = plat.charLimit && full.length > plat.charLimit;
  const truncated =
    plat.truncateAt && full.length > plat.truncateAt ? full.slice(0, plat.truncateAt) + "…" : full;

  return (
    <Card className="bg-background">
      <CardContent className="p-4 space-y-3">
        <div className="flex items-center justify-between flex-wrap gap-2">
          <div className="flex items-center gap-2">
            <span
              className="w-7 h-7 rounded-full flex items-center justify-center text-base"
              style={{ backgroundColor: `${plat.color}25` }}
            >
              {plat.icon}
            </span>
            <div className="text-xs">
              <div className="font-semibold">{plat.label}</div>
              <div className="text-muted-foreground">
                {plat.charLimit ? `${full.length} / ${plat.charLimit}` : `${full.length} chars`}
              </div>
            </div>
          </div>
          <div className="flex items-center gap-1">
            {overLimit ? (
              <Badge variant="destructive" className="text-[10px]">Over limit</Badge>
            ) : (
              <Badge variant="outline" className="text-[10px]">
                {plat.maxHashtags} tags max
              </Badge>
            )}
          </div>
        </div>

        {mediaSrc && mediaMime?.startsWith("image/") && (
          <div
            className="w-full rounded-md border bg-muted/30 overflow-hidden"
            style={{ aspectRatio: platform === "instagram" ? "1 / 1" : "16 / 9" }}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={mediaSrc}
              alt=""
              className="w-full h-full object-cover"
            />
          </div>
        )}
        {mediaSrc && mediaMime?.startsWith("video/") && (
          <div className="w-full rounded-md border bg-muted/30 overflow-hidden">
            <video src={mediaSrc} controls className="w-full" />
          </div>
        )}

        <p className="text-sm whitespace-pre-wrap leading-relaxed">{truncated}</p>
        {plat.truncateAt && full.length > plat.truncateAt && (
          <p className="text-[11px] text-muted-foreground italic">
            {plat.label} truncates feed previews at {plat.truncateAt} chars — full caption shown
            after tap.
          </p>
        )}
      </CardContent>
    </Card>
  );
}