"use client";

import { parseCaptionBlocks } from "@/lib/generation/format-caption";
import { cn } from "@/lib/utils";

interface LinkedInPostPreviewProps {
  caption: string;
  imageUrl?: string | null;
  companyName: string;
  logoDataUrl?: string | null;
  className?: string;
}

export function LinkedInPostPreview({
  caption,
  imageUrl,
  companyName,
  logoDataUrl,
  className,
}: LinkedInPostPreviewProps) {
  const blocks = parseCaptionBlocks(caption);

  return (
    <div className={cn("rounded-xl border border-gray-200 bg-white shadow-sm", className)}>
      <div className="flex items-center gap-3 border-b border-gray-100 px-4 py-3">
        {logoDataUrl ? (
          <img
            src={logoDataUrl}
            alt=""
            className="h-11 w-11 rounded-full border border-gray-100 object-contain bg-white p-0.5"
          />
        ) : (
          <div className="flex h-11 w-11 items-center justify-center rounded-full bg-brand-600 text-sm font-bold text-white">
            {companyName.slice(0, 2).toUpperCase()}
          </div>
        )}
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold text-gray-900">{companyName}</p>
          <p className="text-xs text-gray-500">Just now · 🌐</p>
        </div>
      </div>

      <div className="space-y-3 px-4 py-3 text-sm leading-relaxed text-gray-800">
        {blocks.map((block, index) => {
          if (block.type === "bullets") {
            return (
              <ul key={index} className="space-y-1.5">
                {block.lines.map((line, i) => (
                  <li key={i} className="flex gap-2">
                    <span className="shrink-0">{line.match(/^[\S]+/)?.[0] ?? "•"}</span>
                    <span>{line.replace(/^[\S]+\s*/, "")}</span>
                  </li>
                ))}
              </ul>
            );
          }
          if (block.type === "hashtags") {
            return (
              <p key={index} className="text-brand-700">
                {block.lines.join(" ")}
              </p>
            );
          }
          if (block.type === "quote") {
            return (
              <blockquote
                key={index}
                className="border-l-4 border-gray-300 pl-3 italic text-gray-700"
              >
                {block.lines.join(" ")}
              </blockquote>
            );
          }
          return (
            <p key={index} className="whitespace-pre-wrap">
              {block.lines.join("\n")}
            </p>
          );
        })}
      </div>

      {imageUrl && (
        <div className="relative border-t border-gray-100">
          <img src={imageUrl} alt="" className="w-full object-cover" />
        </div>
      )}
    </div>
  );
}