"use client";

import { useState } from "react";
import Link from "next/link";
import { Thought } from "@/data/creative";
import { formatReadingTime } from "@/utils/readingTime";
import Markdown from "react-markdown";

interface ExpandableThoughtProps {
  thought: Thought;
}

const categoryColors = {
  technology: "bg-[#B8C5CE]",
  life: "bg-[#CBD6C8]",
  creativity: "bg-[#E0C9CC]",
};

export default function ExpandableThought({ thought }: ExpandableThoughtProps) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <article className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal">
      <div
        className="cursor-pointer"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <div className="flex justify-between items-start mb-4">
          <h2 className="text-2xl font-bold text-[#3D3D3D] uppercase flex-1 pr-4">
            {thought.title}
          </h2>
          <div className="text-[#3D3D3D] font-bold text-lg bg-[#B8C5CE] border-2 border-[#3D3D3D] px-3 py-1 whitespace-nowrap rounded-sm">
            {isExpanded ? "▼" : "▶"}
          </div>
        </div>

        <p className="text-[#6D6D6D] italic mb-4">{thought.excerpt}</p>

        <div className="flex gap-4 text-sm">
          <Link
            href={`/thoughts/${thought.id}`}
            className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold hover:bg-[#A5B4BE] transition-colors rounded-sm"
          >
            Read Full Thought
          </Link>
          <span
            className={`${categoryColors[thought.category]} text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm`}
          >
            {thought.category}
          </span>
          <span className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
            {formatReadingTime(thought.readTime)} read
          </span>
          <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
            {new Date(thought.createdAt).toLocaleDateString("en-GB", {
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
          </span>
        </div>
      </div>

      <div
        className={`overflow-hidden transition-all duration-500 ease-in-out ${
          isExpanded ? "max-h-[2000px] opacity-100 mt-6" : "max-h-0 opacity-0"
        }`}
      >
        <div className="border-t-2 border-[#3D3D3D] pt-6">
          <div className="prose prose-lg max-w-none">
            <div className="text-[#5D5D5D] leading-relaxed whitespace-pre-line">
              <Markdown>{thought.content}</Markdown>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}
