import { useMemo, useState } from 'react';
import { createFileRoute, Link } from '@tanstack/react-router';
import { Search, Star, Check, Loader2, Filter } from 'lucide-react';
import Breadcrumbs from '@/components/Breadcrumbs';
import StarRating from '@/components/StarRating';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useAllReviews } from '@/hooks/useWooCommerce';
import { sanitizedHtml } from '@/lib/sanitize';
import { useT, useLang, headLang, localizePath, locale, SITE_URL } from '@/lib/i18n';

export const Route = createFileRoute('/reviews')({
  head: (ctx) => {
    const lang = headLang(ctx);
    const path = localizePath('/reviews', lang);
    const title = lang === 'en' ? 'Customer Reviews — What Customers Say | Peptidewinkel' : 'Klantbeoordelingen — Wat klanten zeggen | Peptidewinkel';
    const description = lang === 'en'
      ? 'Read real customer reviews of Peptidewinkel. Filter by stars, verified purchases and more. Independent reviews via CusRev.'
      : 'Lees echte klantbeoordelingen van Peptidewinkel. Filter op sterren, geverifieerde aankopen en meer. Onafhankelijke reviews via CusRev.';
    const ogTitle = lang === 'en' ? 'Customer Reviews — Peptidewinkel' : 'Klantbeoordelingen — Peptidewinkel';
    const ogDescription = lang === 'en' ? 'Real experiences from our customers.' : 'Echte ervaringen van onze klanten.';
    return {
      meta: [
        { title },
        { name: 'description', content: description },
        { property: 'og:title', content: ogTitle },
        { property: 'og:description', content: ogDescription },
        { property: 'og:url', content: `${SITE_URL}${path}` },
        { property: 'og:type', content: 'website' },
      ],
      links: [{ rel: 'canonical', href: `${SITE_URL}${path}` }],
    };
  },
  component: ReviewsPage,
});

type SortOption = 'date_desc' | 'date_asc' | 'rating_desc' | 'rating_asc';
type RatingFilter = 'all' | '5' | '4' | '3' | '2' | '1';
type VerifiedFilter = 'all' | 'verified' | 'unverified';

const PER_PAGE = 20;

const sortToParams = (sort: SortOption) => {
  switch (sort) {
    case 'date_desc': return { orderby: 'date' as const, order: 'desc' as const };
    case 'date_asc':  return { orderby: 'date' as const, order: 'asc' as const };
    case 'rating_desc': return { orderby: 'rating' as const, order: 'desc' as const };
    case 'rating_asc':  return { orderby: 'rating' as const, order: 'asc' as const };
  }
};

