pn-new-crm/src/app/(dashboard)/[portSlug]/expenses/scan/page.tsx

'use client';

import { useEffect, useRef, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { useMutation } from '@tanstack/react-query';
import { Camera, Loader2, ScanLine, Upload, X } from 'lucide-react';

import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { apiFetch } from '@/lib/api/client';
import { EXPENSE_CATEGORIES } from '@/lib/constants';

interface ScanResult {
  establishment: string | null;
  date: string | null;
  amount: number | null;
  currency: string | null;
  lineItems: Array<{ description: string; amount: number }>;
  confidence: number;
}

interface UploadedFileMeta {
  id: string;
  filename: string;
}

export default function ScanReceiptPage() {
  const params = useParams<{ portSlug: string }>();
  const router = useRouter();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const cameraInputRef = useRef<HTMLInputElement>(null);
  const [scanResult, setScanResult] = useState<ScanResult | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  // After OCR succeeds we also upload the receipt to /api/v1/files/upload
  // so the expense links to the actual image. The legacy scanner skipped
  // this step and saved expenses without their receipt — which silently
  // disqualified them from parent-company reimbursement (the warning the
  // PDF export now surfaces).
  const [uploadedFile, setUploadedFile] = useState<UploadedFileMeta | null>(null);
  const [pendingFile, setPendingFile] = useState<File | null>(null);

  const { setChrome } = useMobileChrome();
  useEffect(() => {
    setChrome({ title: 'Scan Receipt', showBackButton: true });
    return () => setChrome({ title: null, showBackButton: false });
  }, [setChrome]);

  // Editable fields from scan
  const [establishment, setEstablishment] = useState('');
  const [amount, setAmount] = useState('');
  const [currency, setCurrency] = useState('USD');
  const [date, setDate] = useState('');
  const [category, setCategory] = useState('');

  const scanMutation = useMutation({
    mutationFn: async (file: File) => {
      const formData = new FormData();
      formData.append('file', file);
      const res = await fetch('/api/v1/expenses/scan-receipt', {
        method: 'POST',
        body: formData,
        credentials: 'include',
      });
      if (!res.ok) throw new Error('Scan failed');
      return res.json() as Promise<{ data: ScanResult }>;
    },
    onSuccess: (response) => {
      const result = response.data;
      setScanResult(result);
      if (result.establishment) setEstablishment(result.establishment);
      if (result.amount) setAmount(String(result.amount));
      if (result.currency) setCurrency(result.currency);
      if (result.date) setDate(result.date.split('T')[0] ?? result.date);
    },
  });

  // Uploads the receipt image to /api/v1/files/upload (category=receipt)
  // so the new expense row can link to it via receiptFileIds. Runs in
  // parallel with the OCR scan so the rep can keep editing fields while
  // the upload completes.
  const uploadMutation = useMutation({
    mutationFn: async (file: File): Promise<UploadedFileMeta> => {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('category', 'receipt');
      const res = await fetch('/api/v1/files/upload', {
        method: 'POST',
        body: formData,
        credentials: 'include',
      });
      if (!res.ok) throw new Error('Receipt upload failed');
      const json = (await res.json()) as { data: { id: string; filename: string } };
      return { id: json.data.id, filename: json.data.filename };
    },
    onSuccess: (meta) => {
      setUploadedFile(meta);
    },
  });

  const saveMutation = useMutation({
    mutationFn: () =>
      apiFetch('/api/v1/expenses', {
        method: 'POST',
        body: {
          establishmentName: establishment,
          amount: Number(amount),
          currency,
          category: category || undefined,
          expenseDate: date ? new Date(date) : new Date(),
          paymentStatus: 'unpaid',
          receiptFileIds: uploadedFile ? [uploadedFile.id] : undefined,
          // The scanner path always has a receipt (we wouldn't have OCR'd
          // it otherwise), so we never need the no-receipt flag here.
        },
      }),
    onSuccess: () => {
      router.push(`/${params.portSlug}/expenses`);
    },
  });

  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setPendingFile(file);
    const url = URL.createObjectURL(file);
    setPreviewUrl(url);
    // Kick off OCR scan + storage upload concurrently. The two are
    // independent server calls and the rep is staring at the preview
    // while both run.
    scanMutation.mutate(file);
    uploadMutation.mutate(file);
  }

  function handleClearReceipt() {
    if (previewUrl) URL.revokeObjectURL(previewUrl);
    setPreviewUrl(null);
    setUploadedFile(null);
    setPendingFile(null);
    setScanResult(null);
    // Reset in-flight mutations so a late onSuccess doesn't repopulate
    // the form against an already-cleared UI (audit finding: stale
    // receipt could land on the next Save).
    scanMutation.reset();
    uploadMutation.reset();
    if (fileInputRef.current) fileInputRef.current.value = '';
    if (cameraInputRef.current) cameraInputRef.current.value = '';
  }
  void pendingFile;

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div className="hidden sm:block">
        <h1 className="text-2xl font-bold">Scan Receipt</h1>
        <p className="text-muted-foreground mt-1">
          Upload a receipt image and we will extract the expense details automatically.
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <ScanLine className="h-4 w-4" />
            Upload Receipt
          </CardTitle>
        </CardHeader>
        <CardContent>
          {previewUrl ? (
            <div className="space-y-2">
              <div className="relative border-2 border-dashed rounded-lg p-4 text-center bg-muted/20">
                <img
                  src={previewUrl}
                  alt="Receipt preview"
                  className="max-h-64 mx-auto rounded object-contain"
                />
                <button
                  type="button"
                  onClick={handleClearReceipt}
                  aria-label="Remove receipt"
                  className="absolute top-2 right-2 rounded-full bg-background/80 hover:bg-background border p-1.5 shadow-sm"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>
              <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
                {uploadMutation.isPending && (
                  <span className="inline-flex items-center gap-1">
                    <Loader2 className="h-3 w-3 animate-spin" /> Uploading receipt&hellip;
                  </span>
                )}
                {uploadedFile && (
                  <span className="text-emerald-600">
                    Receipt uploaded ({uploadedFile.filename})
                  </span>
                )}
                {uploadMutation.isError && (
                  <span className="text-destructive">
                    Receipt upload failed — save will still create the expense without an image.
                  </span>
                )}
              </div>
            </div>
          ) : (
            <div className="grid gap-2 sm:grid-cols-2">
              {/* Camera button — available on mobile devices that surface the
                  built-in capture flow when an `image/*` input has the
                  `capture` attribute. Hidden on desktop where it's a no-op. */}
              <Button
                type="button"
                size="lg"
                className="w-full h-14 sm:hidden"
                onClick={() => cameraInputRef.current?.click()}
              >
                <Camera className="mr-2 h-5 w-5" />
                Take photo
              </Button>
              {/* File picker — works on every platform. Phrased so the copy
                  fits both mobile (library/files) and desktop (drag and drop). */}
              <Button
                type="button"
                variant="outline"
                size="lg"
                className="w-full h-14"
                onClick={() => fileInputRef.current?.click()}
              >
                <Upload className="mr-2 h-5 w-5" />
                <span className="sm:hidden">Choose from device</span>
                <span className="hidden sm:inline">Choose from device or drag and drop</span>
              </Button>
              <p className="text-xs text-muted-foreground sm:col-span-2 text-center">
                JPEG, PNG, HEIC, WebP up to 10 MB
              </p>
            </div>
          )}
          {/* `image/*` is the broadest accept — includes HEIC on iOS,
              JPEG/PNG/WebP everywhere. The capture attribute on the second
              input invokes the native camera flow on mobile. */}
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*,application/pdf"
            className="hidden"
            onChange={handleFileChange}
          />
          <input
            ref={cameraInputRef}
            type="file"
            accept="image/*"
            capture="environment"
            className="hidden"
            onChange={handleFileChange}
          />

          {scanMutation.isPending && (
            <div className="flex items-center justify-center gap-2 mt-4 text-muted-foreground">
              <Loader2 className="h-4 w-4 animate-spin" />
              <span className="text-sm">Scanning receipt...</span>
            </div>
          )}
        </CardContent>
      </Card>

      {(scanResult || scanMutation.isSuccess) && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">
              Extracted Details
              {scanResult && (
                <span className="text-sm font-normal text-muted-foreground ml-2">
                  (confidence: {Math.round((scanResult.confidence ?? 0) * 100)}%)
                </span>
              )}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1">
                <Label htmlFor="scan-amount">Amount</Label>
                <Input
                  id="scan-amount"
                  type="number"
                  step="0.01"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  placeholder="0.00"
                />
              </div>
              <div className="space-y-1">
                <Label htmlFor="scan-currency">Currency</Label>
                <Input
                  id="scan-currency"
                  value={currency}
                  onChange={(e) => setCurrency(e.target.value.toUpperCase())}
                  maxLength={3}
                  placeholder="USD"
                />
              </div>
            </div>

            <div className="space-y-1">
              <Label htmlFor="scan-establishment">Establishment</Label>
              <Input
                id="scan-establishment"
                value={establishment}
                onChange={(e) => setEstablishment(e.target.value)}
                placeholder="Establishment name"
              />
            </div>

            <div className="space-y-1">
              <Label htmlFor="scan-date">Date</Label>
              <Input
                id="scan-date"
                type="date"
                value={date}
                onChange={(e) => setDate(e.target.value)}
              />
            </div>

            <div className="space-y-1">
              <Label htmlFor="scan-category">Category</Label>
              <Select value={category} onValueChange={setCategory}>
                <SelectTrigger id="scan-category">
                  <SelectValue placeholder="Select category" />
                </SelectTrigger>
                <SelectContent>
                  {EXPENSE_CATEGORIES.map((cat) => (
                    <SelectItem key={cat} value={cat}>
                      {cat.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {saveMutation.isError && (
              <p className="text-sm text-destructive">{(saveMutation.error as Error).message}</p>
            )}

            <div className="flex gap-2 pt-2">
              <Button variant="outline" onClick={() => router.push(`/${params.portSlug}/expenses`)}>
                Cancel
              </Button>
              <Button
                onClick={() => saveMutation.mutate()}
                disabled={
                  saveMutation.isPending ||
                  !amount ||
                  // Block save while the receipt upload is still in flight —
                  // otherwise the rep can hit Save before the storage round
                  // trip finishes and the expense lands without `receiptFileIds`,
                  // silently re-creating the legacy receipt-loss bug.
                  uploadMutation.isPending
                }
              >
                {(saveMutation.isPending || uploadMutation.isPending) && (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                )}
                {uploadMutation.isPending ? 'Uploading…' : 'Save as Expense'}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}