'use client'

import React, { useState } from 'react';
import { Dialog, DialogContent } from '@alga-psa/ui/components/Dialog';
import { Button } from '@alga-psa/ui/components/Button';
import { Label } from '@alga-psa/ui/components/Label';
import { Input } from '@alga-psa/ui/components/Input';
import { Alert, AlertDescription } from '@alga-psa/ui/components/Alert';
import { AlertCircle } from 'lucide-react';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';

interface ContractLineRateDialogProps {
  contractLine: {
    contract_line_id: string;
    contract_line_name: string;
    rate?: number | null;
    custom_rate?: number | null;
  };
  onClose: () => void;
  onSave: (contractLineId: string, rate: number) => void;
}

export function ContractLineRateDialog({ contractLine, onClose, onSave }: ContractLineRateDialogProps) {
  const { t } = useTranslation('msp/contracts');
  const [rate, setRate] = useState<number>(
    contractLine.rate !== undefined && contractLine.rate !== null ? contractLine.rate : 0
  );
  const [error, setError] = useState<string | null>(null);

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

    if (isNaN(rate) || rate < 0) {
      setError(t('contractLineRate.validation.validRateRequired', {
        defaultValue: 'Please enter a valid rate (must be a non-negative number)',
      }));
      return;
    }

    onSave(contractLine.contract_line_id, rate);
  };

  return (
    <Dialog
      isOpen={true}
      onClose={onClose}
      title={t('contractLineRate.title', {
        defaultValue: 'Set Custom Rate for {{name}}',
        name: contractLine.contract_line_name,
      })}
      className="max-w-md"
      footer={(
        <div className="flex justify-end space-x-2">
          <Button
            id="cancel-rate-btn"
            type="button"
            variant="secondary"
            onClick={onClose}
          >
            {t('contractLineRate.actions.cancel', { defaultValue: 'Cancel' })}
          </Button>
          <Button
            id="save-rate-btn"
            type="button"
            onClick={() => (document.getElementById('contract-plan-rate-form') as HTMLFormElement | null)?.requestSubmit()}
          >
            {t('contractLineRate.actions.saveRate', { defaultValue: 'Save Rate' })}
          </Button>
        </div>
      )}
    >
      <DialogContent>

          <form id="contract-plan-rate-form" onSubmit={handleSubmit} className="space-y-4">
            {error && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}
            
            <div>
              <Label htmlFor="custom-rate">{t('contractLineRate.fields.rate', { defaultValue: 'Rate' })}</Label>
              <div className="relative">
                <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground">$</span>
                <Input
                  id="custom-rate"
                  type="number"
                  min="0"
                  step="0.01"
                  value={rate}
                  onChange={(e) => {
                    const parsed = parseFloat(e.target.value);
                    setRate(Number.isNaN(parsed) ? 0 : parsed);
                  }}
                  className="pl-10 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                />
              </div>
            </div>
            
          </form>
      </DialogContent>
    </Dialog>
  );
}
