pn-new-crm/src/components/admin/bulk-add-berths-wizard.tsx

'use client';

/**
 * Two-step wizard for bulk-creating berths during new-port setup.
 *
 * Step 1: pick the dock letter, the range (start..end mooring number),
 *   and the genuinely-standard defaults (tenure, status). Generates one
 *   empty row per mooring in the range.
 *
 * Step 2: editable table of the generated rows. Reps fill in per-row
 *   dimensions / pontoon / pricing. "Apply to all" inputs at the top
 *   of each column copy a value down. Validation is inline.
 *
 * Per PRE-DEPLOY-PLAN § 1.4.13. Drag-fill is a stretch — left as a
 * follow-up; keyboard-friendly "Apply to all" covers most of the
 * speed win without the complexity.
 */

import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { useParams, useRouter } from 'next/navigation';
import { Loader2, Trash2 } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { useVocabulary } from '@/hooks/use-vocabulary';
import { CurrencySelect } from '@/components/shared/currency-select';

const DOCK_LETTERS = ['A', 'B', 'C', 'D', 'E'] as const;
type DockLetter = (typeof DOCK_LETTERS)[number];

interface RowDraft {
  mooringNumber: string;
  area: string;
  status: 'available';
  tenureType: 'permanent' | 'fixed_term';
  lengthFt: string;
  widthFt: string;
  draftFt: string;
  sidePontoon: string;
  price: string;
  priceCurrency: string;
}

function genRange(letter: DockLetter, start: number, end: number): RowDraft[] {
  const out: RowDraft[] = [];
  for (let i = start; i <= end; i += 1) {
    out.push({
      mooringNumber: `${letter}${i}`,
      area: letter,
      status: 'available',
      tenureType: 'permanent',
      lengthFt: '',
      widthFt: '',
      draftFt: '',
      sidePontoon: '',
      price: '',
      priceCurrency: 'USD',
    });
  }
  return out;
}

