import { Link, useParams } from 'react-router-dom';

import { MachineCard } from '@/components/catalogue/MachineCard';
import { MachineThumbnail } from '@/components/catalogue/MachineThumbnail';
import { Badge } from '@/components/ui/Badge';
import { Button } from '@/components/ui/Button';
import { Panel } from '@/components/ui/Panel';
import { appConfig } from '@/config/appConfig';
import { getMachineBySlug, getRelatedMachines } from '@/data/machineRegistry';
import { usePageMetadata } from '@/hooks/usePageMetadata';
import { usePreferencesStore } from '@/store/preferencesStore';
import { difficultyDescription, difficultyToTone, partCountLabel, phaseLabel } from '@/utils/format';
import { NotFoundPage } from '@/pages/NotFoundPage';

export function MachineDetailPage() {
  const { machineSlug } = useParams<'machineSlug'>();
  const machine = getMachineBySlug(machineSlug);

  usePageMetadata({
    title: machine ? machine.title : 'Machine not found',
    description: machine?.shortDescription,
    canonicalPath: machine ? `/machines/${machine.slug}` : undefined,
    type: 'article'
  });

  const favourites = usePreferencesStore((state) => state.favourites);
  const toggleFavourite = usePreferencesStore((state) => state.toggleFavourite);

  if (!machine) {
    return <NotFoundPage />;
  }

  const isFavourite = favourites.includes(machine.slug);
  const relatedMachines = getRelatedMachines(machine, appConfig.catalogue.maxRelatedMachines);

  return (
    <div className="space-y-8">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <Link
          to="/"
          className="interactive-ring inline-flex items-center gap-2 rounded-2xl border border-border/70 bg-panel/70 px-4 py-2 text-sm font-semibold text-muted transition hover:border-accent/45 hover:text-foreground"
        >
          ← Back to catalogue
        </Link>

        <Button
          variant={isFavourite ? 'outline' : 'primary'}
          onClick={() => toggleFavourite(machine.slug)}
          aria-pressed={isFavourite}
        >
          {isFavourite ? 'Saved to favourites' : 'Save machine'}
        </Button>
      </div>

      <section className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_420px]">
        <Panel className="overflow-hidden p-0">
          <MachineThumbnail machine={machine} className="min-h-[280px] rounded-none border-0" />
          <div className="space-y-5 p-6 lg:p-8">
            <div className="flex flex-wrap gap-2">
              <Badge tone="neutral">{machine.category}</Badge>
              <Badge tone={difficultyToTone(machine.difficulty)}>{machine.difficulty}</Badge>
              <Badge tone={machine.releasePhase === 'core' ? 'accent' : 'warm'}>
                {phaseLabel(machine.releasePhase)}
              </Badge>
            </div>

            <div>
              <h1 className="text-balance text-4xl font-black tracking-[-0.055em] text-foreground sm:text-5xl">
                {machine.title}
              </h1>
              <p className="mt-3 text-lg font-semibold text-accent">{machine.subtitle}</p>
            </div>

            <p className="max-w-4xl text-base leading-8 text-muted">{machine.description}</p>

            <div className="grid gap-3 sm:grid-cols-3">
              <div className="rounded-3xl border border-border/70 bg-surface/55 p-4">
                <p className="text-xs font-bold uppercase tracking-[0.18em] text-subtle">Complexity</p>
                <p className="mt-2 text-2xl font-black tabular-nums text-foreground">{machine.complexity}/5</p>
              </div>
              <div className="rounded-3xl border border-border/70 bg-surface/55 p-4">
                <p className="text-xs font-bold uppercase tracking-[0.18em] text-subtle">Estimated model</p>
                <p className="mt-2 text-2xl font-black tabular-nums text-foreground">
                  {machine.estimatedPartCount}
                </p>
              </div>
              <div className="rounded-3xl border border-border/70 bg-surface/55 p-4">
                <p className="text-xs font-bold uppercase tracking-[0.18em] text-subtle">Annotated</p>
                <p className="mt-2 text-2xl font-black tabular-nums text-foreground">
                  {machine.parts.length}
                </p>
              </div>
            </div>
          </div>
        </Panel>

        <aside className="space-y-6">
          <Panel>
            <p className="text-xs font-black uppercase tracking-[0.24em] text-accent">Learning level</p>
            <h2 className="mt-3 text-xl font-black tracking-[-0.02em] text-foreground">
              {machine.difficulty}
            </h2>
            <p className="mt-3 text-sm leading-6 text-muted">{difficultyDescription(machine.difficulty)}</p>
          </Panel>

          <Panel>
            <p className="text-xs font-black uppercase tracking-[0.24em] text-accent">Key facts</p>
            <dl className="mt-4 grid gap-3">
              {machine.facts.map((fact) => (
                <div key={`${fact.label}-${fact.value}`} className="rounded-2xl border border-border/70 bg-surface/55 p-3">
                  <dt className="text-xs font-bold uppercase tracking-[0.16em] text-subtle">{fact.label}</dt>
                  <dd className="mt-1 text-sm font-black text-foreground">
                    {fact.value}
                    {fact.unit ? <span className="ml-1 text-muted">{fact.unit}</span> : null}
                  </dd>
                </div>
              ))}
            </dl>
          </Panel>
        </aside>
      </section>

      <section className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_420px]">
        <Panel>
          <div className="flex flex-wrap items-end justify-between gap-3">
            <div>
              <p className="text-xs font-black uppercase tracking-[0.24em] text-accent">Component model</p>
              <h2 className="mt-2 text-2xl font-black tracking-[-0.03em] text-foreground">
                {partCountLabel(machine.parts.length)} prepared for viewer controls
              </h2>
            </div>
            <Badge tone="neutral">{machine.estimatedPartCount} estimated render parts</Badge>
          </div>

          <div className="mt-6 grid gap-3 md:grid-cols-2">
            {machine.parts.map((part) => (
              <article key={part.id} className="rounded-3xl border border-border/70 bg-surface/55 p-4">
                <h3 className="text-base font-black text-foreground">{part.name}</h3>
                <p className="mt-2 text-sm leading-6 text-muted">{part.description}</p>
                {part.material ? (
                  <p className="mt-3 text-xs font-semibold uppercase tracking-[0.16em] text-subtle">
                    Material · <span className="text-foreground">{part.material}</span>
                  </p>
                ) : null}
              </article>
            ))}
          </div>
        </Panel>

        <div className="space-y-6">
          <Panel>
            <p className="text-xs font-black uppercase tracking-[0.24em] text-accent">Applications</p>
            <ul className="mt-4 space-y-2 text-sm text-muted">
              {machine.applications.map((application) => (
                <li key={application} className="flex gap-2">
                  <span className="mt-2 size-1.5 rounded-full bg-accent" aria-hidden="true" />
                  <span>{application}</span>
                </li>
              ))}
            </ul>
          </Panel>

          <Panel>
            <p className="text-xs font-black uppercase tracking-[0.24em] text-accent">Guided tour goals</p>
            <ol className="mt-4 space-y-3 text-sm text-muted">
              {machine.learningObjectives.map((objective, index) => (
                <li key={objective} className="flex gap-3">
                  <span className="flex size-6 shrink-0 items-center justify-center rounded-full border border-accent/35 bg-accent/12 text-xs font-black text-accent">
                    {index + 1}
                  </span>
                  <span>{objective}</span>
                </li>
              ))}
            </ol>
          </Panel>
        </div>
      </section>

      {relatedMachines.length > 0 ? (
        <section className="space-y-4" aria-labelledby="related-machines-heading">
          <div>
            <p className="text-xs font-black uppercase tracking-[0.24em] text-accent">Continue exploring</p>
            <h2 id="related-machines-heading" className="mt-2 text-2xl font-black tracking-[-0.03em] text-foreground">
              Related machines
            </h2>
          </div>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            {relatedMachines.map((related) => (
              <MachineCard
                key={related.slug}
                machine={related}
                isFavourite={favourites.includes(related.slug)}
                onToggleFavourite={toggleFavourite}
                viewMode="compact"
              />
            ))}
          </div>
        </section>
      ) : null}
    </div>
  );
}