BillTracker/client/components/data/ImportMyDataSection.jsx

import React, { useState, useRef } from 'react';
import { toast } from 'sonner';
import { Database, Upload, AlertTriangle, Loader2 } from 'lucide-react';
import { api } from '@/api';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { SectionCard, CountPill, fmt, importErrorState } from './dataShared';

export default function ImportMyDataSection({ onHistoryRefresh, cardProps = {} }) {
  const fileRef = useRef(null);
  const [file, setFile] = useState(null);
  const [preview, setPreview] = useState({ status: 'idle', data: null, error: null });
  const [applyState, setApplyState] = useState({ status: 'idle', result: null, error: null });
  const [confirmOpen, setConfirmOpen] = useState(false);

  const reset = () => {
    setFile(null);
    setPreview({ status: 'idle', data: null, error: null });
    setApplyState({ status: 'idle', result: null, error: null });
    if (fileRef.current) fileRef.current.value = '';
  };

  const handlePreview = async () => {
    if (!file) {
      toast.error('Choose a SQLite data export first.');
      return;
    }
    setPreview({ status: 'loading', data: null, error: null });
    setApplyState({ status: 'idle', result: null, error: null });
    try {
      const data = await api.previewUserDbImport(file);
      setPreview({ status: 'ready', data, error: null });
      toast.success('SQLite export preview ready.');
    } catch (err) {
      setPreview({ status: 'error', data: null, error: importErrorState(err, 'SQLite import preview failed.') });
      toast.error(err.message || 'SQLite import preview failed.');
    }
  };

  const handleApply = () => {
    if (!preview.data?.import_session_id) return;
    setConfirmOpen(true);
  };

  const handleConfirmImport = async () => {
    setConfirmOpen(false);
    setApplyState({ status: 'loading', result: null, error: null });
    try {
      const result = await api.applyUserDbImport({
        import_session_id: preview.data.import_session_id,
        options: { overwrite: false },
      });
      setApplyState({ status: 'done', result, error: null });
      toast.success('SQLite data import applied.');
      onHistoryRefresh?.();
    } catch (err) {
      setApplyState({ status: 'error', result: null, error: importErrorState(err, 'SQLite import apply failed.') });
      toast.error(err.message || 'SQLite import apply failed.');
    }
  };

  const counts = preview.data?.counts || {};
  const summary = preview.data?.summary || {};

  return (
    <>
      <SectionCard title="Import My Data Export"
        subtitle="Restore data from a SQLite export created by this app for your account."
        {...cardProps}>
      <div className="px-6 py-5">
        <div className="rounded-lg border border-border/60 bg-muted/25 p-4">
          <div className="flex items-start gap-3">
            <Database className="mt-0.5 h-5 w-5 text-primary shrink-0" />
            <div>
              <p className="text-sm font-medium">Import a SQLite data export created by this app.</p>
              <p className="mt-1 text-xs text-muted-foreground">
                This is not a full system restore. Existing records are skipped by default, and admin/system data is never imported.
              </p>
            </div>
          </div>
        </div>

        <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-end">
          <label className="flex-1 space-y-1.5">
            <span className="text-xs font-medium text-muted-foreground">SQLite export file</span>
            <Input
              ref={fileRef}
              type="file"
              accept=".sqlite,.db,application/octet-stream,application/x-sqlite3,application/vnd.sqlite3"
              onChange={e => {
                setFile(e.target.files?.[0] || null);
                setPreview({ status: 'idle', data: null, error: null });
                setApplyState({ status: 'idle', result: null, error: null });
              }}
            />
          </label>
          <div className="flex gap-2">
            <Button size="sm" variant="outline" type="button" onClick={reset}>
              Clear
            </Button>
            <Button size="sm" type="button" disabled={!file || preview.status === 'loading'} onClick={handlePreview}>
              {preview.status === 'loading'
                ? <><Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />Previewing…</>
                : <><Upload className="h-3.5 w-3.5 mr-1.5" />Preview</>}
            </Button>
          </div>
        </div>

        {preview.status === 'error' && (
          <div className="mt-4 rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
            <AlertTriangle className="inline h-4 w-4 mr-1.5" />
            {preview.error?.message || 'SQLite import preview failed.'}
            {preview.error?.details?.length > 0 && (
              <ul className="mt-2 list-disc pl-5 text-xs">
                {preview.error.details.map((d, i) => (
                  <li key={i}>{d.message || d.table || JSON.stringify(d)}</li>
                ))}
              </ul>
            )}
          </div>
        )}

        {preview.status === 'ready' && preview.data && (
          <div className="mt-4 space-y-4">
            <div className="rounded-lg border border-border/60 bg-background/50 p-4">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <p className="text-sm font-medium">Preview ready</p>
                  <p className="mt-1 text-xs text-muted-foreground">
                    Exported {fmt(preview.data.metadata?.exported_at)} · {preview.data.source_filename || 'SQLite export'}
                  </p>
                </div>
                <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase text-muted-foreground">
                  User data only
                </span>
              </div>
              <div className="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-5">
                <CountPill label="Bills" value={counts.bills} />
                <CountPill label="Categories" value={counts.categories} />
                <CountPill label="Payments" value={counts.payments} />
                <CountPill label="Monthly" value={counts.monthly_bill_state} />
                <CountPill label="Notes" value={counts.notes} />
              </div>
              <div className="mt-4 grid gap-2 sm:grid-cols-2">
                {Object.entries(summary).filter(([, v]) => v && typeof v === 'object').map(([key, value]) => (
                  <div key={key} className="rounded-lg border border-border/50 bg-muted/20 px-3 py-2 text-xs">
                    <p className="font-semibold capitalize">{key.replace(/_/g, ' ')}</p>
                    <p className="mt-1 text-muted-foreground">
                      create {value.create || 0} · skip {value.skip || 0} · conflict {value.conflict || 0}
                    </p>
                  </div>
                ))}
              </div>
              {preview.data.warnings?.length > 0 && (
                <div className="mt-4 space-y-1">
                  {preview.data.warnings.map((warning, i) => (
                    <p key={i} className="text-xs text-amber-600 dark:text-amber-400">
                      <AlertTriangle className="mr-1 inline h-3.5 w-3.5" />{warning}
                    </p>
                  ))}
                </div>
              )}
            </div>

            <div className="flex items-center justify-between gap-3">
              <p className="text-xs text-muted-foreground">Review the preview before applying. Nothing is imported until you confirm.</p>
              <Button size="sm" type="button" disabled={applyState.status === 'loading'} onClick={handleApply}>
                {applyState.status === 'loading'
                  ? <><Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />Applying…</>
                  : 'Apply Import'}
              </Button>
            </div>
          </div>
        )}

        {applyState.status === 'done' && applyState.result && (
          <div className="mt-4 rounded-lg border border-emerald-500/30 bg-emerald-500/5 p-4">
            <p className="text-sm font-medium text-emerald-600">SQLite import applied</p>
            <div className="mt-3 grid grid-cols-2 gap-2 text-xs sm:grid-cols-4">
              <CountPill label="Created" value={applyState.result.rows_created} />
              <CountPill label="Skipped" value={applyState.result.rows_skipped} />
              <CountPill label="Conflicts" value={applyState.result.rows_conflicted} />
              <CountPill label="Errors" value={applyState.result.rows_errored} />
            </div>
          </div>
        )}

        {applyState.status === 'error' && (
          <div className="mt-4 rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
            <AlertTriangle className="inline h-4 w-4 mr-1.5" />{applyState.error?.message || 'SQLite import apply failed.'}
          </div>
        )}
      </div>
    </SectionCard>
    {/* Import confirmation dialog */}
    <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Import SQLite data export?</AlertDialogTitle>
          <AlertDialogDescription>
            Import this SQLite data export into your account? Existing records will be skipped by default.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={handleConfirmImport}>
            Confirm Import
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
    </>
  );
}