import { Link, router } from '@inertiajs/react';
import { useState } from 'react';

import { SeoHead } from '@/components/seo/seo-head';
import { PaginationLinks } from '@/components/ui/pagination-links';
import { PublicLayout } from '@/layouts/public-layout';
import type { PaginatedData } from '@/types';

type BlogTaxonomy = {
    id?: number;
    name: string;
    slug: string;
};

type BlogMedia = {
    id: number;
    url: string;
    mime_type: string | null;
    original_name: string | null;
    is_image: boolean;
};

type BlogArticleCard = {
    id: number;
    title: string;
    slug: string;
    excerpt: string | null;
    category: BlogTaxonomy | null;
    author: string | null;
    published_at: string | null;
    media: BlogMedia[];
    tags: BlogTaxonomy[];
};

type BlogIndexProps = {
    seo: {
        title: string;
        description: string;
        canonical_url: string;
    };
    articles: PaginatedData<BlogArticleCard>;
    categories: BlogTaxonomy[];
    tags: BlogTaxonomy[];
    filters: {
        search: string | null;
        category: string | null;
        tag: string | null;
    };
    selected: {
        category: BlogTaxonomy | null;
        tag: BlogTaxonomy | null;
    };
};

export default function BlogIndex({
    seo,
    articles,
    categories,
    tags,
    filters,
    selected,
}: BlogIndexProps) {
    const [search, setSearch] = useState(filters.search || '');
    const [category, setCategory] = useState(filters.category || '');
    const [tag, setTag] = useState(filters.tag || '');

    const submitFilters = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        router.get('/blog', buildParams({ search, category, tag }), {
            preserveState: true,
            preserveScroll: true,
            replace: true,
        });
    };

    const clearFilters = () => {
        setSearch('');
        setCategory('');
        setTag('');

        router.get(
            '/blog',
            {},
            {
                preserveState: true,
                preserveScroll: true,
                replace: true,
            },
        );
    };

    const hasFilters = search !== '' || category !== '' || tag !== '';

    return (
        <PublicLayout title={seo.title}>
            <SeoHead
                title={seo.title}
                description={seo.description}
                canonicalUrl={seo.canonical_url}
            />

            <div className="space-y-6">
                <section className="space-y-2">
                    <p className="text-xs font-semibold tracking-wide text-primary uppercase">
                        Technical Guides
                    </p>
                    <h1 className="text-3xl font-semibold text-main">
                        Automotive Parts Blog
                    </h1>
                    <p className="max-w-3xl text-sm text-muted">
                        Buying advice, diagnostics, fitment notes, and
                        installation guidance.
                    </p>
                </section>

                <section className="grid gap-6 xl:grid-cols-[320px_1fr]">
                    <aside className="space-y-4">
                        <form
                            onSubmit={submitFilters}
                            className="space-y-4 rounded-2xl border border-border bg-card p-4 shadow-sm"
                        >
                            <h2 className="text-base font-semibold text-main">
                                Filters
                            </h2>

                            <FilterField label="Search">
                                <input
                                    value={search}
                                    onChange={(event) =>
                                        setSearch(event.target.value)
                                    }
                                    placeholder="Article title or content"
                                    className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-main outline-none focus:border-primary"
                                />
                            </FilterField>

                            <FilterField label="Category">
                                <select
                                    value={category}
                                    onChange={(event) =>
                                        setCategory(event.target.value)
                                    }
                                    className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-main outline-none focus:border-primary"
                                >
                                    <option value="">All categories</option>
                                    {categories.map((option) => (
                                        <option
                                            key={option.slug}
                                            value={option.slug}
                                        >
                                            {option.name}
                                        </option>
                                    ))}
                                </select>
                            </FilterField>

                            <FilterField label="Tag">
                                <select
                                    value={tag}
                                    onChange={(event) =>
                                        setTag(event.target.value)
                                    }
                                    className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-main outline-none focus:border-primary"
                                >
                                    <option value="">All tags</option>
                                    {tags.map((option) => (
                                        <option
                                            key={option.slug}
                                            value={option.slug}
                                        >
                                            {option.name}
                                        </option>
                                    ))}
                                </select>
                            </FilterField>

                            <div className="flex gap-2">
                                <button
                                    type="submit"
                                    className="rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-hover"
                                >
                                    Apply
                                </button>
                                {hasFilters ? (
                                    <button
                                        type="button"
                                        onClick={clearFilters}
                                        className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted hover:bg-surface hover:text-main"
                                    >
                                        Clear
                                    </button>
                                ) : null}
                            </div>
                        </form>

                        <div className="rounded-2xl border border-border bg-card p-4 shadow-sm">
                            <h2 className="text-sm font-semibold tracking-wide text-muted uppercase">
                                Active Selection
                            </h2>
                            <div className="mt-2 space-y-1 text-sm text-main">
                                <p>
                                    Category: {selected.category?.name || 'All'}
                                </p>
                                <p>Tag: {selected.tag?.name || 'All'}</p>
                            </div>
                        </div>
                    </aside>

                    <div className="space-y-4">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                            <p className="text-sm text-muted">
                                Showing {articles.from || 0} to{' '}
                                {articles.to || 0} of {articles.total} articles
                            </p>
                            <PaginationLinks links={articles.links} />
                        </div>

                        {articles.data.length === 0 ? (
                            <div className="rounded-2xl border border-dashed border-border bg-card p-10 text-center text-sm text-muted">
                                No articles match your filters.
                            </div>
                        ) : (
                            <div className="grid gap-4 lg:grid-cols-2">
                                {articles.data.map((article) => (
                                    <Link
                                        key={article.id}
                                        href={`/blog/${article.slug}`}
                                        className="overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
                                    >
                                        {article.media[0] ? (
                                            article.media[0].is_image ? (
                                                <img
                                                    src={article.media[0].url}
                                                    alt={
                                                        article.media[0]
                                                            .original_name ||
                                                        article.title
                                                    }
                                                    className="h-44 w-full object-cover"
                                                />
                                            ) : (
                                                <video
                                                    src={article.media[0].url}
                                                    className="h-44 w-full bg-black object-cover"
                                                    muted
                                                />
                                            )
                                        ) : null}
                                        <div className="p-5">
                                            <p className="text-xs tracking-wide text-muted uppercase">
                                                {article.category?.name ||
                                                    'Uncategorized'}
                                                {article.published_at
                                                    ? ` | ${article.published_at}`
                                                    : ''}
                                            </p>
                                            <h2 className="mt-2 text-lg font-semibold text-main">
                                                {article.title}
                                            </h2>
                                            <p className="mt-2 line-clamp-3 text-sm text-muted">
                                                {article.excerpt ||
                                                    'Read the full technical article.'}
                                            </p>
                                            <div className="mt-4 flex flex-wrap gap-2">
                                                {article.tags.map((item) => (
                                                    <span
                                                        key={item.slug}
                                                        className="rounded-full bg-surface px-2.5 py-1 text-xs font-medium text-muted"
                                                    >
                                                        {item.name}
                                                    </span>
                                                ))}
                                            </div>
                                        </div>
                                    </Link>
                                ))}
                            </div>
                        )}

                        {articles.last_page > 1 ? (
                            <div className="flex justify-end">
                                <PaginationLinks links={articles.links} />
                            </div>
                        ) : null}
                    </div>
                </section>
            </div>
        </PublicLayout>
    );
}

function FilterField({
    label,
    children,
}: {
    label: string;
    children: React.ReactNode;
}) {
    return (
        <div>
            <label className="block text-sm font-medium text-main">
                {label}
            </label>
            {children}
        </div>
    );
}

function buildParams(filters: {
    search: string;
    category: string;
    tag: string;
}) {
    const params: Record<string, string> = {};

    if (filters.search !== '') {
        params.search = filters.search;
    }

    if (filters.category !== '') {
        params.category = filters.category;
    }

    if (filters.tag !== '') {
        params.tag = filters.tag;
    }

    return params;
}