"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { Mail, MessageCircle, Phone, Search } from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { ButtonLink } from "@/components/common/Button";
import { AccordionItem } from "@/components/common/Accordion";
import { FAQS } from "@/data/faqs";
import { SITE } from "@/constants/site";
import { useTranslation } from "@/hooks/useTranslation";

export default function HelpPage() {
  const { t } = useTranslation();
  const [search, setSearch] = useState("");

  const filtered = useMemo(() => {
    const term = search.trim().toLowerCase();
    if (!term) return FAQS.slice(0, 10);
    return FAQS.filter(
      (f) =>
        t(f.questionKey).toLowerCase().includes(term) ||
        t(f.answerKey).toLowerCase().includes(term),
    );
  }, [search, t]);

  return (
    <Container className="max-w-full space-y-6">
      <header>
        <h1 className="text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
          {t("app.help.title")}
        </h1>
        <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
          {t("app.help.subtitle")}
        </p>
      </header>

      <div className="relative">
        <Search className="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
        <input
          type="search"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder={t("faq.search")}
          className="h-11 w-full rounded-2xl border border-slate-200 bg-white ps-9 pe-4 text-sm outline-none focus:border-brand-400 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
        />
      </div>

      <div className="space-y-3">
        {filtered.length === 0 ? (
          <p className="rounded-2xl border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
            {t("common.noResults")}
          </p>
        ) : (
          filtered.map((f) => (
            <AccordionItem key={f.id} title={t(f.questionKey)}>
              {t(f.answerKey)}
            </AccordionItem>
          ))
        )}
      </div>

      <Card>
        <CardContent className="space-y-5">
          <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex items-center gap-4">
              <div>
                <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
                  {t("app.help.contactTitle")}
                </h2>
                <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
                  {t("app.help.contactBody")}
                </p>
              </div>
            </div>
            <ButtonLink href="/contact" size="md" className="shrink-0">
              <MessageCircle className="h-4 w-4" />
              {t("app.help.contactCta")}
            </ButtonLink>
          </div>

          <div className="flex flex-col gap-3 sm:flex-row sm:gap-8">
            <Link
              href={`mailto:${SITE.email}`}
              className="flex items-center gap-3 text-sm text-slate-700 hover:text-brand-700 dark:text-slate-200 dark:hover:text-brand-300"
            >
              <Mail className="h-4 w-4 text-slate-400" />
              {SITE.email}
            </Link>
            <Link
              href={`tel:${SITE.phone.replace(/[^\d+]/g, "")}`}
              className="flex items-center gap-3 text-sm text-slate-700 hover:text-brand-700 dark:text-slate-200 dark:hover:text-brand-300"
            >
              <Phone className="h-4 w-4 text-slate-400" />
              <span dir="ltr">{SITE.phone}</span>
            </Link>
          </div>
        </CardContent>
      </Card>
    </Container>
  );
}