import { cn } from '@/lib/utils';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import type { Payment } from '@/types';

const PAYMENT_METHODS: [string, string][] = [
  ['manual', 'Manual'],
  ['bank', 'Bank Transfer'],
  ['card', 'Card'],
  ['autopay', 'Autopay'],
  ['check', 'Check'],
  ['cash', 'Cash'],
];

interface PaymentFormFieldsProps {
  inp?: string;
  editingPayment?: Payment | null;
  paymentBusy?: boolean;
  amount: string;
  setAmount: (v: string) => void;
  date: string;
  setDate: (v: string) => void;
  method: string;
  setMethod: (v: string) => void;
  notes: string;
  setNotes: (v: string) => void;
  onSubmit?: React.FormEventHandler<HTMLFormElement>;
  onCancel?: () => void;
}

// Add/edit form for a manual payment on a bill (edit mode). Presentational —
// the parent owns the form state, the submit handler, and open/close.
export default function PaymentFormFields({
  inp,
  editingPayment,
  paymentBusy,
  amount,
  setAmount,
  date,
  setDate,
  method,
  setMethod,
  notes,
  setNotes,
  onSubmit,
  onCancel,
}: PaymentFormFieldsProps) {
  return (
    <form onSubmit={onSubmit} className="mt-3 rounded-lg border border-border/60 bg-muted/20 p-3">
      <div className="mb-3 flex items-center justify-between gap-3">
        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
          {editingPayment ? 'Edit payment' : 'Add payment'}
        </p>
        <span className="rounded-md border border-emerald-500/25 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
          manual
        </span>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        <div className="space-y-1.5">
          <Label className="text-xs uppercase tracking-wider text-muted-foreground">
            Amount ($)
          </Label>
          <Input
            type="number"
            min="0"
            step="0.01"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            className={cn(inp, 'font-mono')}
            required
          />
        </div>
        <div className="space-y-1.5">
          <Label className="text-xs uppercase tracking-wider text-muted-foreground">
            Paid Date
          </Label>
          <Input
            type="date"
            value={date}
            onChange={(e) => setDate(e.target.value)}
            className={cn(inp, 'font-mono')}
            required
          />
        </div>
        <div className="space-y-1.5">
          <Label className="text-xs uppercase tracking-wider text-muted-foreground">Method</Label>
          <Select value={method} onValueChange={setMethod}>
            <SelectTrigger className={cn(inp, 'w-full')}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {PAYMENT_METHODS.map(([value, label]) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-1.5">
          <Label className="text-xs uppercase tracking-wider text-muted-foreground">Notes</Label>
          <Input
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            className={inp}
            placeholder="Paid from checking"
          />
        </div>
      </div>
      <div className="mt-3 flex justify-end gap-2">
        <Button
          type="button"
          variant="ghost"
          disabled={paymentBusy}
          onClick={onCancel}
          className="text-xs"
        >
          Cancel
        </Button>
        <Button type="submit" disabled={paymentBusy} className="text-xs">
          {paymentBusy ? 'Saving...' : editingPayment ? 'Save Payment' : 'Add Payment'}
        </Button>
      </div>
    </form>
  );
}
