import { useState } from "react";
import { CheckCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import type { SocialPostBundle } from "./SocialPostPanel";

interface SocialPostResultProps {
  bundle: SocialPostBundle;
}

export function SocialPostResult({ bundle }: SocialPostResultProps) {
  const [copied, setCopied] = useState(false);
  const [copiedTag, setCopiedTag] = useState<string | null>(null);
  const [openSlides, setOpenSlides] = useState<Record<number, boolean>>({});

  if (!bundle) {
    return (
      <div className="flex flex-col items-center gap-2 py-8 text-center">
        <p className="text-xl font-semibold">No post yet</p>
        <p className="text-sm text-muted-foreground">
          Describe your topic and choose a platform to generate a ready-to-publish post.
        </p>
      </div>
    );
  }

  async function handleCopyPost() {
    await navigator.clipboard.writeText(bundle.post);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  async function handleCopyHashtag(tag: string) {
    await navigator.clipboard.writeText(tag);
    setCopiedTag(tag);
    setTimeout(() => setCopiedTag(null), 1500);
  }

  function toggleSlide(index: number) {
    setOpenSlides((prev) => ({ ...prev, [index]: !prev[index] }));
  }

  const hasSlides = bundle.slides && bundle.slides.length > 0;

  return (
    <div className="flex flex-col gap-4">
      {/* Post text card */}
      <div className="bg-card rounded-lg p-4 flex flex-col gap-2">
        <div className="flex items-center justify-between gap-2">
          <span className="text-sm font-medium">Generated post</span>
          <span className="text-xs font-mono text-muted-foreground">
            {bundle.post.length} / {bundle.charLimit}
          </span>
        </div>
        <p className="text-sm whitespace-pre-wrap break-words">{bundle.post}</p>
      </div>

      {/* Copy Post button */}
      <Button
        type="button"
        variant="secondary"
        className="w-full"
        onClick={() => void handleCopyPost()}
      >
        {copied ? "Copied!" : "Copy Post"}
      </Button>

      {/* Hashtag chips */}
      {bundle.hashtags && bundle.hashtags.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {bundle.hashtags.map((tag) => (
            <button
              key={tag}
              type="button"
              role="button"
              aria-label={`Copy hashtag ${tag}`}
              className="inline-flex items-center gap-1 rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground hover:bg-muted/80 transition-colors"
              onClick={() => void handleCopyHashtag(tag)}
            >
              {copiedTag === tag ? (
                <CheckCheck className="size-3" aria-hidden="true" />
              ) : (
                tag
              )}
            </button>
          ))}
        </div>
      )}

      {/* Instagram Carousel slides */}
      {hasSlides && (
        <div className="flex flex-col gap-2">
          <p className="text-sm font-medium">Carousel slides</p>
          {bundle.slides!.map((slide, index) => (
            <Collapsible
              key={index}
              open={!!openSlides[index]}
              onOpenChange={() => toggleSlide(index)}
            >
              <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md border border-border bg-muted/50 px-4 py-2 text-sm font-medium hover:bg-muted transition-colors">
                <span>Slide {index + 1}</span>
                <span className="text-xs text-muted-foreground">
                  {openSlides[index] ? "collapse" : "expand"}
                </span>
              </CollapsibleTrigger>
              <CollapsibleContent className="rounded-b-md border border-t-0 border-border bg-card px-4 py-3">
                <p className="text-sm whitespace-pre-wrap break-words">{slide}</p>
              </CollapsibleContent>
            </Collapsible>
          ))}
        </div>
      )}
    </div>
  );
}
