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

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

import React, { useState, useEffect } from 'react';
import { Button } from '../../../shared-minimal/components/Button';
import {
  OwnershipCost,
  OwnershipCostType,
  CostInterval,
  COST_TYPE_LABELS,
  INTERVAL_LABELS
} from '../types/ownership-costs.types';

interface OwnershipCostFormProps {
  vehicleId: string;
  initialData?: OwnershipCost;
  onSubmit: (data: {
    costType: OwnershipCostType;
    description?: string;
    amount: number;
    interval: CostInterval;
    startDate: string;
    endDate?: string;
  }) => Promise<void>;
  onCancel: () => void;
  loading?: boolean;
}

export const OwnershipCostForm: React.FC<OwnershipCostFormProps> = ({
  initialData,
  onSubmit,
  onCancel,
  loading,
}) => {
  const [costType, setCostType] = useState<OwnershipCostType>(initialData?.costType || 'insurance');
  const [description, setDescription] = useState(initialData?.description || '');
  const [amount, setAmount] = useState(initialData?.amount?.toString() || '');
  const [interval, setInterval] = useState<CostInterval>(initialData?.interval || 'monthly');
  const [startDate, setStartDate] = useState(initialData?.startDate || new Date().toISOString().split('T')[0]);
  const [endDate, setEndDate] = useState(initialData?.endDate || '');
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (initialData) {
      setCostType(initialData.costType);
      setDescription(initialData.description || '');
      setAmount(initialData.amount.toString());
      setInterval(initialData.interval);
      setStartDate(initialData.startDate);
      setEndDate(initialData.endDate || '');
    }
  }, [initialData]);

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

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

    // Validate dates
    if (!startDate) {
      setError('Start date is required');
      return;
    }

    if (endDate && new Date(endDate) < new Date(startDate)) {
      setError('End date must be after start date');
      return;
    }

    try {
      await onSubmit({
        costType,
        description: description.trim() || undefined,
        amount: parsedAmount,
        interval,
        startDate,
        endDate: endDate || undefined,
      });
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : 'Failed to save cost';
      setError(message);
    }
  };

  const isEditMode = !!initialData;

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {error && (
        <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-md text-sm">
          {error}
        </div>
      )}

      <div>
        <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
          Cost Type
        </label>
        <select
          value={costType}
          onChange={(e) => setCostType(e.target.value as OwnershipCostType)}
          className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi"
          style={{ fontSize: '16px' }}
        >
          {(Object.entries(COST_TYPE_LABELS) as [OwnershipCostType, string][]).map(([value, label]) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
          Description (optional)
        </label>
        <input
          type="text"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          placeholder="e.g., Geico Full Coverage"
          className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna"
          style={{ fontSize: '16px' }}
        />
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
            Amount
          </label>
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            placeholder="0.00"
            inputMode="decimal"
            step="0.01"
            min="0"
            required
            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna"
            style={{ fontSize: '16px' }}
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
            Payment Interval
          </label>
          <select
            value={interval}
            onChange={(e) => setInterval(e.target.value as CostInterval)}
            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi"
            style={{ fontSize: '16px' }}
          >
            {(Object.entries(INTERVAL_LABELS) as [CostInterval, string][]).map(([value, label]) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
            Start Date
          </label>
          <input
            type="date"
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}
            required
            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone"
            style={{ fontSize: '16px' }}
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
            End Date (optional)
          </label>
          <input
            type="date"
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}
            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone"
            style={{ fontSize: '16px' }}
          />
          <p className="text-xs text-gray-500 dark:text-titanio mt-1">
            Leave blank for ongoing costs
          </p>
        </div>
      </div>

      <div className="flex gap-3 justify-end pt-4">
        <Button variant="secondary" onClick={onCancel} type="button">
          Cancel
        </Button>
        <Button type="submit" loading={loading}>
          {isEditMode ? 'Update Cost' : 'Add Cost'}
        </Button>
      </div>
    </form>
  );
};