common-availability/frontend/src/components/ParticipantManager.tsx

import { useState } from 'react';
import { Participant } from '@/types/calendar';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { UserPlus, Trash2, User, Pencil, Check, X, AlertCircle } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import { getAvatarColor } from '@/lib/utils';

interface ParticipantManagerProps {
  participants: Participant[];
  onAddParticipant: (participant: { name: string; email: string; timezone: string; icsLink: string }) => void;
  onRemoveParticipant: (id: string) => void;
  onUpdateParticipant?: (id: string, data: { timezone?: string; ics_url?: string }) => Promise<void>;
}

export const ParticipantManager = ({
  participants,
  onAddParticipant,
  onRemoveParticipant,
  onUpdateParticipant,
}: ParticipantManagerProps) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [icsLink, setIcsLink] = useState('');

  // Edit state
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editIcsLink, setEditIcsLink] = useState('');
  const [isUpdating, setIsUpdating] = useState(false);

  const { toast } = useToast();

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

    if (!name.trim() || !email.trim()) {
      toast({
        title: "Missing fields",
        description: "Please fill in name and email",
        variant: "destructive",
      });
      return;
    }

    onAddParticipant({
      name: name.trim(),
      email: email.trim(),
      timezone: 'America/Toronto',
      icsLink: icsLink.trim() || ''
    });
    setName('');
    setEmail('');
    setIcsLink('');

    toast({
      title: "Participant added",
      description: `${name} has been added successfully`,
    });
  };

  const startEditing = (participant: Participant) => {
    setEditingId(participant.id);
    setEditIcsLink(participant.icsLink || '');
  };

  const cancelEditing = () => {
    setEditingId(null);
    setEditIcsLink('');
  };

  const saveEditing = async (participantId: string) => {
    if (!onUpdateParticipant) return;

    setIsUpdating(true);
    try {
      await onUpdateParticipant(participantId, {
        ics_url: editIcsLink || undefined,
      });
      toast({
        title: "Participant updated",
        description: "Changes saved successfully",
      });
      setEditingId(null);
    } catch (error) {
      toast({
        title: "Update failed",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      });
    } finally {
      setIsUpdating(false);
    }
  };

  const getInitials = (name: string) => {
    return name
      .split(' ')
      .map((n) => n[0])
      .join('')
      .toUpperCase()
      .slice(0, 2);
  };

  return (
    <div className="space-y-8">
      {/* Add Participant Form */}
      <div className="bg-card rounded-xl shadow-card p-6">
        <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
          <UserPlus className="w-5 h-5 text-primary" />
          Add Participant
        </h3>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div className="space-y-2">
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                placeholder="John Doe"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="bg-background"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="john@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="bg-background"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="icsLink">Calendar ICS Link</Label>
              <Input
                id="icsLink"
                placeholder="https://..."
                value={icsLink}
                onChange={(e) => setIcsLink(e.target.value)}
                className="bg-background"
              />
            </div>
          </div>

          <Button type="submit" className="w-full sm:w-auto">
            <UserPlus className="w-4 h-4 mr-2" />
            Add Participant
          </Button>
        </form>
      </div>

      {/* Participants List */}
      <div className="bg-card rounded-xl shadow-card p-6">
        <h3 className="text-lg font-semibold text-foreground mb-4">
          Participants ({participants.length})
        </h3>

        {participants.length === 0 ? (
          <div className="text-center py-8 text-muted-foreground">
            <User className="w-12 h-12 mx-auto mb-3 opacity-50" />
            <p>No participants yet. Add someone above to get started.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {participants.map((participant) => (
              <div
                key={participant.id}
                className="p-4 bg-background rounded-lg border border-border"
              >
                {editingId === participant.id ? (
                  // Edit mode
                  <div className="space-y-4">
                    <div className="flex items-center gap-3">
                      <div
                        className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium text-white"
                        style={{ backgroundColor: getAvatarColor(participant.name) }}
                      >
                        {getInitials(participant.name)}
                      </div>
                      <div>
                        <div className="font-medium text-foreground">{participant.name}</div>
                        <div className="text-sm text-muted-foreground">{participant.email}</div>
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor={`edit-ics-${participant.id}`}>Calendar ICS Link</Label>
                      <Input
                        id={`edit-ics-${participant.id}`}
                        value={editIcsLink}
                        onChange={(e) => setEditIcsLink(e.target.value)}
                        placeholder="https://..."
                        className="bg-card"
                      />
                    </div>

                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        onClick={() => saveEditing(participant.id)}
                        disabled={isUpdating}
                      >
                        <Check className="w-4 h-4 mr-1" />
                        {isUpdating ? 'Saving...' : 'Save'}
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={cancelEditing}
                        disabled={isUpdating}
                      >
                        <X className="w-4 h-4 mr-1" />
                        Cancel
                      </Button>
                    </div>
                  </div>
                ) : (
                  // View mode
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div
                        className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium text-white"
                        style={{ backgroundColor: getAvatarColor(participant.name) }}
                      >
                        {getInitials(participant.name)}
                      </div>
                      <div>
                        <div className="font-medium text-foreground">{participant.name}</div>
                        <div className="text-sm text-muted-foreground flex flex-wrap gap-x-2">
                          <span>{participant.email}</span>
                          <span className="text-muted-foreground/60">•</span>
                          {participant.icsLink ? (
                            <span className="text-primary truncate max-w-[200px]" title={participant.icsLink}>
                              ICS linked
                            </span>
                          ) : (
                            <span className="text-amber-600 flex items-center gap-1">
                              <AlertCircle className="w-3 h-3" />
                              No calendar linked
                            </span>
                          )}
                        </div>
                      </div>
                    </div>

                    <div className="flex items-center gap-1">
                      {onUpdateParticipant && (
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => startEditing(participant)}
                          className="text-muted-foreground hover:text-foreground"
                        >
                          <Pencil className="w-4 h-4" />
                        </Button>
                      )}
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => onRemoveParticipant(participant.id)}
                        className="text-muted-foreground hover:text-destructive"
                      >
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};