import { Plus, Trash2, UserRound, AtSign } from "lucide-react";
import { MultiSelect } from "@/Components/ui/multi-select";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";

/**
 * Editor de destinatários (usuários do sistema + e-mails avulsos).
 *
 * value: Array<{ profile_id?: string } | { email: string, name?: string }>
 * onChange: (next) => void
 * clientProfiles: Array<{ id, full_name, email }>
 */
export default function RecipientEditor({
    value = [],
    onChange,
    clientProfiles = [],
    profilesLabel = "Usuários do sistema",
    emailsLabel = "E-mails avulsos",
    addEmailLabel = "Adicionar e-mail avulso",
}) {
    const profileIds = value.filter((v) => v.profile_id).map((v) => String(v.profile_id));
    const freeEmails = value.filter((v) => !v.profile_id);

    const profileOptions = clientProfiles.map((p) => ({
        value: String(p.id),
        label: p.full_name || p.email,
        hint: p.email,
    }));

    function emit(nextProfileIds, nextFreeEmails) {
        const next = [
            ...nextProfileIds.map((id) => ({ profile_id: id })),
            ...nextFreeEmails,
        ];
        onChange?.(next);
    }

    function setProfiles(nextIds) {
        emit(nextIds.map(String), freeEmails);
    }

    function updateEmail(index, patch) {
        const next = freeEmails.map((e, i) => (i === index ? { ...e, ...patch } : e));
        emit(profileIds, next);
    }

    function addEmail() {
        emit(profileIds, [...freeEmails, { email: "", name: "" }]);
    }

    function removeEmail(index) {
        emit(profileIds, freeEmails.filter((_, i) => i !== index));
    }

    return (
        <div className="space-y-4">
            <div className="space-y-1.5">
                <Label className="flex items-center gap-1.5 text-sm font-medium">
                    <UserRound className="h-3.5 w-3.5 text-muted-foreground" />
                    {profilesLabel}
                </Label>
                {profileOptions.length === 0 ? (
                    <p className="text-xs text-muted-foreground">
                        Nenhum usuário cliente disponível.
                    </p>
                ) : (
                    <MultiSelect
                        options={profileOptions}
                        value={profileIds}
                        onChange={setProfiles}
                        placeholder="Selecionar usuários..."
                        searchPlaceholder="Buscar usuário..."
                        emptyText="Nenhum usuário encontrado."
                        maxBadges={Infinity}
                    />
                )}
            </div>

            <div className="space-y-1.5">
                <Label className="flex items-center gap-1.5 text-sm font-medium">
                    <AtSign className="h-3.5 w-3.5 text-muted-foreground" />
                    {emailsLabel}
                </Label>
                {freeEmails.length > 0 && (
                    <div className="space-y-2">
                        {freeEmails.map((e, i) => (
                            <div key={i} className="flex items-center gap-2">
                                <Input
                                    value={e.name ?? ""}
                                    onChange={(ev) => updateEmail(i, { name: ev.target.value })}
                                    placeholder="Nome (opcional)"
                                    className="h-9 sm:w-40"
                                />
                                <Input
                                    type="email"
                                    value={e.email ?? ""}
                                    onChange={(ev) => updateEmail(i, { email: ev.target.value })}
                                    placeholder="email@exemplo.com"
                                    className="h-9 flex-1"
                                />
                                <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon"
                                    className="h-9 w-9 shrink-0 text-muted-foreground hover:text-destructive"
                                    onClick={() => removeEmail(i)}
                                >
                                    <Trash2 className="h-4 w-4" />
                                </Button>
                            </div>
                        ))}
                    </div>
                )}
                <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="h-8"
                    onClick={addEmail}
                >
                    <Plus className="h-3.5 w-3.5" />
                    {addEmailLabel}
                </Button>
            </div>
        </div>
    );
}