'use client';
import React, {useState} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCog, faLayerGroup} from "@fortawesome/free-solid-svg-icons";
import {BookProps} from "@/lib/models/Book";
import BookCard from "@/components/book/BookCard";
import {useTranslations} from "next-intl";
import {SyncType} from "@/context/BooksSyncContext";
import {SeriesSyncType} from "@/context/SeriesSyncContext";
import SyncSeries from "@/components/SyncSeries";

export interface SeriesCardProps {
    id: string;
    name: string;
    coverImage: string | null;
    books: BookProps[];
}

interface SeriesCardComponentProps {
    series: SeriesCardProps;
    onBookClick: (bookId: string) => Promise<void>;
    onSettingsClick: (seriesId: string) => void;
    getSyncStatus?: (bookId: string) => SyncType;
    seriesSyncStatus?: SeriesSyncType;
}

export default function SeriesCard({series, onBookClick, onSettingsClick, getSyncStatus, seriesSyncStatus = 'synced'}: SeriesCardComponentProps) {
    const t = useTranslations();
    const [isExpanded, setIsExpanded] = useState<boolean>(false);

    return (
        <div className="flex flex-shrink-0 p-2">
            <div
                onClick={() => setIsExpanded(!isExpanded)}
                className={`group bg-tertiary/90 backdrop-blur-sm shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-primary/50 hover:border-primary flex flex-col cursor-pointer flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 ${isExpanded ? 'rounded-l-2xl border-r-0' : 'rounded-2xl'}`}
            >
                <div className="relative w-full aspect-[2/3] flex-shrink-0 overflow-hidden rounded-t-2xl">
                    {series.coverImage ? (
                        <img
                            src={series.coverImage}
                            alt={series.name}
                            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-80"
                        />
                    ) : (
                        <div className="relative w-full h-full bg-gradient-to-br from-primary/30 via-primary/20 to-secondary flex items-center justify-center overflow-hidden">
                            <div className="absolute inset-0 bg-primary/10"></div>
                            <FontAwesomeIcon icon={faLayerGroup} className="text-primary w-16 h-16 opacity-60"/>
                        </div>
                    )}
                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-tertiary via-tertiary/50 to-transparent h-24"></div>

                    <div className="absolute top-3 right-3 flex items-center gap-2">
                        <SyncSeries seriesId={series.id} status={seriesSyncStatus} />
                        <div className="bg-primary text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
                            {series.books.length}
                        </div>
                    </div>
                </div>

                <div className="p-4 flex-1 flex flex-col justify-between">
                    <div className="flex-1">
                        <h3 className="text-text-primary text-center font-bold text-base mb-2 truncate group-hover:text-primary transition-colors tracking-wide">
                            {series.name}
                        </h3>
                        <div className="flex items-center justify-center mb-3 h-5">
                            <div className="h-px w-8 bg-primary/30"></div>
                            <p className="text-muted text-center mx-2 text-xs italic truncate px-2">
                                {series.books.length} {series.books.length > 1 ? t("seriesCard.books") : t("seriesCard.book")}
                            </p>
                            <div className="h-px w-8 bg-primary/30"></div>
                        </div>
                    </div>
                    <div className="flex justify-center items-center pt-3 border-t border-primary/30">
                        <span className="bg-primary/20 text-primary text-xs px-3 py-1 rounded-full font-medium border border-primary/30">
                            {t("seriesCard.series")}
                        </span>
                    </div>
                </div>
            </div>

            <div className={`${isExpanded ? 'flex' : 'hidden'} items-center border-y-2 border-primary bg-primary/5`}>
                {series.books.map((book: BookProps, idx: number) => (
                    <div key={book.bookId} className="flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2">
                        <BookCard
                            book={book}
                            onClickCallback={onBookClick}
                            index={idx}
                            syncStatus={getSyncStatus ? getSyncStatus(book.bookId) : 'synced'}
                        />
                    </div>
                ))}

                {/* Bouton Settings */}
                <div className="flex items-center px-4 flex-shrink-0">
                    <button
                        onClick={(event: React.MouseEvent) => {
                            event.stopPropagation();
                            onSettingsClick(series.id);
                        }}
                        className="p-4 rounded-xl bg-primary/20 hover:bg-primary text-primary hover:text-white transition-all duration-200 hover:scale-110 shadow-lg"
                        title={t("seriesCard.settings")}
                    >
                        <FontAwesomeIcon icon={faCog} className="w-6 h-6"/>
                    </button>
                </div>
            </div>

            {/* Bordure de fin */}
            <div className={`${isExpanded ? 'block' : 'hidden'} w-3 border-y-2 border-r-2 border-primary rounded-r-2xl bg-primary/5 flex-shrink-0`}></div>
        </div>
    );
}