"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  ChevronDown,
  Flag,
  MessageCircle,
  Share2,
  ThumbsUp,
} from "lucide-react";
import { useRouter } from "next/navigation";

export default function DetailCommentVideo() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const router = useRouter();

  return (
    <div className="max-w-5xl mx-auto p-4 space-y-6">
      <button
        onClick={() => router.back()}
        className="text-sm text-gray-500 hover:underline"
      >
        ← Kembali ke Article
      </button>

      <div>
        <p className="font-semibold text-sm uppercase text-gray-600 mb-1">
          Comments on:
        </p>
        <h1 className="text-lg font-bold">
          Kolaborasi dengan Ponpes Darunnajah, Pererat Sinergi Keamanan Hingga
          Pembinaan Generasi Muda
        </h1>
      </div>

      {/* Comment Form */}
      <div className=" rounded-md p-3 space-y-3">
        {isLoggedIn ? (
          <>
            <Textarea
              placeholder="Post a comment"
              className="min-h-[80px] border border-[#C6A455]"
            />
            <div className="flex justify-end">
              <Button size="sm">Post</Button>
            </div>
          </>
        ) : (
          <>
            <Textarea
              disabled
              placeholder="Post a comment"
              className="min-h-[80px] opacity-70"
            />
            <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
              Sign in and Join the Conversation
            </Button>
          </>
        )}
      </div>

      {/* Sort & Comment Count */}
      <div className="flex items-center justify-between border-b pb-2">
        <p className="font-semibold">
          All Comments{" "}
          <span className="text-sm font-medium text-gray-500">4</span>
        </p>
        <div className="flex items-center gap-1 text-sm text-gray-600">
          Sort by
          <button className="flex items-center gap-1 border border-[#C6A455] px-2 py-1 rounded text-gray-700 hover:bg-gray-100">
            Newest <ChevronDown className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* Comments List */}
      <div className="space-y-6">
        <CommentItem
          name="Mabes Ferr"
          content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
          time="2 hours ago"
        />

        <CommentItem
          name="Mabes Jerr"
          content="Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend."
          time="2 hours ago"
          replies={[
            {
              name: "Mabes Herr",
              time: "2 hours ago",
              inReplyTo: "Mabes Jerr",
              content:
                "Lorem ipsum dolor sit amet consectetur. Adipiscing ut mi pretium elementum est. Euismod integer praesent lacus praesent lobortis. Eleifend.",
            },
          ]}
        />
      </div>
    </div>
  );
}

type Comment = {
  name: string;
  time: string;
  content: string;
  inReplyTo?: string;
};

function CommentItem({
  name,
  time,
  content,
  replies,
}: Comment & { replies?: Comment[] }) {
  return (
    <div className="space-y-3">
      <div>
        <p className="font-semibold">
          {name}{" "}
          <span className="text-gray-500 text-sm font-normal">{time}</span>
        </p>
        <p className="text-gray-800 text-sm">{content}</p>
        <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
          <ThumbsUp className="w-4 h-4 cursor-pointer" />
          <button className="hover:underline flex items-center gap-1">
            <MessageCircle className="w-4 h-4" /> Reply
          </button>
          <button className="hover:underline flex items-center gap-1">
            <Share2 className="w-4 h-4" /> Share
          </button>
          <button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
            <Flag className="w-3 h-3" /> Report
          </button>
        </div>
      </div>

      {replies && replies.length > 0 && (
        <div className="ml-6 border-l pl-4 space-y-3">
          {replies.map((reply, idx) => (
            <div key={idx}>
              <p className="font-semibold">
                {reply.name}{" "}
                <span className="text-gray-500 text-sm font-normal">
                  {reply.time}
                </span>
              </p>
              <p className="text-xs text-gray-500">
                In Reply To {reply.inReplyTo}
              </p>
              <p className="text-gray-800 text-sm">{reply.content}</p>
              <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
                <ThumbsUp className="w-4 h-4 cursor-pointer" />
                <button className="hover:underline flex items-center gap-1">
                  <MessageCircle className="w-4 h-4" /> Reply
                </button>
                <button className="hover:underline flex items-center gap-1">
                  <Share2 className="w-4 h-4" /> Share
                </button>
                <button className="ml-auto hover:underline text-gray-400 text-xs flex items-center gap-1">
                  <Flag className="w-3 h-3" /> Report
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}