import { useState } from 'react';
import { useServerFn } from '@tanstack/react-start';
import { Sparkles, Send, Loader2 } from 'lucide-react';
import { Link } from '@tanstack/react-router';
import { askCatalog } from '@/lib/assistant.functions';
import { useAuthStore } from '@/stores/authStore';
import { useT } from '@/lib/i18n';

export default function ProductAssistant({ context }: { context?: string }) {
  const t = useT();
  const ask = useServerFn(askCatalog);
  const wcToken = useAuthStore((s) => s.wcToken);
  const isLoggedIn = useAuthStore((s) => s.isLoggedIn);
  const [q, setQ] = useState('');
  const [answer, setAnswer] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (q.trim().length < 3 || loading) return;
    setLoading(true);
    setError(null);
    setAnswer(null);
    try {
      const r = await ask({ data: { question: q.trim(), context, wc_token: wcToken ?? undefined } });
      if (r.ok) setAnswer(r.answer);
      else setError(r.error);
    } catch {
      setError(t('Er ging iets mis. Probeer het opnieuw.', 'Something went wrong. Please try again.'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="container py-10" aria-labelledby="assistant-title">
      <div className="rounded-2xl border border-border bg-card p-6 md:p-8">
        <div className="flex items-center gap-2 text-primary text-xs font-semibold uppercase tracking-wider">
          <Sparkles className="h-4 w-4" /> {t("Productvraag", "Product question")}
        </div>
        <h2 id="assistant-title" className="mt-2 text-xl md:text-2xl font-display font-bold text-foreground">
          {t(`Stel een vraag over ${context ?? 'ons assortiment'}`, `Ask a question about ${context ?? 'our range'}`)}
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          {t('Antwoord op basis van onze catalogus. Geen medisch advies — producten zijn uitsluitend voor onderzoek.', 'Answer based on our catalogue. Not medical advice — products are for research purposes only.')}
        </p>
        {!isLoggedIn ? (
          <p className="mt-4 text-sm text-muted-foreground">
            <Link to="/my-account" className="font-semibold text-primary underline">{t('Log in', 'Log in')}</Link> {t('om een vraag te stellen.', 'to ask a question.')}
          </p>
        ) : (
        <form onSubmit={submit} className="mt-4 flex flex-col sm:flex-row gap-2">
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            maxLength={500}
            placeholder={t("Bijv. welke doseringen zijn er en wat kost het?", "E.g. what dosages are available and what does it cost?")}
            aria-label={t("Je vraag", "Your question")}
            className="flex-1 rounded-lg border border-input bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
          />
          <button
            type="submit"
            disabled={loading || q.trim().length < 3}
            className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-semibold text-primary-foreground disabled:opacity-50"
          >
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
            {t('Vraag', 'Ask')}
          </button>
        </form>
        )}
        {answer && (
          <div className="mt-4 whitespace-pre-line rounded-lg bg-muted/50 p-4 text-sm text-foreground" aria-live="polite">
            {answer}
          </div>
        )}
        {error && <p className="mt-4 text-sm text-destructive" role="alert">{error}</p>}
      </div>
    </section>
  );
}