'use client';

/**
 * Explainer page that lives under /<portSlug>/invoices/upload-receipts.
 *
 * The actual scanner UI is mobile-only and lives at /<portSlug>/scan as a
 * standalone PWA surface. This page tells operators how to install it on
 * their phone's home screen and walks through the workflow. It also
 * surfaces a direct "Open scanner" button as a fallback for users who
 * just want to navigate without installing.
 */

import Link from 'next/link';
import { Camera, Smartphone, Apple, Globe, ArrowRight, Sparkles } from 'lucide-react';

import { PageHeader } from '@/components/shared/page-header';
import { Button } from '@/components/ui/button';

interface Props {
  portSlug: string;
}

export function UploadReceiptsGuide({ portSlug }: Props) {
  const scannerUrl = `/${portSlug}/scan`;

  return (
    <div className="space-y-6">
      <PageHeader
        title="Receipt upload"
        eyebrow="Business expenses"
        description="Capture an out-of-pocket business expense by photographing the receipt. OCR extracts vendor, date, total, and currency; finance reviews and reimburses."
        variant="gradient"
        actions={
          <Button asChild>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <Link href={scannerUrl as any}>
              <Camera className="mr-2 h-4 w-4" />
              Open scanner
            </Link>
          </Button>
        }
      />

      {/* What it does */}
      <section className="rounded-xl border border-border bg-card p-5 shadow-xs">
        <div className="flex items-start gap-3">
          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand/10 text-brand">
            <Sparkles className="h-5 w-5" aria-hidden />
          </div>
          <div className="min-w-0 flex-1">
            <h2 className="text-base font-semibold">What it does</h2>
            <p className="mt-1 text-sm text-muted-foreground">
              Photograph the receipt; the scanner extracts the vendor, date, total, and currency
              into a pre-filled expense record. Finance reviews and reimburses from the parent
              company.
            </p>
            <p className="mt-2 text-sm text-muted-foreground">
              Extraction uses on-device OCR with AI-assisted field detection. Typical turnaround
              from photograph to saved record is under ten seconds.
            </p>
          </div>
        </div>
      </section>

      {/* Two-step explainer: install first, then use */}
      <div className="grid gap-4 lg:grid-cols-2">
        <Step
          number={1}
          icon={<Smartphone className="h-5 w-5" />}
          title="Install the scanner"
          description="One-time setup. The scanner then opens from the home screen like any native app."
        >
          <PlatformBlock
            icon={<Apple className="h-4 w-4" />}
            label="iPhone / iPad (Safari)"
            steps={[
              <>
                Open{' '}
                <Link
                  href={scannerUrl as never}
                  className="text-brand underline-offset-2 hover:underline"
                >
                  the scanner
                </Link>{' '}
                in Safari.
              </>,
              'Tap the Share icon.',
              <>
                Select <span className="font-medium">Add to Home Screen</span>.
              </>,
              'Confirm to install.',
            ]}
          />
          <PlatformBlock
            icon={<Globe className="h-4 w-4" />}
            label="Android (Chrome)"
            steps={[
              <>
                Open{' '}
                <Link
                  href={scannerUrl as never}
                  className="text-brand underline-offset-2 hover:underline"
                >
                  the scanner
                </Link>{' '}
                in Chrome.
              </>,
              'Open the three-dot menu.',
              <>
                Select <span className="font-medium">Install app</span>.
              </>,
              'Confirm to install.',
            ]}
          />
        </Step>

        <Step
          number={2}
          icon={<Camera className="h-5 w-5" />}
          title="Capture a receipt"
          description="Launch the scanner and follow the on-screen prompts."
        >
          <ol className="space-y-3 pl-4 text-sm text-muted-foreground list-decimal">
            <li>
              <span className="font-medium text-foreground">Tap the camera tile.</span> Centre the
              receipt flat and within the frame; capture.
            </li>
            <li>
              <span className="font-medium text-foreground">Review the extracted fields.</span>{' '}
              Vendor, date, total, and currency populate automatically. Correct any field by tapping
              it; category is the field most often set manually.
            </li>
            <li>
              <span className="font-medium text-foreground">Save.</span> The record lands as a
              pending expense for finance review on the{' '}
              <Link
                href={`/${portSlug}/expenses` as never}
                className="text-brand underline-offset-2 hover:underline"
              >
                Expenses page
              </Link>
              . Submission status is visible from the same view.
            </li>
          </ol>
        </Step>
      </div>

      {/* Best practices */}
      <div className="rounded-xl border border-dashed border-border bg-muted/30 p-5">
        <h3 className="text-sm font-semibold">Best practices</h3>
        <ul className="mt-2 space-y-1.5 text-sm text-muted-foreground list-disc pl-5">
          <li>
            Frame the entire receipt. Cropped edges can drop the total or date and trigger a finance
            review.
          </li>
          <li>Hold steady; bright, even lighting yields the most reliable extraction.</li>
          <li>
            Foreign currencies are supported when the currency code is printed on the slip;
            conversion is handled at reimbursement.
          </li>
          <li>
            Add context in the description field where relevant (counterparty, purpose) to
            accelerate finance approval.
          </li>
          <li>
            Lost the home-screen shortcut? Reopen this page on the device and select{' '}
            <span className="font-medium">Open scanner</span>.
          </li>
        </ul>
      </div>
    </div>
  );
}

function Step({
  number,
  icon,
  title,
  description,
  children,
}: {
  number: number;
  icon: React.ReactNode;
  title: string;
  description: string;
  children: React.ReactNode;
}) {
  return (
    <section className="rounded-xl border border-border bg-card p-5 shadow-xs">
      <div className="flex items-start gap-3">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand/10 text-brand">
          {icon}
        </div>
        <div className="min-w-0 flex-1">
          <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
            Step {number}
          </div>
          <h2 className="mt-0.5 text-base font-semibold">{title}</h2>
          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
      <div className="mt-4 space-y-4">{children}</div>
    </section>
  );
}

function PlatformBlock({
  icon,
  label,
  steps,
}: {
  icon: React.ReactNode;
  label: string;
  steps: React.ReactNode[];
}) {
  return (
    <div className="rounded-lg border border-border/60 bg-background/50 p-3">
      <div className="flex items-center gap-2 text-sm font-medium">
        {icon}
        {label}
      </div>
      <ol className="mt-2 space-y-1.5 pl-5 text-sm text-muted-foreground list-decimal">
        {steps.map((s, i) => (
          <li key={i}>{s}</li>
        ))}
      </ol>
      <div className="mt-2 flex items-center text-xs text-muted-foreground/80">
        <ArrowRight className="mr-1 h-3 w-3" aria-hidden />
        The scanner now launches from the home screen.
      </div>
    </div>
  );
}