export function BulkAddBerthsWizard() {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';
  const router = useRouter();
  // Canonical, admin-editable side-pontoon vocabulary (per-port overrides
  // honoured). Falls back to BERTH_SIDE_PONTOON_OPTIONS defaults when the
  // /api/v1/vocabularies request hasn't resolved yet.
  const sidePontoonOptions = useVocabulary('berth_side_pontoon_options');

  const [step, setStep] = useState<'sequence' | 'edit'>('sequence');

  // Step 1 state
  const [letter, setLetter] = useState<DockLetter>('A');
  const [rangeStart, setRangeStart] = useState('1');
  const [rangeEnd, setRangeEnd] = useState('10');
  const [tenure, setTenure] = useState<'permanent' | 'fixed_term'>('permanent');

  // Step 2 state
  const [rows, setRows] = useState<RowDraft[]>([]);

  function handleGenerate() {
    const s = parseInt(rangeStart, 10);
    const e = parseInt(rangeEnd, 10);
    if (!Number.isFinite(s) || !Number.isFinite(e) || s < 0 || e < s) {
      toast.error('Invalid range');
      return;
    }
    if (e - s > 499) {
      toast.error('Cap is 500 berths per batch.');
      return;
    }
    const seeded = genRange(letter, s, e).map((r) => ({ ...r, tenureType: tenure }));
    setRows(seeded);
    setStep('edit');
  }

  function setRowField<K extends keyof RowDraft>(idx: number, key: K, value: RowDraft[K]) {
    setRows((prev) => prev.map((r, i) => (i === idx ? { ...r, [key]: value } : r)));
  }

  function applyToAll<K extends keyof RowDraft>(key: K, value: RowDraft[K]) {
    setRows((prev) => prev.map((r) => ({ ...r, [key]: value })));
  }

  function removeRow(idx: number) {
    setRows((prev) => prev.filter((_, i) => i !== idx));
  }

  const mutation = useMutation({
    mutationFn: async () => {
      const payload = {
        berths: rows.map((r) => ({
          mooringNumber: r.mooringNumber,
          area: r.area,
          status: r.status,
          tenureType: r.tenureType,
          lengthFt: r.lengthFt ? Number(r.lengthFt) : undefined,
          widthFt: r.widthFt ? Number(r.widthFt) : undefined,
          draftFt: r.draftFt ? Number(r.draftFt) : undefined,
          price: r.price ? Number(r.price) : undefined,
          priceCurrency: r.priceCurrency || undefined,
          sidePontoon: r.sidePontoon || undefined,
        })),
      };
      const res = await apiFetch<{ data: { inserted: number } }>('/api/v1/berths/bulk-add', {
        method: 'POST',
        body: payload,
      });
      return res.data;
    },
    onSuccess: (data) => {
      toast.success(`Created ${data.inserted} berths`);
      router.push(`/${portSlug}/berths`);
    },
    onError: (err) => toastError(err),
  });

  if (step === 'sequence') {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Step 1 — Sequence</CardTitle>
          <CardDescription>
            Pick the dock letter and the mooring-number range. Tenure + status apply to every row;
            everything else (dimensions, pricing, pontoon) is filled per row in Step 2.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-4">
            <div className="space-y-1">
              <Label>Dock letter</Label>
              <Select value={letter} onValueChange={(v) => setLetter(v as DockLetter)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {DOCK_LETTERS.map((l) => (
                    <SelectItem key={l} value={l}>
                      {l}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label>Range start</Label>
              <Input value={rangeStart} onChange={(e) => setRangeStart(e.target.value)} />
            </div>
            <div className="space-y-1">
              <Label>Range end</Label>
              <Input value={rangeEnd} onChange={(e) => setRangeEnd(e.target.value)} />
            </div>
            <div className="space-y-1">
              <Label>Tenure (all rows)</Label>
              <Select
                value={tenure}
                onValueChange={(v) => setTenure(v as 'permanent' | 'fixed_term')}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="permanent">Permanent</SelectItem>
                  <SelectItem value="fixed_term">Fixed term</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <p className="text-xs text-muted-foreground">
            Will generate {Math.max(0, parseInt(rangeEnd, 10) - parseInt(rangeStart, 10) + 1)} rows
            (e.g. {letter}
            {rangeStart} … {letter}
            {rangeEnd}).
          </p>
          <Button onClick={handleGenerate}>Continue →</Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Step 2 — Fill in each row</CardTitle>
        <CardDescription>
          Per-row dimensions, pricing, pontoon. Use the &ldquo;Apply to all&rdquo; inputs in the
          header to copy a value down every row at once.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full text-xs">
            <thead>
              <tr className="border-b text-left text-muted-foreground">
                <th scope="col" className="py-2 pr-2">
                  Mooring
                </th>
                <th scope="col" className="py-2 pr-2">
                  Length (ft)
                </th>
                <th scope="col" className="py-2 pr-2">
                  Width (ft)
                </th>
                <th scope="col" className="py-2 pr-2">
                  Draft (ft)
                </th>
                <th scope="col" className="py-2 pr-2">
                  Side pontoon
                </th>
                <th scope="col" className="py-2 pr-2">
                  Price
                </th>
                <th scope="col" className="py-2 pr-2">
                  Currency
                </th>
                <th scope="col" className="py-2 pr-2" />
              </tr>
              <tr className="border-b bg-muted/30">
                <td className="py-1 pr-2 text-[10px] text-muted-foreground">apply to all →</td>
                {(
                  [
                    ['lengthFt', 'number'],
                    ['widthFt', 'number'],
                    ['draftFt', 'number'],
                  ] as const
                ).map(([k, type]) => (
                  <td key={k} className="py-1 pr-2">
                    <Input
                      className="h-7 text-xs"
                      type={type}
                      onBlur={(e) => {
                        if (e.target.value) applyToAll(k, e.target.value);
                      }}
                      placeholder="all"
                    />
                  </td>
                ))}
                <td className="py-1 pr-2">
                  <Select
                    onValueChange={(v) => applyToAll('sidePontoon', v === '__none__' ? '' : v)}
                  >
                    <SelectTrigger className="h-7 text-xs">
                      <SelectValue placeholder="all" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">(none)</SelectItem>
                      {sidePontoonOptions.filter(Boolean).map((p) => (
                        <SelectItem key={p} value={p}>
                          {p}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </td>
                <td className="py-1 pr-2">
                  <Input
                    className="h-7 text-xs"
                    type="number"
                    onBlur={(e) => {
                      if (e.target.value) applyToAll('price', e.target.value);
                    }}
                    placeholder="all"
                  />
                </td>
                <td className="py-1 pr-2">
                  <CurrencySelect
                    value={undefined}
                    onValueChange={(v) => applyToAll('priceCurrency', v)}
                    className="h-7 text-xs"
                  />
                </td>
                <td />
              </tr>
            </thead>
            <tbody>
              {rows.map((row, idx) => (
                <tr key={row.mooringNumber} className="border-b last:border-b-0">
                  <td className="py-1 pr-2 font-medium">{row.mooringNumber}</td>
                  <td className="py-1 pr-2">
                    <Input
                      className="h-7 text-xs"
                      type="number"
                      value={row.lengthFt}
                      onChange={(e) => setRowField(idx, 'lengthFt', e.target.value)}
                    />
                  </td>
                  <td className="py-1 pr-2">
                    <Input
                      className="h-7 text-xs"
                      type="number"
                      value={row.widthFt}
                      onChange={(e) => setRowField(idx, 'widthFt', e.target.value)}
                    />
                  </td>
                  <td className="py-1 pr-2">
                    <Input
                      className="h-7 text-xs"
                      type="number"
                      value={row.draftFt}
                      onChange={(e) => setRowField(idx, 'draftFt', e.target.value)}
                    />
                  </td>
                  <td className="py-1 pr-2">
                    <Select
                      value={row.sidePontoon || '__none__'}
                      onValueChange={(v) =>
                        setRowField(idx, 'sidePontoon', v === '__none__' ? '' : v)
                      }
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="__none__">—</SelectItem>
                        {sidePontoonOptions.filter(Boolean).map((p) => (
                          <SelectItem key={p} value={p}>
                            {p}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </td>
                  <td className="py-1 pr-2">
                    <Input
                      className="h-7 text-xs"
                      type="number"
                      value={row.price}
                      onChange={(e) => setRowField(idx, 'price', e.target.value)}
                    />
                  </td>
                  <td className="py-1 pr-2">
                    <CurrencySelect
                      value={row.priceCurrency || undefined}
                      onValueChange={(v) => setRowField(idx, 'priceCurrency', v)}
                      className="h-7 w-24 text-xs"
                    />
                  </td>
                  <td className="py-1 pr-2">
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-7 w-7 p-0"
                      onClick={() => removeRow(idx)}
                      aria-label={`Remove ${row.mooringNumber}`}
                    >
                      <Trash2 className="size-3.5" aria-hidden />
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="mt-4 flex items-center justify-between">
          <Button variant="ghost" onClick={() => setStep('sequence')} disabled={mutation.isPending}>
            ← Back
          </Button>
          <Button
            disabled={mutation.isPending || rows.length === 0}
            onClick={() => mutation.mutate()}
          >
            {mutation.isPending ? (
              <Loader2 className="size-4 animate-spin" aria-hidden />
            ) : (
              `Create ${rows.length} berths`
            )}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}