motovaultpro/frontend/src/features/ownership-costs/components/OwnershipCostForm.tsx

/**
 * @ai-summary Form component for creating/editing ownership costs
 */

import React from 'react';
import { Button } from '../../../shared-minimal/components/Button';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs from 'dayjs';
import { useCreateOwnershipCost } from '../hooks/useOwnershipCosts';
import type { OwnershipCostType } from '../types/ownership-costs.types';
import { useVehicles } from '../../vehicles/hooks/useVehicles';
import type { Vehicle } from '../../vehicles/types/vehicles.types';
import { useDocumentsList } from '../../documents/hooks/useDocuments';
import type { DocumentRecord } from '../../documents/types/documents.types';

interface OwnershipCostFormProps {
  onSuccess?: () => void;
  onCancel?: () => void;
}

export const OwnershipCostForm: React.FC<OwnershipCostFormProps> = ({ onSuccess, onCancel }) => {
  const [vehicleID, setVehicleID] = React.useState<string>('');
  const [costType, setCostType] = React.useState<OwnershipCostType>('insurance');
  const [amount, setAmount] = React.useState<string>('');
  const [description, setDescription] = React.useState<string>('');
  const [periodStart, setPeriodStart] = React.useState<string>('');
  const [periodEnd, setPeriodEnd] = React.useState<string>('');
  const [notes, setNotes] = React.useState<string>('');
  const [documentID, setDocumentID] = React.useState<string>('');
  const [error, setError] = React.useState<string | null>(null);

  const { data: vehicles } = useVehicles();
  const { data: documents } = useDocumentsList({ vehicleId: vehicleID });
  const create = useCreateOwnershipCost();

  const resetForm = () => {
    setVehicleID('');
    setCostType('insurance');
    setAmount('');
    setDescription('');
    setPeriodStart('');
    setPeriodEnd('');
    setNotes('');
    setDocumentID('');
    setError(null);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    if (!vehicleID) {
      setError('Please select a vehicle.');
      return;
    }

    const parsedAmount = parseFloat(amount);
    if (isNaN(parsedAmount) || parsedAmount <= 0) {
      setError('Please enter a valid positive amount.');
      return;
    }

    try {
      await create.mutateAsync({
        vehicleId: vehicleID,
        documentId: documentID || undefined,
        costType: costType,
        amount: parsedAmount,
        description: description.trim() || undefined,
        periodStart: periodStart || undefined,
        periodEnd: periodEnd || undefined,
        notes: notes.trim() || undefined,
      });

      resetForm();
      onSuccess?.();
    } catch (err: any) {
      setError(err?.message || 'Failed to create ownership cost');
    }
  };

  const vehicleLabel = (v: Vehicle) => {
    if (v.nickname && v.nickname.trim().length > 0) return v.nickname.trim();
    const parts = [v.year, v.make, v.model, v.trimLevel].filter(Boolean);
    const primary = parts.join(' ').trim();
    if (primary.length > 0) return primary;
    if (v.vin && v.vin.length > 0) return v.vin;
    return v.id.slice(0, 8) + '...';
  };

  const documentLabel = (doc: DocumentRecord) => {
    return doc.title || `Document ${doc.id.slice(0, 8)}`;
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <form onSubmit={handleSubmit} className="w-full">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
          <div className="flex flex-col">
            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Vehicle</label>
            <select
              className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
              value={vehicleID}
              onChange={(e) => setVehicleID(e.target.value)}
              required
            >
              <option value="">Select vehicle...</option>
              {(vehicles || []).map((v: Vehicle) => (
                <option key={v.id} value={v.id}>{vehicleLabel(v)}</option>
              ))}
            </select>
          </div>

          <div className="flex flex-col">
            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Cost Type</label>
            <select
              className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
              value={costType}
              onChange={(e) => setCostType(e.target.value as OwnershipCostType)}
            >
              <option value="insurance">Insurance</option>
              <option value="registration">Registration</option>
              <option value="tax">Tax</option>
              <option value="inspection">Inspection</option>
              <option value="parking">Parking</option>
              <option value="other">Other</option>
            </select>
          </div>

          <div className="flex flex-col md:col-span-2">
            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Amount</label>
            <div className="relative">
              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-titanio">$</span>
              <input
                className="h-11 min-h-[44px] w-full rounded-lg border pl-7 pr-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
                type="number"
                step="0.01"
                min="0.01"
                value={amount}
                placeholder="0.00"
                onChange={(e) => setAmount(e.target.value)}
                required
              />
            </div>
          </div>

          <div className="flex flex-col md:col-span-2">
            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Description (optional)</label>
            <input
              className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
              type="text"
              value={description}
              placeholder="e.g., State Farm Full Coverage"
              onChange={(e) => setDescription(e.target.value)}
            />
          </div>

          <div className="flex flex-col">
            <DatePicker
              label="Period Start (optional)"
              value={periodStart ? dayjs(periodStart) : null}
              onChange={(newValue) => setPeriodStart(newValue?.format('YYYY-MM-DD') || '')}
              format="MM/DD/YYYY"
              slotProps={{
                textField: {
                  fullWidth: true,
                  sx: {
                    '& .MuiOutlinedInput-root': {
                      minHeight: 44,
                    },
                  },
                },
              }}
            />
          </div>
          <div className="flex flex-col">
            <DatePicker
              label="Period End (optional)"
              value={periodEnd ? dayjs(periodEnd) : null}
              onChange={(newValue) => setPeriodEnd(newValue?.format('YYYY-MM-DD') || '')}
              format="MM/DD/YYYY"
              slotProps={{
                textField: {
                  fullWidth: true,
                  sx: {
                    '& .MuiOutlinedInput-root': {
                      minHeight: 44,
                    },
                  },
                },
              }}
            />
          </div>

          <div className="flex flex-col md:col-span-2">
            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Notes (optional)</label>
            <textarea
              className="min-h-[88px] rounded-lg border px-3 py-2 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
            />
          </div>

          <div className="flex flex-col md:col-span-2">
            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Link to Document (optional)</label>
            <select
              className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
              value={documentID}
              onChange={(e) => setDocumentID(e.target.value)}
              disabled={!vehicleID}
            >
              <option value="">No document</option>
              {(documents || []).map((doc: DocumentRecord) => (
                <option key={doc.id} value={doc.id}>{documentLabel(doc)}</option>
              ))}
            </select>
          </div>
        </div>

        {error && (
          <div className="text-red-600 dark:text-red-400 text-sm mt-3">{error}</div>
        )}

        <div className="flex flex-col sm:flex-row gap-2 mt-4">
          <Button type="submit" className="min-h-[44px]">Create Ownership Cost</Button>
          <Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]">Cancel</Button>
        </div>
      </form>
    </LocalizationProvider>
  );
};

export default OwnershipCostForm;