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 } 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;
}

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);

  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);
    },
  });

  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',
        },
      }),
    onSuccess: () => {
      router.push(`/${params.portSlug}/expenses`);
    },
  });

  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;

    const url = URL.createObjectURL(file);
    setPreviewUrl(url);
    scanMutation.mutate(file);
  }

  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="border-2 border-dashed rounded-lg p-4 text-center cursor-pointer hover:bg-muted/50 transition-colors"
              onClick={() => fileInputRef.current?.click()}
            >
              <img
                src={previewUrl}
                alt="Receipt preview"
                className="max-h-64 mx-auto rounded object-contain"
              />
            </div>
          ) : (
            <div className="grid gap-2 sm:grid-cols-2">
              <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>
              <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 library</span>
                <span className="hidden sm:inline">Click to upload or drag and drop</span>
              </Button>
              <p className="text-xs text-muted-foreground sm:col-span-2 text-center">
                JPEG, PNG, WebP up to 10MB
              </p>
            </div>
          )}
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            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}
              >
                {saveMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Save as Expense
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}