"use client";

import { useChatbotStore } from "../store/ChatbotStore";
import { ChatSession } from "../types/Types";
import { timeAgo } from "@/config/func";
import { Add, Message2 } from "iconsax-react";
import { Button } from "@/components/ui/button";

interface SessionListProps {
  onSessionSelect: (sessionId: string) => void;
  onCreateSession: () => void;
}

export default function SessionList({
  onSessionSelect,
  onCreateSession,
}: SessionListProps) {
  const { sessions, currentSession } = useChatbotStore();

  const getLastMessagePreview = (session: ChatSession): string => {
    if (session.messages.length === 0) {
      return "هیچ پیامی وجود ندارد";
    }
    const lastMessage = session.messages[session.messages.length - 1];
    const preview = lastMessage.content.substring(0, 50);
    return preview.length < lastMessage.content.length
      ? `${preview}...`
      : preview;
  };

  return (
    <div className="w-full md:w-80 border-l border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 flex flex-col h-full">
      <div className="p-4 border-b border-gray-200 dark:border-gray-800">
        <Button
          onClick={onCreateSession}
          className="w-full"
          variant="default"
        >
          <Add className="size-5" color="currentColor" variant="Bold" />
          <span>سشن جدید</span>
        </Button>
      </div>
      <div className="flex-1 overflow-y-auto">
        {sessions.length === 0 ? (
          <div className="p-4 text-center text-gray-500 dark:text-gray-400">
            <Message2 className="size-12 mx-auto mb-2 opacity-50" color="#6b7280" variant="Bold" />
            <p className="text-sm">هیچ سشنی وجود ندارد</p>
          </div>
        ) : (
          <div className="divide-y divide-gray-200 dark:divide-gray-800">
            {sessions.map((session) => (
              <SessionItem
                key={session.id}
                session={session}
                isActive={currentSession?.id === session.id}
                onSelect={() => onSessionSelect(session.id)}
                lastMessagePreview={getLastMessagePreview(session)}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

interface SessionItemProps {
  session: ChatSession;
  isActive: boolean;
  onSelect: () => void;
  lastMessagePreview: string;
}

function SessionItem({
  session,
  isActive,
  onSelect,
  lastMessagePreview,
}: SessionItemProps) {
  return (
    <button
      onClick={onSelect}
      className={`w-full p-4 text-right hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${isActive ? "bg-primary/10 dark:bg-primary/20" : ""
        }`}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-xs text-gray-500 dark:text-gray-400">
              {timeAgo(session.lastMessageAt)}
            </span>
            {session.status === "closed" && (
              <span className="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 rounded-full">
                بسته شده
              </span>
            )}
          </div>
          <p className="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
            {lastMessagePreview}
          </p>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            {session.messages.length} پیام
          </p>
        </div>
      </div>
    </button>
  );
}