function ReviewsPage() {
  const t = useT();
  const lang = useLang();
  const [page, setPage] = useState(1);
  const [sort, setSort] = useState<SortOption>('date_desc');
  const [ratingFilter, setRatingFilter] = useState<RatingFilter>('all');
  const [verifiedFilter, setVerifiedFilter] = useState<VerifiedFilter>('all');
  const [searchInput, setSearchInput] = useState('');
  const [search, setSearch] = useState('');

  const queryParams = useMemo(() => ({
    per_page: PER_PAGE,
    page,
    ...sortToParams(sort),
    ...(ratingFilter !== 'all' ? { rating: Number(ratingFilter) } : {}),
    ...(search ? { search } : {}),
  }), [page, sort, ratingFilter, search]);

  const { data: result, isLoading, isFetching, isError } = useAllReviews(queryParams);
  const allReviews = useMemo(() => result?.data || [], [result?.data]);
  const totalPages = result?.totalPages ?? 1;
  const totalItems = result?.totalItems ?? allReviews.length;

  const reviews = useMemo(() => {
    if (verifiedFilter === 'all') return allReviews;
    return allReviews.filter((r) => verifiedFilter === 'verified' ? r.verified : !r.verified);
  }, [allReviews, verifiedFilter]);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setPage(1);
    setSearch(searchInput.trim());
  };

  const resetFilters = () => {
    setSort('date_desc');
    setRatingFilter('all');
    setVerifiedFilter('all');
    setSearch('');
    setSearchInput('');
    setPage(1);
  };

  const hasActiveFilters = sort !== 'date_desc' || ratingFilter !== 'all' || verifiedFilter !== 'all' || !!search;

  return (
    <>
      <Breadcrumbs items={[{ label: t('Beoordelingen', 'Reviews') }]} />
      <section className="bg-gradient-to-b from-primary/5 to-background border-b border-border/50">
        <div className="container py-12 md:py-16">
          <h1 className="text-3xl md:text-5xl font-black tracking-tight mb-3">{t('Klantbeoordelingen', 'Customer Reviews')}</h1>
          <p className="text-base md:text-lg text-muted-foreground max-w-2xl">
            {t('Echte ervaringen van onze klanten, onafhankelijk geverifieerd via CusRev. Filter en zoek door alle beoordelingen om te vinden wat voor jou belangrijk is.', 'Real experiences from our customers, independently verified via CusRev. Filter and search through all reviews to find what matters to you.')}
          </p>
        </div>
      </section>

      <section className="container py-10">
        <div className="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8">
          <aside className="lg:sticky lg:top-24 lg:self-start space-y-6">
            <div className="p-5 bg-card border border-border/50 rounded-2xl">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-sm font-bold uppercase tracking-wider flex items-center gap-2">
                  <Filter className="w-4 h-4" /> {t('Filters', 'Filters')}
                </h2>
                {hasActiveFilters && (
                  <Button variant="ghost" size="sm" className="h-auto p-0 text-xs text-primary hover:text-primary/80" onClick={resetFilters}>
                    {t('Reset', 'Reset')}
                  </Button>
                )}
              </div>

              <form onSubmit={handleSearch} className="mb-5">
                <label className="text-xs font-semibold text-muted-foreground mb-1.5 block">{t('Zoeken', 'Search')}</label>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                  <Input type="search" placeholder={t('Zoek in reviews…', 'Search reviews…')} value={searchInput} onChange={(e) => setSearchInput(e.target.value)} className="pl-9" />
                </div>
              </form>

              <div className="mb-5">
                <label className="text-xs font-semibold text-muted-foreground mb-2 block">{t('Beoordeling', 'Rating')}</label>
                <div className="space-y-1">
                  {(['all', '5', '4', '3', '2', '1'] as RatingFilter[]).map((opt) => (
                    <button key={opt} type="button" onClick={() => { setRatingFilter(opt); setPage(1); }}
                      className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${ratingFilter === opt ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-muted'}`}>
                      <span className="flex items-center gap-2">
                        {opt === 'all' ? t('Alle beoordelingen', 'All ratings') : (
                          <>
                            <span>{opt}</span>
                            <Star className="w-3.5 h-3.5 fill-yellow-400 text-yellow-400" />
                            <span className="text-muted-foreground text-xs">{t('en hoger', 'and up')}</span>
                          </>
                        )}
                      </span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="mb-5">
                <label className="text-xs font-semibold text-muted-foreground mb-2 block">{t('Geverifieerd', 'Verified')}</label>
                <div className="space-y-1">
                  {([
                    { v: 'all' as const, label: t('Alle reviews', 'All reviews') },
                    { v: 'verified' as const, label: t('Alleen geverifieerd', 'Verified only') },
                    { v: 'unverified' as const, label: t('Niet geverifieerd', 'Not verified') },
                  ]).map((opt) => (
                    <button key={opt.v} type="button" onClick={() => setVerifiedFilter(opt.v)}
                      className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${verifiedFilter === opt.v ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-muted'}`}>
                      {opt.label}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <label htmlFor="sort-select" className="text-xs font-semibold text-muted-foreground mb-1.5 block">{t('Sorteren', 'Sort')}</label>
                <Select value={sort} onValueChange={(v) => { setSort(v as SortOption); setPage(1); }}>
                  <SelectTrigger id="sort-select"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="date_desc">{t('Nieuwste eerst', 'Newest first')}</SelectItem>
                    <SelectItem value="date_asc">{t('Oudste eerst', 'Oldest first')}</SelectItem>
                    <SelectItem value="rating_desc">{t('Hoogste beoordeling', 'Highest rating')}</SelectItem>
                    <SelectItem value="rating_asc">{t('Laagste beoordeling', 'Lowest rating')}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </aside>

          <div>
            <div className="flex items-center justify-between mb-5 flex-wrap gap-3">
              <p className="text-sm text-muted-foreground">
                {isLoading ? t('Beoordelingen laden…', 'Loading reviews…') : (
                  <>
                    <span className="font-semibold text-foreground">{totalItems}</span>{' '}
                    {totalItems === 1 ? t('beoordeling', 'review') : t('beoordelingen', 'reviews')} {t('gevonden', 'found')}
                  </>
                )}
              </p>
              {isFetching && !isLoading && (
                <span className="text-xs text-muted-foreground inline-flex items-center gap-1.5">
                  <Loader2 className="w-3.5 h-3.5 animate-spin" /> {t('Bijwerken…', 'Updating…')}
                </span>
              )}
            </div>

            {isError ? (
              <div className="p-8 text-center bg-card border border-border/50 rounded-2xl">
                <p className="text-sm text-muted-foreground">{t('De beoordelingen konden niet worden geladen. Probeer het later opnieuw.', 'The reviews could not be loaded. Please try again later.')}</p>
              </div>
            ) : isLoading ? (
              <div className="space-y-4">
                {Array.from({ length: 5 }).map((_, i) => (
                  <div key={i} className="p-5 bg-card border border-border/50 rounded-2xl">
                    <Skeleton className="h-4 w-40 mb-2" />
                    <Skeleton className="h-3 w-28 mb-3" />
                    <Skeleton className="h-4 w-full mb-1" />
                    <Skeleton className="h-4 w-5/6" />
                  </div>
                ))}
              </div>
            ) : reviews.length === 0 ? (
              <div className="p-10 text-center bg-card border border-border/50 rounded-2xl">
                <p className="text-sm text-muted-foreground mb-4">{t('Geen beoordelingen gevonden met deze filters.', 'No reviews found with these filters.')}</p>
                {hasActiveFilters && <Button variant="outline" size="sm" onClick={resetFilters}>{t('Filters wissen', 'Clear filters')}</Button>}
              </div>
            ) : (
              <ul className="space-y-4">
                {reviews.map((r) => {
                  const slugMatch = r.product_permalink?.match(/\/product\/([^/?#]+)/i);
                  const slug = slugMatch?.[1];
                  return (
                    <li key={r.id} className="p-5 bg-card border border-border/50 rounded-2xl">
                      <div className="flex items-center justify-between gap-3 mb-2 flex-wrap">
                        <div className="flex items-center gap-3">
                          <span className="font-semibold text-sm">{r.reviewer || t('Klant', 'Customer')}</span>
                          {r.verified && (
                            <span className="inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-primary bg-primary/10 px-2 py-0.5 rounded-full">
                              <Check className="w-3 h-3" /> {t('Geverifieerd', 'Verified')}
                            </span>
                          )}
                        </div>
                        <time className="text-xs text-muted-foreground" dateTime={r.date_created}>
                          {new Date(r.date_created).toLocaleDateString(locale(lang), { year: 'numeric', month: 'long', day: 'numeric' })}
                        </time>
                      </div>
                      <StarRating rating={r.rating} sizeClass="w-3.5 h-3.5" className="mb-2" />
                      {r.product_name && (
                        <p className="text-xs text-muted-foreground mb-2">
                          {t('Over:', 'About:')}{' '}
                          {slug ? (
                            <Link to="/product/$slug" params={{ slug }} className="text-primary font-medium hover:underline">
                              {r.product_name}
                            </Link>
                          ) : (
                            <span className="text-foreground font-medium">{r.product_name}</span>
                          )}
                        </p>
                      )}
                      <div className="text-sm text-muted-foreground leading-relaxed prose prose-sm max-w-none dark:prose-invert" dangerouslySetInnerHTML={sanitizedHtml(r.review || '')} />
                    </li>
                  );
                })}
              </ul>
            )}

            {!isLoading && totalPages > 1 && (
              <div className="flex items-center justify-center gap-2 mt-8">
                <Button variant="outline" size="sm" disabled={page <= 1 || isFetching}
                  onClick={() => { setPage((p) => Math.max(1, p - 1)); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
                  {t('Vorige', 'Previous')}
                </Button>
                <span className="text-sm text-muted-foreground px-3">
                  {t('Pagina', 'Page')} <span className="font-semibold text-foreground">{page}</span> {t('van', 'of')} {totalPages}
                </span>
                <Button variant="outline" size="sm" disabled={page >= totalPages || isFetching}
                  onClick={() => { setPage((p) => Math.min(totalPages, p + 1)); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
                  {t('Volgende', 'Next')}
                </Button>
              </div>
            )}
          </div>
        </div>
      </section>
    </>
  );
}