family-planner/apps/client/src/features/chores/ChoreModal.tsx

import { useState, useEffect } from 'react';
import { Trash2 } from 'lucide-react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { api, type Chore } from '@/lib/api';
import { useMembers } from '@/hooks/useMembers';
import { Modal } from '@/components/ui/Modal';
import { Input } from '@/components/ui/Input';
import { Textarea } from '@/components/ui/Textarea';
import { Select } from '@/components/ui/Select';
import { Button } from '@/components/ui/Button';

const RECURRENCE = [
  { value: 'none',    label: 'One-time' },
  { value: 'daily',   label: 'Daily' },
  { value: 'weekly',  label: 'Weekly' },
  { value: 'monthly', label: 'Monthly' },
];

interface Props {
  open: boolean;
  onClose: () => void;
  chore?: Chore | null;
}

export function ChoreModal({ open, onClose, chore }: Props) {
  const qc = useQueryClient();
  const { data: members = [] } = useMembers();
  const isEdit = !!chore;

  const blank = () => ({ title: '', description: '', member_id: '', recurrence: 'none', due_date: '' });
  const [form, setForm] = useState(blank);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!open) return;
    if (chore) {
      setForm({
        title:       chore.title,
        description: chore.description ?? '',
        member_id:   chore.member_id ? String(chore.member_id) : '',
        recurrence:  chore.recurrence,
        due_date:    chore.due_date ?? '',
      });
    } else {
      setForm(blank());
    }
    setError('');
  }, [open, chore]);

  const set = (k: keyof typeof form, v: string) => setForm((f) => ({ ...f, [k]: v }));

  const saveMutation = useMutation({
    mutationFn: (body: object) =>
      isEdit
        ? api.put(`/chores/${chore!.id}`, body).then((r) => r.data)
        : api.post('/chores', body).then((r) => r.data),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['chores'] }); onClose(); },
    onError: () => setError('Failed to save. Please try again.'),
  });

  const deleteMutation = useMutation({
    mutationFn: () => api.delete(`/chores/${chore!.id}`),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['chores'] }); onClose(); },
  });

  const handleSubmit = () => {
    if (!form.title.trim()) { setError('Title is required'); return; }
    saveMutation.mutate({
      title:       form.title.trim(),
      description: form.description || null,
      member_id:   form.member_id ? Number(form.member_id) : null,
      recurrence:  form.recurrence,
      due_date:    form.due_date || null,
    });
  };

  return (
    <Modal open={open} onClose={onClose} title={isEdit ? 'Edit Chore' : 'New Chore'}>
      <div className="space-y-4">
        <Input
          label="Title"
          value={form.title}
          onChange={(e) => set('title', e.target.value)}
          placeholder="What needs to be done?"
          autoFocus
        />
        <div className="grid grid-cols-2 gap-4">
          <Select
            label="Assigned To"
            value={form.member_id}
            onChange={(e) => set('member_id', e.target.value)}
          >
            <option value="">Unassigned</option>
            {members.map((m) => (
              <option key={m.id} value={m.id}>{m.name}</option>
            ))}
          </Select>
          <Select
            label="Repeats"
            value={form.recurrence}
            onChange={(e) => set('recurrence', e.target.value)}
          >
            {RECURRENCE.map((r) => (
              <option key={r.value} value={r.value}>{r.label}</option>
            ))}
          </Select>
        </div>
        <div>
          <label className="text-sm font-medium text-secondary block mb-1.5">Due Date</label>
          <input
            type="date"
            value={form.due_date}
            onChange={(e) => set('due_date', e.target.value)}
            className="w-full rounded-lg border border-theme bg-surface-raised px-3 py-2 text-sm text-primary focus:outline-none focus:ring-2 ring-accent transition-colors"
          />
        </div>
        <Textarea
          label="Notes"
          value={form.description}
          onChange={(e) => set('description', e.target.value)}
          placeholder="Optional details…"
          rows={2}
        />
        {error && <p className="text-sm text-red-500">{error}</p>}
        <div className="flex items-center gap-2 pt-1">
          {isEdit && (
            <Button
              variant="ghost"
              onClick={() => deleteMutation.mutate()}
              loading={deleteMutation.isPending}
              className="text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
            >
              <Trash2 size={16} />
            </Button>
          )}
          <div className="flex gap-2 ml-auto">
            <Button variant="secondary" onClick={onClose}>Cancel</Button>
            <Button onClick={handleSubmit} loading={saveMutation.isPending}>
              {isEdit ? 'Save Changes' : 'Add Chore'}
            </Button>
          </div>
        </div>
      </div>
    </Modal>
  );
}