import React, { useState } from 'react';
import { Mail, Plus, Shield, Trash2, UserMinus, Users } from 'lucide-react';
import { Group, User } from '../services/types';
interface GroupsViewProps {
groups: Group[];
currentUser: User | null;
onCreateGroup: (name: string) => Promise<void>;
onInviteMember: (groupId: string, email: string) => Promise<void>;
onRemoveMember: (groupId: string, email: string) => Promise<void>;
onLeaveGroup: (groupId: string) => Promise<void>;
onDeleteGroup: (groupId: string) => Promise<void>;
}
export const GroupsView: React.FC<GroupsViewProps> = ({
groups,
currentUser,
onCreateGroup,
onInviteMember,
onRemoveMember,
onLeaveGroup,
onDeleteGroup,
}) => {
const [newGroupName, setNewGroupName] = useState('');
const [inviteEmails, setInviteEmails] = useState<Record<string, string>>({});
const [error, setError] = useState<string | null>(null);
const [submitting, setSubmitting] = useState(false);
const handleCreateGroup = async (e: React.FormEvent) => {
e.preventDefault();
if (!newGroupName.trim()) return;
try {
setSubmitting(true);
setError(null);
await onCreateGroup(newGroupName.trim());
setNewGroupName('');
} catch (err: unknown) {
setError(err instanceof Error ? err.message : 'Failed to create group');
} finally {
setSubmitting(false);
}
};
const handleInvite = async (groupId: string) => {
const email = inviteEmails[groupId]?.trim();
if (!email) return;
try {
setError(null);
await onInviteMember(groupId, email);
setInviteEmails((prev) => ({ ...prev, [groupId]: '' }));
} catch (err: unknown) {
setError(err instanceof Error ? err.message : 'Failed to invite member');
}
};
return (
<div className="space-y-8">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 className="text-2xl font-bold tracking-tight text-slate-900">Groups & Shared Access</h1>
<p className="text-xs text-slate-500 mt-0.5">
Collaborate on shared vehicle maintenance, household warranties, and joint renewals.
</p>
</div>
</div>
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-xs text-red-700">
{error}
</div>
)}
{/* Create New Group Card */}
<div className="p-5 bg-white rounded-xl border border-slate-200">
<h2 className="text-sm font-semibold text-slate-900 mb-1 flex items-center gap-2">
<Users className="w-4 h-4 text-slate-700" />
<span>Create New Shared Group</span>
</h2>
<p className="text-xs text-slate-500 mb-3">
All invited group members can create, view, edit, and complete shared lifecycle items.
</p>
<form onSubmit={handleCreateGroup} className="flex gap-2 max-w-md">
<input
type="text"
value={newGroupName}
onChange={(e) => setNewGroupName(e.target.value)}
placeholder="e.g. Oakridge Family & Home"
className="flex-1 px-3 py-2 text-xs border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900"
required
/>
<button
type="submit"
disabled={submitting}
className="px-4 py-2 text-xs font-semibold text-white bg-slate-900 hover:bg-slate-800 rounded-lg transition-colors flex items-center gap-1.5 shrink-0 disabled:opacity-50"
>
<Plus className="w-3.5 h-3.5" />
<span>Create Group</span>
</button>
</form>
</div>
{/* List of Groups */}
<div className="space-y-6">
<h2 className="text-xs font-bold uppercase tracking-wider text-slate-500">
Your Groups ({groups.length})
</h2>
{groups.length === 0 ? (
<div className="p-8 text-center bg-white rounded-xl border border-slate-200 text-xs text-slate-500">
You don't belong to any groups yet. Create one above to share lifecycle tracking with family or teammates.
</div>
) : (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{groups.map((group) => {
const isOwner = group.ownerId === currentUser?.id;
return (
<div
key={group.id}
className="bg-white rounded-xl border border-slate-200 p-5 flex flex-col justify-between"
>
<div>
{/* Title & Owner badge */}
<div className="flex items-start justify-between gap-3">
<div>
<h3 className="text-base font-bold text-slate-900">{group.name}</h3>
<p className="text-xs text-slate-500 mt-0.5 flex items-center gap-1.5">
<Shield className="w-3.5 h-3.5 text-slate-400" />
<span>Owner: {group.ownerEmail}</span>
{isOwner && (
<span className="text-[10px] font-semibold text-emerald-800 bg-emerald-50 px-1.5 py-0.2 rounded">
You
</span>
)}
</p>
</div>
{/* Group actions */}
{isOwner ? (
<button
onClick={() => {
if (
window.confirm(
`Delete "${group.name}"? Deleting a group permanently deletes the group AND all its shared items (MVP Decision 30).`
)
) {
onDeleteGroup(group.id);
}
}}
className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
title="Delete group and all its shared items"
aria-label="Delete group"
>
<Trash2 className="w-4 h-4" />
</button>
) : (
<button
onClick={() => {
if (
window.confirm(
`Leave "${group.name}"? Shared items will remain with the group (MVP Decision 18).`
)
) {
onLeaveGroup(group.id);
}
}}
className="text-xs text-slate-500 hover:text-red-600 flex items-center gap-1"
>
<UserMinus className="w-3.5 h-3.5" />
<span>Leave</span>
</button>
)}
</div>
{/* Member list */}
<div className="mt-4 pt-3 border-t border-slate-100">
<div className="text-xs font-semibold text-slate-700 mb-2">
Members ({group.memberEmails.length}):
</div>
<div className="space-y-1.5">
{group.memberEmails.map((email) => (
<div
key={email}
className="flex items-center justify-between text-xs py-1 px-2 rounded bg-slate-50 text-slate-700"
>
<span className="truncate">{email}</span>
{isOwner && email.toLowerCase() !== group.ownerEmail.toLowerCase() && (
<button
onClick={() => onRemoveMember(group.id, email)}
className="text-slate-400 hover:text-red-600 transition-colors p-0.5"
title="Remove member"
aria-label={`Remove ${email}`}
>
<Trash2 className="w-3.5 h-3.5" />
</button>
)}
</div>
))}
</div>
</div>
</div>
{/* Invite by email form (Decision 13) */}
<div className="mt-4 pt-3 border-t border-slate-100">
<label className="block text-[11px] font-semibold text-slate-700 mb-1">
Invite Member by Email
</label>
<div className="flex gap-2">
<div className="relative flex-1">
<Mail className="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-2.5" />
<input
type="email"
value={inviteEmails[group.id] || ''}
onChange={(e) =>
setInviteEmails((prev) => ({
...prev,
[group.id]: e.target.value,
}))
}
placeholder="colleague@example.com"
className="w-full pl-8 pr-2.5 py-1.5 text-xs border border-slate-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-slate-900"
/>
</div>
<button
type="button"
onClick={() => handleInvite(group.id)}
className="px-3 py-1.5 text-xs font-medium text-slate-900 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors shrink-0"
>
Invite
</button>
</div>
</div>
</div>
);
})}
</div>
)}
</div>
</div>
);
};