import { createFileRoute, Link } from '@tanstack/react-router';
import { useState, useMemo, useCallback } from 'react';
import { Syringe, Info, AlertTriangle, Sparkles, X } from 'lucide-react';
import Breadcrumbs from '@/components/Breadcrumbs';
import { useT, headLang, localizePath, SITE_URL, type T } from '@/lib/i18n';

export const Route = createFileRoute('/peptide-calculator')({
  head: (ctx) => {
    const lang = headLang(ctx);
    const path = localizePath('/peptide-calculator', lang);
    const title = lang === 'en' ? 'Peptide Calculator — Dosage Calculator | Peptidewinkel' : 'Peptide Calculator — Doseringsrekenmachine | Peptidewinkel';
    const description = lang === 'en'
      ? 'Easily calculate how many units to draw up based on your syringe, vial size and desired peptide dose. Free tool from Peptidewinkel.'
      : 'Bereken eenvoudig hoeveel eenheden je moet optrekken op basis van je spuit, vialgrootte en gewenste peptide dosis. Gratis tool van Peptidewinkel.';
    const ogTitle = lang === 'en' ? 'Peptide Calculator — Peptidewinkel' : 'Peptide Calculator — Peptidewinkel';
    const ogDescription = lang === 'en' ? 'Calculate peptide dosages for your syringe and vial in seconds.' : 'Bereken peptide-doseringen voor je spuit en vial in seconden.';
    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: PeptideCalculator,
});

const SYRINGES = [
  { label: '0.3 ml (30 iu)', units: 30, ml: 0.3 },
  { label: '0.5 ml (50 iu)', units: 50, ml: 0.5 },
  { label: '1.0 ml (40 iu)', units: 40, ml: 1.0 },
  { label: '1.0 ml (100 iu)', units: 100, ml: 1.0 },
];

const PRESET_VIALS = [1, 2, 5, 10, 15];
const PRESET_WATER = [1, 2, 3, 5];
const PRESET_DOSES_MG = [0.5, 1, 2, 3];
const PRESET_DOSES_MCG = [500, 1000, 2000, 3000];

interface PeptidePreset {
  id: string;
  name: string;
  vialMg: number;
  waterMl: number;
  doseMg: number;
  useMcg: boolean;
  syringeIdx: number;
  tag?: string;
}

// Common doses based on community protocols (informational only).
const PEPTIDE_PRESETS: PeptidePreset[] = [
  { id: 'bpc-157', name: 'BPC-157', vialMg: 5, waterMl: 2, doseMg: 0.25, useMcg: true, syringeIdx: 1, tag: 'Heling' },
  { id: 'tb-500', name: 'TB-500', vialMg: 5, waterMl: 2, doseMg: 2, useMcg: false, syringeIdx: 1, tag: 'Heling' },
  { id: 'ghk-cu', name: 'GHK-Cu', vialMg: 50, waterMl: 5, doseMg: 2, useMcg: false, syringeIdx: 3, tag: 'Huid/Haar' },
  { id: 'semaglutide', name: 'Semaglutide', vialMg: 5, waterMl: 2, doseMg: 0.25, useMcg: false, syringeIdx: 1, tag: 'Fatloss' },
  { id: 'tirzepatide', name: 'Tirzepatide', vialMg: 10, waterMl: 2, doseMg: 2.5, useMcg: false, syringeIdx: 1, tag: 'Fatloss' },
  { id: 'retatrutide', name: 'Retatrutide', vialMg: 10, waterMl: 2, doseMg: 2, useMcg: false, syringeIdx: 1, tag: 'Fatloss' },
  { id: 'hcg', name: 'HCG (5000 IU)', vialMg: 5000, waterMl: 5, doseMg: 500, useMcg: false, syringeIdx: 1, tag: 'PCT' },
  { id: 'cjc-ipa', name: 'CJC-1295 / Ipamorelin', vialMg: 5, waterMl: 2, doseMg: 0.25, useMcg: true, syringeIdx: 1, tag: 'Groei' },
  { id: 'mots-c', name: 'MOTS-c', vialMg: 10, waterMl: 2, doseMg: 5, useMcg: false, syringeIdx: 1, tag: 'Mito' },
  { id: 'hgh-frag', name: 'HGH Frag 176-191', vialMg: 5, waterMl: 2, doseMg: 0.5, useMcg: false, syringeIdx: 1, tag: 'Fatloss' },
  { id: 'melanotan-2', name: 'Melanotan-2', vialMg: 10, waterMl: 2, doseMg: 0.5, useMcg: false, syringeIdx: 1, tag: 'Bruin' },
  { id: 'pt-141', name: 'PT-141 (Bremelanotide)', vialMg: 10, waterMl: 2, doseMg: 1.75, useMcg: false, syringeIdx: 1, tag: 'Libido' },
];

type OptionMode = 'preset' | 'custom';

function PeptideCalculator() {
  const t = useT();
  const [syringeIdx, setSyringeIdx] = useState(1);
  const [vialMg, setVialMg] = useState('5');
  const [waterMl, setWaterMl] = useState('2');
  const [doseMg, setDoseMg] = useState('0.5');
  const [useMcg, setUseMcg] = useState(false);
  const [vialMode, setVialMode] = useState<OptionMode>('preset');
  const [waterMode, setWaterMode] = useState<OptionMode>('preset');
  const [doseMode, setDoseMode] = useState<OptionMode>('preset');
  const [activePresetId, setActivePresetId] = useState<string | null>(null);

  const applyPreset = (preset: PeptidePreset) => {
    setVialMg(String(preset.vialMg));
    setWaterMl(String(preset.waterMl));
    setDoseMg(String(preset.doseMg));
    setUseMcg(preset.useMcg);
    setSyringeIdx(preset.syringeIdx);
    // Switch any field outside its preset list to custom so the value is visible.
    setVialMode(PRESET_VIALS.includes(preset.vialMg) ? 'preset' : 'custom');
    setWaterMode(PRESET_WATER.includes(preset.waterMl) ? 'preset' : 'custom');
    const doseList = preset.useMcg ? PRESET_DOSES_MCG : PRESET_DOSES_MG;
    const displayDose = preset.useMcg ? preset.doseMg * 1000 : preset.doseMg;
    setDoseMode(doseList.includes(displayDose) ? 'preset' : 'custom');
    setActivePresetId(preset.id);
  };

  const clearPreset = () => setActivePresetId(null);

  const unit = useMcg ? 'mcg' : 'mg';
  const dosePresets = useMcg ? PRESET_DOSES_MCG : PRESET_DOSES_MG;
  const doseDisplay = useMcg ? String(parseFloat(doseMg) * 1000) : doseMg;

  const setDose = useCallback((d: number) => {
    setDoseMg(useMcg ? String(d / 1000) : String(d));
  }, [useMcg]);

  const toggleUnit = useCallback(() => {
    setUseMcg((prev) => !prev);
    setDoseMode('preset');
  }, []);

  const result = useMemo(() => {
    const vial = parseFloat(vialMg);
    const water = parseFloat(waterMl);
    const dose = parseFloat(doseMg);
    const syringe = SYRINGES[syringeIdx];
    if (!(vial > 0 && water > 0 && dose > 0)) return null;

    const concMgPerMl = vial / water;
    const doseVolMl = dose / concMgPerMl;
    const unitsPerMl = syringe.units / syringe.ml;
    const unitsToDraw = Math.round(doseVolMl * unitsPerMl * 10) / 10;
    const overCap = doseVolMl > syringe.ml;
    const pct = Math.min((unitsToDraw / syringe.units) * 100, 100);
    const doseLabel = useMcg ? `${dose * 1000} mcg` : `${dose} mg`;
    const dosesPerVial = Math.floor(vial / dose);

    return { unitsToDraw, overCap, pct, doseLabel, syringe, dosesPerVial, concMgPerMl };
  }, [vialMg, waterMl, doseMg, syringeIdx, useMcg]);

  return (
    <>
      <Breadcrumbs items={[{ label: 'Peptide Calculator' }]} />
      <div className="container py-6 md:py-10 max-w-5xl">
        {/* Header */}
        <div className="flex items-start gap-4 mb-6">
          <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl gradient-primary flex items-center justify-center shadow-glow shrink-0">
            <Syringe className="w-6 h-6 sm:w-7 sm:h-7 text-white" />
          </div>
          <div>
            <h1 className="text-2xl sm:text-3xl md:text-4xl font-black tracking-tight mb-1">
              Peptide Calculator
            </h1>
            <p className="text-sm text-muted-foreground">
              {t('Bereken hoeveel eenheden je moet optrekken op basis van je spuit, vial en dosis.', 'Calculate how many units to draw up based on your syringe, vial and dose.')}
            </p>
          </div>
        </div>

        {/* Disclaimer */}
        <div className="bg-warning/10 border border-warning/30 rounded-xl p-4 mb-6 flex items-start gap-3">
          <AlertTriangle className="w-5 h-5 text-warning shrink-0 mt-0.5" />
          <div>
            <p className="text-sm font-medium text-foreground">{t('Disclaimer', 'Disclaimer')}</p>
            <p className="text-xs text-muted-foreground mt-1">
              {t('Informatief hulpmiddel — geen medisch advies. Lees de', 'Informational tool — not medical advice. Read the')}{' '}
              <Link to="/disclaimer" className="text-primary underline">{t('disclaimer', 'disclaimer')}</Link>.
            </p>
          </div>
        </div>

        {/* Peptide presets */}
        <div className="bg-card border border-border rounded-2xl p-4 sm:p-5 mb-4">
          <div className="flex items-center justify-between mb-3 flex-wrap gap-2">
            <div className="flex items-center gap-2">
              <Sparkles className="w-4 h-4 text-primary" />
              <h2 className="text-sm font-semibold text-foreground">{t('Snel een peptide kiezen', 'Quickly choose a peptide')}</h2>
              <span className="text-[11px] text-muted-foreground">{t('— veelgebruikte doseringen', '— common dosages')}</span>
            </div>
            {activePresetId && (
              <button
                onClick={clearPreset}
                className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-muted transition-colors"
              >
                <X className="w-3 h-3" /> {t('Selectie wissen', 'Clear selection')}
              </button>
            )}
          </div>
          <div className="flex flex-wrap gap-2">
            {PEPTIDE_PRESETS.map((p) => {
              const active = activePresetId === p.id;
              return (
                <button
                  key={p.id}
                  onClick={() => applyPreset(p)}
                  className={`group flex items-center gap-2 px-3 py-2 rounded-xl border-2 text-xs font-medium transition-all ${
                    active
                      ? 'border-primary bg-primary/10 text-primary shadow-sm'
                      : 'border-border bg-card text-foreground hover:border-primary/40 hover:bg-primary/5'
                  }`}
                >
                  <span>{p.name}</span>
                  {p.tag && (
                    <span className={`text-[9px] px-1.5 py-0.5 rounded-full font-semibold uppercase tracking-wide ${
                      active ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'
                    }`}>
                      {p.tag}
                    </span>
                  )}
                </button>
              );
            })}
          </div>
          <p className="text-[11px] text-muted-foreground mt-3">
            {t('Doseringen zijn richtlijnen op basis van veelgebruikte protocollen. Pas onderstaande velden naar wens aan.', 'Dosages are guidelines based on commonly used protocols. Adjust the fields below as needed.')}
          </p>
        </div>

        <div className="bg-card border border-border rounded-2xl p-4 sm:p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
            {/* Syringe selection */}
            <div>
              <SectionTitle>{t('Wat is het totale volume van je spuit?', 'What is the total volume of your syringe?')}</SectionTitle>
              <div className="flex flex-col gap-2">
                {SYRINGES.map((s, i) => (
                  <button
                    key={i}
                    onClick={() => setSyringeIdx(i)}
                    className={`flex items-center gap-4 px-4 py-3 rounded-xl border-2 transition-all text-left ${
                      i === syringeIdx
                        ? 'border-primary bg-primary/10 shadow-sm'
                        : 'border-border bg-card hover:border-muted-foreground/40'
                    }`}
                  >
                    <Syringe className={`h-5 w-5 shrink-0 ${i === syringeIdx ? 'text-primary' : 'text-muted-foreground'}`} />
                    <span className="font-semibold text-sm">{s.label}</span>
                  </button>
                ))}
              </div>
            </div>

            {/* Options */}
            <div className="space-y-6">
              <div>
                <SectionTitle>{t('Hoeveel mg zit er in de vial?', 'How many mg are in the vial?')}</SectionTitle>
                {vialMode === 'preset' ? (
                  <OptionGroup
                    values={PRESET_VIALS}
                    selected={vialMg}
                    onSelect={(v) => setVialMg(String(v))}
                    unit="mg"
                    onCustom={() => setVialMode('custom')}
                    t={t}
                  />
                ) : (
                  <CustomInput
                    value={vialMg}
                    onChange={setVialMg}
                    unit="mg"
                    onPresets={() => setVialMode('preset')}
                    t={t}
                  />
                )}
              </div>

              <div>
                <SectionTitle>{t('Hoeveel bacteriostatisch water voeg je toe?', 'How much bacteriostatic water do you add?')}</SectionTitle>
                {waterMode === 'preset' ? (
                  <OptionGroup
                    values={PRESET_WATER}
                    selected={waterMl}
                    onSelect={(v) => setWaterMl(String(v))}
                    unit="ml"
                    onCustom={() => setWaterMode('custom')}
                    t={t}
                  />
                ) : (
                  <CustomInput
                    value={waterMl}
                    onChange={setWaterMl}
                    unit="ml"
                    onPresets={() => setWaterMode('preset')}
                    t={t}
                  />
                )}
              </div>

              <div>
                <div className="flex items-center justify-between mb-3">
                  <SectionTitle className="mb-0">{t('Hoeveel', 'How many')} {unit} {t('wil je doseren?', 'do you want to dose?')}</SectionTitle>
                  <button
                    onClick={toggleUnit}
                    className="flex items-center gap-1 px-3 py-1.5 rounded-lg border border-border bg-card text-xs font-medium transition-colors hover:border-muted-foreground/40"
                  >
                    <span className={useMcg ? 'text-muted-foreground' : 'text-primary font-bold'}>mg</span>
                    <span className="text-muted-foreground">/</span>
                    <span className={useMcg ? 'text-primary font-bold' : 'text-muted-foreground'}>mcg</span>
                  </button>
                </div>
                {doseMode === 'preset' ? (
                  <OptionGroup
                    values={dosePresets}
                    selected={doseDisplay}
                    onSelect={(v) => setDose(v)}
                    unit={unit}
                    onCustom={() => setDoseMode('custom')}
                    t={t}
                  />
                ) : (
                  <CustomInput
                    value={doseDisplay}
                    onChange={(v) => setDoseMg(useMcg ? String(parseFloat(v) / 1000) : v)}
                    unit={unit}
                    onPresets={() => setDoseMode('preset')}
                    t={t}
                  />
                )}
              </div>
            </div>
          </div>

          {/* Result */}
          {result && (
            <div className="mt-8 p-5 sm:p-6 rounded-2xl border-2 border-primary/30 bg-gradient-to-br from-primary/5 to-transparent">
              <p className="text-center text-sm mb-2">
                {t('Voor een dosis van', 'For a dose of')} <span className="font-bold text-primary">{result.doseLabel}</span> {t('trek de spuit op tot', 'draw the syringe up to')}{' '}
                <span className="font-black text-2xl text-primary">{result.unitsToDraw}</span>{' '}
                <span className="font-bold text-primary">{t('eenheden', 'units')}</span>
              </p>
              {result.overCap && (
                <p className="text-center text-destructive text-xs mt-2 mb-3 font-medium">
                  ⚠ {t('Dosisvolume overschrijdt de spuitcapaciteit. Voeg meer water toe of gebruik een grotere spuit.', 'Dose volume exceeds syringe capacity. Add more water or use a larger syringe.')}
                </p>
              )}
              <div className="pt-4 pb-2">
                <div className="w-full h-3 rounded-full bg-muted overflow-hidden">
                  <div
                    className={`h-full rounded-full transition-all duration-500 ${result.overCap ? 'bg-destructive' : 'bg-primary'}`}
                    style={{ width: `${result.pct}%` }}
                  />
                </div>
                <div className="relative w-full mt-1 h-6">
                  {Array.from({ length: result.syringe.units / 10 + 1 }).map((_, i) => {
                    const val = i * 10;
                    const left = (val / result.syringe.units) * 100;
                    return (
                      <div key={i} className="absolute flex flex-col items-center -translate-x-1/2" style={{ left: `${left}%` }}>
                        <div className="w-px h-2 bg-muted-foreground/50" />
                        <span className="text-[11px] text-muted-foreground mt-0.5">{val}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3 mt-4 pt-4 border-t border-border/50">
                <div className="text-center">
                  <p className="text-xs text-muted-foreground">{t('Concentratie', 'Concentration')}</p>
                  <p className="text-sm font-bold text-foreground">
                    {result.concMgPerMl.toFixed(2)} mg/ml
                  </p>
                </div>
                <div className="text-center">
                  <p className="text-xs text-muted-foreground">{t('Doses per vial', 'Doses per vial')}</p>
                  <p className="text-sm font-bold text-foreground">≈ {result.dosesPerVial}</p>
                </div>
              </div>
            </div>
          )}

          {/* Help */}
          <div className="mt-6 flex items-start gap-3 p-4 rounded-xl bg-muted/40 border border-border text-xs text-muted-foreground">
            <Info className="w-4 h-4 shrink-0 mt-0.5 text-primary" />
            <div className="space-y-1">
              <p><strong className="text-foreground">{t('Tip:', 'Tip:')}</strong> {t('Voeg het water langzaam langs de wand van het vial toe. Niet schudden — voorzichtig draaien tot opgelost. Bewaar in de koelkast (2-8°C).', 'Add the water slowly along the wall of the vial. Do not shake — gently swirl until dissolved. Store in the refrigerator (2-8°C).')}</p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

const SectionTitle = ({ children, className = '' }: { children: React.ReactNode; className?: string }) => (
  <div className={`text-sm font-semibold mb-3 ${className}`}>{children}</div>
);

const OptionGroup = ({
  values, selected, onSelect, unit, onCustom, t,
}: {
  values: number[]; selected: string; onSelect: (v: number) => void; unit: string; onCustom: () => void; t: T;
}) => (
  <div className="flex flex-wrap gap-2">
    {values.map((v) => (
      <button
        key={v}
        onClick={() => onSelect(v)}
        className={`px-4 py-2 rounded-lg border-2 text-sm font-medium transition-all ${
          selected === String(v)
            ? 'border-primary text-primary bg-primary/10'
            : 'border-border bg-card text-foreground hover:border-muted-foreground/40'
        }`}
      >
        {v} {unit}
      </button>
    ))}
    <button
      onClick={onCustom}
      className="px-4 py-2 rounded-lg border-2 border-dashed border-border bg-card text-muted-foreground text-sm font-medium hover:border-primary/40 hover:text-foreground transition-all"
    >
      {t('Anders', 'Other')}
    </button>
  </div>
);

const CustomInput = ({
  value, onChange, unit, onPresets, t,
}: {
  value: string; onChange: (v: string) => void; unit: string; onPresets: () => void; t: T;
}) => (
  <div className="flex items-center gap-2">
    <input
      type="number"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      min={0}
      step="any"
      className="w-28 px-3 py-2 rounded-lg border-2 border-border bg-card text-foreground text-sm outline-none focus:border-primary transition-colors"
    />
    <span className="text-sm text-muted-foreground">{unit}</span>
    <button onClick={onPresets} className="text-xs text-primary hover:underline ml-2">
      {t('Voorinstellingen', 'Presets')}
    </button>
  </div>
);