"use client";

import { Twitter, Linkedin, Facebook, Instagram, Building2 } from "lucide-react";
import type { Network } from "@/lib/types";
import { adaptContent } from "@/lib/content-adaptation";
import { PostPreview } from "./PostPreview";

const NETWORK_CONFIG: Record<Network, { name: string; icon: typeof Twitter; color: string; charLimit: number }> = {
  TWITTER: { name: "Twitter / X", icon: Twitter, color: "#1DA1F2", charLimit: 280 },
  LINKEDIN: { name: "LinkedIn", icon: Linkedin, color: "#0A66C2", charLimit: 3000 },
  FACEBOOK: { name: "Facebook", icon: Facebook, color: "#1877F2", charLimit: 63206 },
  INSTAGRAM: { name: "Instagram", icon: Instagram, color: "#E4405F", charLimit: 2200 },
};

interface NetworkPreviewProps {
  content: string;
  networks: Network[];
  files?: File[];
  companyPageName?: string;
}

/**
 * Side-by-side preview of how a post looks on each selected network.
 * Shows adapted content for each network with network-specific formatting.
 */
export function NetworkPreview({ content, networks, files, companyPageName }: NetworkPreviewProps) {
  if (networks.length === 0 || !content.trim()) {
    return (
      <div className="flex flex-col items-center justify-center py-8 text-center">
        <p className="text-sm text-gray-400">
          {networks.length === 0 ? "Select networks to see previews" : "Start typing to see previews"}
        </p>
      </div>
    );
  }

  // Single network: delegate to PostPreview
  if (networks.length === 1) {
    return <PostPreview content={content} networks={networks} files={files} />;
  }

  // Multi-network: show side-by-side adapted previews
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 mb-2">
        <span className="text-xs font-medium text-gray-500">Multi-Network Preview</span>
        <span className="text-[10px] text-gray-400">Content is adapted per network</span>
      </div>

      <div className={`grid gap-4 ${networks.length === 2 ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1"}`}>
        {networks.map((network) => {
          const config = NETWORK_CONFIG[network];
          const Icon = config.icon;
          const adapted = adaptContent(content, null, network);

          return (
            <div key={network} className="space-y-2">
              <div className="flex items-center gap-1.5">
                <Icon className="h-3.5 w-3.5" style={{ color: config.color }} />
                <span className="text-xs font-medium text-gray-600">{config.name}</span>
                <span className="text-[10px] text-gray-400 ml-auto">
                  {adapted.content.length}/{config.charLimit}
                </span>
              </div>

              {/* LinkedIn company page indicator */}
              {network === "LINKEDIN" && companyPageName && (
                <div className="flex items-center gap-1 text-[10px] text-blue-600">
                  <Building2 className="h-3 w-3" />
                  <span>Posting as {companyPageName}</span>
                </div>
              )}

              {/* Show the adapted content in a preview card */}
              <div className="rounded-lg border border-gray-100 bg-gray-50 p-3">
                <p className="text-sm text-gray-700 whitespace-pre-wrap line-clamp-6">
                  {adapted.content}
                </p>
                {adapted.firstComment && (
                  <div className="mt-2 pt-2 border-t border-gray-200">
                    <p className="text-[10px] text-gray-400 mb-0.5">First comment:</p>
                    <p className="text-xs text-gray-500">{adapted.firstComment}</p>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}