family-planner/apps/client/src/pages/Members.tsx

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { motion, AnimatePresence } from 'framer-motion';
import { Plus, Pencil, Trash2, ArrowLeft } from 'lucide-react';
import { Link } from 'react-router-dom';
import { api, type Member } from '@/lib/api';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Modal } from '@/components/ui/Modal';
import { Avatar } from '@/components/ui/Avatar';

const PRESET_COLORS = [
  '#6366f1', '#14b8a6', '#f43f5e', '#f59e0b', '#64748b',
  '#8b5cf6', '#ec4899', '#10b981', '#f97316', '#06b6d4',
];

interface MemberFormData {
  name: string;
  color: string;
}

function MemberForm({
  initial,
  onSubmit,
  onCancel,
  loading,
}: {
  initial?: MemberFormData;
  onSubmit: (data: MemberFormData) => void;
  onCancel: () => void;
  loading: boolean;
}) {
  const [name, setName] = useState(initial?.name ?? '');
  const [color, setColor] = useState(initial?.color ?? PRESET_COLORS[0]);

  return (
    <div className="space-y-5">
      <Input
        label="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Family member's name"
        autoFocus
      />
      <div>
        <p className="text-sm font-medium text-secondary mb-3">Color</p>
        <div className="flex flex-wrap gap-2.5">
          {PRESET_COLORS.map((c) => (
            <button
              key={c}
              onClick={() => setColor(c)}
              className="h-8 w-8 rounded-full ring-offset-2 ring-offset-surface transition-all duration-150"
              style={{
                backgroundColor: c,
                boxShadow: color === c ? `0 0 0 2px white, 0 0 0 4px ${c}` : undefined,
              }}
              aria-label={c}
            />
          ))}
        </div>
        <div className="mt-3 flex items-center gap-3">
          <input
            type="color"
            value={color}
            onChange={(e) => setColor(e.target.value)}
            className="h-8 w-12 cursor-pointer rounded border border-theme bg-transparent"
          />
          <span className="text-sm text-muted font-mono">{color}</span>
        </div>
      </div>

      {/* Preview */}
      {name && (
        <div className="flex items-center gap-3 p-3 rounded-xl bg-surface-raised">
          <Avatar name={name} color={color} size="md" />
          <span className="font-medium text-primary">{name}</span>
        </div>
      )}

      <div className="flex gap-3 pt-1">
        <Button variant="secondary" onClick={onCancel} className="flex-1">Cancel</Button>
        <Button onClick={() => onSubmit({ name, color })} loading={loading} disabled={!name.trim()} className="flex-1">
          Save
        </Button>
      </div>
    </div>
  );
}

export default function MembersPage() {
  const qc = useQueryClient();
  const [addOpen, setAddOpen] = useState(false);
  const [editTarget, setEditTarget] = useState<Member | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Member | null>(null);

  const { data: members = [], isLoading } = useQuery<Member[]>({
    queryKey: ['members'],
    queryFn: () => api.get('/members').then((r) => r.data),
  });

  const createMutation = useMutation({
    mutationFn: (data: MemberFormData) => api.post('/members', data).then((r) => r.data),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['members'] }); setAddOpen(false); },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: MemberFormData }) =>
      api.put(`/members/${id}`, data).then((r) => r.data),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['members'] }); setEditTarget(null); },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => api.delete(`/members/${id}`),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['members'] }); setDeleteTarget(null); },
  });

  return (
    <div className="p-6 max-w-2xl mx-auto">
      {/* Header */}
      <div className="flex items-center gap-4 mb-6">
        <Link to="/settings" className="p-2 rounded-xl text-secondary hover:bg-surface-raised hover:text-primary transition-colors">
          <ArrowLeft size={20} />
        </Link>
        <div className="flex-1">
          <h1 className="text-2xl font-bold text-primary">Family Members</h1>
          <p className="text-secondary text-sm">{members.length} member{members.length !== 1 ? 's' : ''}</p>
        </div>
        <Button onClick={() => setAddOpen(true)}>
          <Plus size={16} /> Add Member
        </Button>
      </div>

      {/* Member list */}
      {isLoading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-20 rounded-2xl bg-surface-raised animate-pulse" />
          ))}
        </div>
      ) : members.length === 0 ? (
        <div className="text-center py-16">
          <div className="text-5xl mb-4">👨‍👩‍👧‍👦</div>
          <p className="text-primary font-semibold text-lg mb-1">No family members yet</p>
          <p className="text-secondary text-sm mb-6">Add your family members to assign chores, events, and more.</p>
          <Button onClick={() => setAddOpen(true)}>
            <Plus size={16} /> Add First Member
          </Button>
        </div>
      ) : (
        <div className="space-y-3">
          <AnimatePresence initial={false}>
            {members.map((member) => (
              <motion.div
                key={member.id}
                layout
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95 }}
                className="flex items-center gap-4 p-4 rounded-2xl bg-surface border border-theme hover:border-accent/40 transition-colors group"
              >
                <Avatar name={member.name} color={member.color} size="lg" />
                <div className="flex-1 min-w-0">
                  <p className="font-semibold text-primary truncate">{member.name}</p>
                  <p className="text-xs font-mono text-muted">{member.color}</p>
                </div>
                <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  <button
                    onClick={() => setEditTarget(member)}
                    className="p-2 rounded-lg text-secondary hover:bg-surface-raised hover:text-accent transition-colors"
                  >
                    <Pencil size={16} />
                  </button>
                  <button
                    onClick={() => setDeleteTarget(member)}
                    className="p-2 rounded-lg text-secondary hover:bg-surface-raised hover:text-red-500 transition-colors"
                  >
                    <Trash2 size={16} />
                  </button>
                </div>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      )}

      {/* Add modal */}
      <Modal open={addOpen} onClose={() => setAddOpen(false)} title="Add Family Member">
        <MemberForm
          onSubmit={(data) => createMutation.mutate(data)}
          onCancel={() => setAddOpen(false)}
          loading={createMutation.isPending}
        />
      </Modal>

      {/* Edit modal */}
      <Modal open={!!editTarget} onClose={() => setEditTarget(null)} title="Edit Family Member">
        {editTarget && (
          <MemberForm
            initial={{ name: editTarget.name, color: editTarget.color }}
            onSubmit={(data) => updateMutation.mutate({ id: editTarget.id, data })}
            onCancel={() => setEditTarget(null)}
            loading={updateMutation.isPending}
          />
        )}
      </Modal>

      {/* Delete confirm modal */}
      <Modal open={!!deleteTarget} onClose={() => setDeleteTarget(null)} title="Remove Member" size="sm">
        {deleteTarget && (
          <div className="space-y-4">
            <div className="flex items-center gap-3 p-3 rounded-xl bg-surface-raised">
              <Avatar name={deleteTarget.name} color={deleteTarget.color} />
              <span className="font-medium text-primary">{deleteTarget.name}</span>
            </div>
            <p className="text-secondary text-sm">
              Removing this member won't delete their assigned chores or events — those will simply become unassigned.
            </p>
            <div className="flex gap-3">
              <Button variant="secondary" onClick={() => setDeleteTarget(null)} className="flex-1">Cancel</Button>
              <Button
                variant="danger"
                loading={deleteMutation.isPending}
                onClick={() => deleteMutation.mutate(deleteTarget.id)}
                className="flex-1"
              >
                Remove
              </Button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}