import { PageHeader } from '@/components/shared/page-header';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

export default function DataImportPage() {
  return (
    <div>
      <PageHeader
        title="Data import"
        description="What you can import today and what an in-app importer will look like."
      />

      <div className="grid gap-4 mt-6 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Available imports today</CardTitle>
            <CardDescription>Run from the command line until the UI catches up.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div>
              <p>
                <strong>Berths from NocoDB:</strong>
              </p>
              <pre className="bg-muted/40 rounded-md p-2 text-xs mt-1 overflow-auto">
                pnpm tsx scripts/import-berths-from-nocodb.ts --apply --port-slug port-nimara
              </pre>
              <p className="text-xs text-muted-foreground mt-1">
                Idempotent. Skips rows where <code>updated_at &gt; last_imported_at</code> unless
                you pass <code>--force</code>. Add <code>--update-snapshot</code> to also rewrite{' '}
                <code>src/lib/db/seed-data/berths.json</code>.
              </p>
            </div>
            <div>
              <p>
                <strong>Storage backend migration:</strong>
              </p>
              <pre className="bg-muted/40 rounded-md p-2 text-xs mt-1 overflow-auto">
                pnpm tsx scripts/migrate-storage.ts
              </pre>
              <p className="text-xs text-muted-foreground mt-1">
                Run after switching <code>system_settings.storage_backend</code> in System Settings.
              </p>
            </div>
            <div>
              <p>
                <strong>Seed (rebuild dev fixtures):</strong>
              </p>
              <pre className="bg-muted/40 rounded-md p-2 text-xs mt-1 overflow-auto">
                pnpm db:seed
              </pre>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>What this page will become</CardTitle>
            <CardDescription>Planned UI for self-serve imports.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2 text-sm">
            <ul className="list-disc pl-5 space-y-1">
              <li>Drag-and-drop CSV / XLSX upload with column-mapping UI.</li>
              <li>Dry-run preview that shows new vs. matched-existing rows before commit.</li>
              <li>Conflict-resolution choices (skip, update, dedup-by-email) per import type.</li>
              <li>Per-port import history with rollback.</li>
              <li>Templates for clients, yachts, companies, berths, reservations, expenses.</li>
            </ul>
            <p className="text-xs text-muted-foreground pt-2">
              Imports run against the BullMQ <code>import</code> queue (concurrency 1) so partial
              failures don&rsquo;t leave the database half-loaded.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}